Skip to main content
Únase a nosotros en TDX, en San Francisco, o en Salesforce+ los días 5 y 6 de marzo en la conferencia para desarrolladores sobre la era de agentes de IA. Registrarse ahora.

Personalizar la plantilla de tienda D2C

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

  • Enumerar las opciones de una plantilla de tienda de D2C Commerce.
  • Explicar cómo se personaliza el tema de una plantilla de tienda de D2C Commerce.
  • Explicar cómo se personaliza un encabezado o un pie de página.
  • Describir cómo se pueden utilizar páginas y componentes.
  • Explicar la diferencia entre la activación y la publicación de una tienda.
  • Explicar cómo se personaliza una tienda.

Personalizar una tienda de D2C Commerce

Taylor Givens, vendedor superior de Ursa Major Solar, tiene como objetivo crear una experiencia increíble para los visitantes de la tienda de Salesforce D2C Commerce. Está deseando personalizar la plantilla de D2C de Experience Builder con el logotipo de la tienda de Ursa Major Solar para empezar.  

Logotipo de Ursa Major Solar

La plantilla de D2C Commerce incluye páginas específicas del comercio, como la página de inicio y la página de resultados de búsqueda. Estas páginas utilizan componentes desarrollados específicamente para tiendas de D2C Commerce. Gracias a la interfaz de Experience Builder, que es fácil de utilizar, Taylor puede arrastrar y soltar componentes en sus páginas y personalizar las propiedades de los mismos. Se pueden agregar imágenes y estilos a la tienda a fin de crear una experiencia única para los compradores.

Taylor Givens, vendedor superior de Ursa Major Solar

Taylor crea esta lista de comprobación tan útil de lo que se debe hacer.


Tarea

1

Configurar el tema de la tienda.

2

Configurar un encabezado o pie de página personalizado.

3

Explorar páginas y componentes.

4

Obtener la vista previa de una tienda y publicarla.

5

Configurar una URL personalizada para la tienda.

Taylor comienza por personalizar las páginas y los componentes de su tienda de D2C Commerce haciendo clic en el icono de Experience Builder en la página de inicio de la tienda.

Utilice Experience Builder desde su tienda para crear, agregar personalización de marca y personalizar su tienda.

Consulte Customize Sites with Experience Builder (Personalizar sitios con Experience Builder) para obtener detalles sobre el uso de Experience Builder.

Configurar el tema de la tienda

A Taylor le alegra saber que la plantilla de la tienda de D2C Commerce utiliza un tema de D2C preconfigurado. Se pueden especificar los colores, las imágenes, el tamaño del texto y el espaciado para personalizar el tema a fin de que se ajuste a los requisitos. Algunos componentes tienen propiedades que les permiten sobrescribir los parámetros del tema del componente.

Acceda a la configuración del tema de la tienda expandiendo el icono Theme (Temas) que aparece a la izquierda de la página de Experience Builder.

En Experience Builder, seleccione un tema.

Taylor especifica los colores para el fondo, el texto, los elementos de marca y los elementos que aparecen en primer plano. Genera una paleta a partir de una imagen cargada.

En la página Images (Imágenes), selecciona el logotipo de su empresa.

En Experience Builder, cambie el color y agregue una imagen.

También se puede configurar el tamaño del texto y el espaciado del sitio para dispositivos de escritorio y dispositivos móviles. 

La plantilla de tienda de D2C Commerce incluye un componente de encabezado y de pie de página en cada una de las páginas. Taylor quiere utilizar un encabezado personalizado para una página; por ello, primero ajusta el formato del tema de la página. Veamos cómo hacerlo.

  1. Seleccione la página en la que desea utilizar un encabezado o pie de página personalizado: Home (Inicio)
  2. Haga clic en el icono de configuración.
  3. Haga clic en Theme (Tema).
  4. Haga clic en Configure (Configurar).
  5. Haga clic en New Theme Layout (Nuevo formato de tema).
  6. Introduzca el nuevo formato: Ursa Major Solar - home
  7. En el menú desplegable Commerce Layout (Formato de Commerce), seleccione Commerce Layout (Formato de Commerce).
    En Experience Builder, personalice el formato de su página.
  8. Haga clic en Save (Guardar).

Ahora, la página tiene una sección superior y una sección inferior que Taylor puede utilizar como encabezado y pie de página.
Consulte la guía del desarrollador de D2C Commerce para obtener detalles sobre el desarrollo de componentes personalizados.

Explorar páginas y componentes

La plantilla de tienda de D2C Commerce incluye páginas y componentes que le permiten a Taylor crear un escaparate atractivo y fácil de utilizar. Estos son los componentes disponibles para cada página.

Página

Objetivo

Componentes

Cart (Carrito)

Mostrar a los compradores los productos que han seleccionado para comprar.

  • Cart (Carrito)
  • Cart Totals (Total del carrito)
  • Botón Checkout (Tramitación de compra)
  • Hero Banner (Banner grande)
  • Link List (Lista de vínculo)
  • Rich Content Editor (Editor de contenido enriquecido)
  • Store Logo (Logotipo de la tienda)
  • Tile Menu (Menú de iconos)

Category (Categoría)

Mostrar a los compradores los productos de la categoría seleccionada.

  • Category Banner (Banner de categoría)
  • Category Breadcrumbs (Ruta de exploración de categoría)
  • Hero Banner (Banner grande)
  • Link List (Lista de vínculo)
  • Rich Content Editor (Editor de contenido enriquecido)
  • Search Results (Resultados de búsqueda)
  • Shop By Category (Compra por categoría)
  • Store Logo (Logotipo de la tienda)
  • Tile Menu (Menú de iconos)
  • Top Sellers (Ventas principales)

Checkout (Tramitación de compra)

Permitir que los compradores completen su compra.

  • Cart Totals (Total del carrito)
  • Checkout (Tramitación de compra)
  • Checkout Header (Encabezado de tramitación de compra)
  • Hero Banner (Banner grande)
  • Link List (Lista de vínculo)
  • Rich Content Editor (Editor de contenido enriquecido)
  • Store Logo (Logotipo de la tienda)
  • Tile Menu (Menú de iconos)

Error (Error)

Indicar a los compradores que el sistema ha encontrado algún error.

  • Hero Banner (Banner grande)
  • Link List (Lista de vínculo)
  • Page Error Message (Mensaje de error de la página)
  • Rich Content Editor (Editor de contenido enriquecido)
  • Store Logo (Logotipo de la tienda)
  • Tile Menu (Menú de iconos)

Login/Check Password (Contraseña de inicio de sesión/comprobación de contraseña)

Indicar a los compradores registrados que comprueben el correo electrónico para restablecer la contraseña.

  • Check Email (Correo electrónico de comprobación)
  • Hero Banner (Banner grande)
  • Link List (Lista de vínculo)
  • My Account Header (Encabezado Mi cuenta)
  • Rich Content Editor (Editor de contenido enriquecido)
  • Store Logo (Logotipo de la tienda)
  • Tile Menu (Menú de iconos)

Login/Forgot Password (Contraseña de inicio de sesión/contraseña olvidada)

Permitir que los compradores registrados recuperen una contraseña que han olvidado.

  • Forgot Password (Contraseña olvidada)
  • Hero Banner (Banner grande)
  • Link List (Lista de vínculo)
  • My Account Header (Encabezado Mi cuenta)
  • Rich Content Editor (Editor de contenido enriquecido)
  • Store Logo (Logotipo de la tienda)
  • Tile Menu (Menú de iconos)

Login/Login (Inicio de sesión/inicio de sesión)

Permitir que los compradores inicien sesión en la tienda.

  • Hero Banner (Banner grande)
  • Link List (Lista de vínculo)
  • Login Form (Formulario de inicio de sesión)
  • My Account Header (Encabezado Mi cuenta)
  • Rich Content Editor (Editor de contenido enriquecido)
  • Store Logo (Logotipo de la tienda)
  • Tile Menu (Menú de iconos)

Login/Register (Inicio de sesión/Registro)

Permitir que los compradores se registren en la tienda.

  • Hero Banner (Banner grande)
  • Link List (Lista de vínculo)
  • Rich Content Editor (Editor de contenido enriquecido)
  • Self Registration (Registro automático)
  • Store Logo (Logotipo de la tienda)
  • Tile Menu (Menú de iconos)

Home (Inicio)

Crear una página de destino atractiva para que los compradores entren al escaparate.

  • Hero Banner (Banner grande)
  • Link List (Lista de vínculo)
  • Rich Content Editor (Editor de contenido enriquecido)
  • Shop By Category (Compra por categoría)
  • Store Logo (Logotipo de la tienda)
  • Tile Menu (Menú de iconos)
  • Top Sellers (Ventas principales)

My Profile (Mi perfil)

Permitir que los compradores visualicen su imagen de perfil y restablezcan su contraseña.

  • Hero Banner (Banner grande)
  • Link List (Lista de vínculo)
  • My Account Header (Encabezado Mi cuenta)
  • My Account Password (Contraseña de mi cuenta)
  • My Profile (Mi perfil)
  • Rich Content Editor (Editor de contenido enriquecido)
  • Store Logo (Logotipo de la tienda)
  • Tile Menu (Menú de iconos)

Order (Pedido)

Indicar a los compradores que se ha realizado el pedido de los elementos correctamente.

  • Hero Banner (Banner grande)
  • Link List (Lista de vínculo)
  • Order Confirmation Message (Mensaje de confirmación de pedido)
  • Rich Content Editor (Editor de contenido enriquecido)
  • Store Logo (Logotipo de la tienda)
  • Tile Menu (Menú de iconos)

Product (Producto)

Mostrar información sobre un producto, incluidos el precio, la descripción y una imagen.

  • Einstein Recommendations
  • Hero Banner (Banner grande)
  • Link List (Lista de vínculo)
  • Order Confirmation Message (Mensaje de confirmación de pedido)
  • Product Description (Descripción del producto)
  • Product Gallery (Galería del producto)
  • Product Information (Información del producto)
  • Rich Content Editor (Editor de contenido enriquecido)
  • Store Logo (Logotipo de la tienda)
  • Tile Menu (Menú de iconos)

Search (Búsqueda)

Permitir que los compradores busquen el escaparate.

  • Hero Banner (Banner grande)
  • Link List (Lista de vínculo)
  • Rich Content Editor (Editor de contenido enriquecido)
  • Search Results (Resultados de búsqueda)
  • Shop By Category (Compra por categoría)
  • Store Logo (Logotipo de la tienda)
  • Tile Menu (Menú de iconos)

Service Not Available (Servicio no disponible)

Especificar lo que ven los compradores si el escaparate no está disponible.

  • HTML Editor (Editor de HTML)
  • Rich Content Editor (Editor de contenido enriquecido)

 Taylor observa más de cerca los componentes para averiguar cuáles debe utilizar tal y como están y cuáles quiere modificar.

Categoría

Componente

Cart (Carrito)

  • Cart (Carrito): muestra el contenido del carrito de compra.
  • Cart Totals (Total del carrito): muestra el coste de los elementos del carrito.

Category (Categoría) 

  • Category Banner (Banner de categoría): especifica el color del nombre de la categoría que se muestra en el banner.
  • Category Breadcrumbs (Ruta de exploración de categoría): muestra la ruta hasta la categoría actual.

Checkout (Tramitación de compra)

  • Checkout (Tramitación de compra): muestra los pasos del proceso de tramitación de compra.
  • Botón Checkout (Tramitación de compra): haga clic en él para comenzar la tramitación de compra.
  • Checkout Header (Encabezado de tramitación de compra): muestra el logotipo de la tienda y el icono del carrito en la parte superior de la página Checkout (Tramitación de compra).

Commerce Einstein

  • Einstein Recommendations: personaliza la experiencia de compra.

Content (Contenido)

  • Hero Banner (Banner grande): muestra una imagen y el texto de manera destacada en la página.
  • HTML Editor (Editor de HTML): cree y modifique contenido en HTML, imágenes y texto incluidos.
  • Page Error Message (Mensaje de error de la página): muestra un mensaje de página no válida.
  • Rich Content Editor (Editor de contenido enriquecido): agregue texto con formato personalizado e imágenes a una página, texto e imágenes incluidos.
  • Store Logo (Logotipo de la tienda): sobrescriba el logotipo en una página en concreto.

Navegación

  • Link List (Lista de vínculo): muestre una lista de vínculos en el pie de página que permita a los compradores navegar hasta el escaparate.
  • Shop By Category (Compra por categoría): muestra productos agrupados por categoría.
  • Tile Menu (Menú de iconos): navegue al escaparate haciendo clic en los iconos.
  • Top Sellers (Ventas principales): muestra los productos de una categoría.

Orders (Pedidos)

  • Order Confirmation Message (Mensaje de confirmación de pedido): muestra cuándo se completa el pedido de un comprador.

Product Details (Detalles de producto):

  • Product Description (Descripción del producto): muestra información del producto.
  • Product Gallery (Galería del producto): muestra el producto en la página Product (Producto).
  • Product Information (Información del producto): muestra el código de referencia (SKU), el precio y la descripción del producto.

Search (Búsqueda)

  • Search Results (Resultados de búsqueda): muestra los productos recuperados como resultado de la búsqueda de un comprador.

User Accounts (Cuentas de usuario)

  • Check Email (Correo electrónico de comprobación): indica al comprador que compruebe su correo electrónico para obtener un vínculo de restablecimiento de contraseña.
  • Forgot Password (Contraseña olvidada): permite que un comprador restablezca su contraseña.
  • Login Form (Formulario de inicio de sesión): se utiliza para iniciar sesión en el escaparate, desencadenar el proceso de contraseña olvidada o iniciar un registro automático.
  • My Account Header (Encabezado Mi cuenta): agregue el título My Profile & Password (Mi perfil y contraseña) en la parte superior del componente My Account Menu (Menú Mi cuenta).
  • My Account Password (Contraseña de mi cuenta): muestra un vínculo que permite que los compradores restablezcan su contraseña.
  • My Profile (Mi perfil): muestra el nombre y la dirección de correo electrónico de un comprador.
  • Self Registration (Registro automático): permite que los compradores se registren en la tienda.

Obtener la vista previa de una tienda y publicarla

A medida que Taylor personaliza la tienda, puede obtener una vista previa del aspecto que tendrá para los compradores y publicar los cambios. Veamos cómo hacerlo.

  1. Abra Experience Builder.
  2. Abra la página que desee ver.
  3. Haga clic en Preview (Vista previa) en la esquina superior derecha de la página.
    Consulte Preview Your Experience Builder Site (Obtener una vista previa de su sitio de Experience Builder).
  4. Cuando esté contento con el aspecto de su tienda, haga clic en Publish (Publicar) en la esquina superior derecha de la página. Taylor recibe una notificación por correo electrónico cuando la tienda se ha publicado.

Puede publicar una tienda independientemente de si está activada. Puede activar una tienda incluso si no está publicada. En este caso, Maria Jimenez, la administradora, ya la ha activado. Consulte el módulo Salesforce D2C Commerce Basics (Aspectos básicos de Salesforce D2C Commerce)

A modo de resumen

En esta unidad, ha aprendido a personalizar la plantilla de la tienda de D2C Commerce. También ha aprendido a publicar y a obtener una vista previa de la tienda. En unidades anteriores, ha aprendido sore la búsqueda y Commerce Einstein. Ahora, realice la prueba final y obtenga una reluciente insignia.

Recursos

Comparta sus comentarios sobre Trailhead en la Ayuda de Salesforce.

Nos encantaría conocer su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios cuando quiera desde el sitio de la Ayuda de Salesforce.

Más información Continuar para compartir comentarios