Skip to main content
Únase a nosotros en TDX, San Francisco o en Salesforce+ del 5 al 6 de marzo en la conferencia de desarrolladores para la era del agente de la IA. Regístrese ahora.

Personalizar la plantilla de tienda de D2C

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

  • Enumerar qué incluye la plantilla de tienda de D2C Commerce.
  • Explicar cómo personalizar el tema de la plantilla de tienda de D2C Commerce.
  • Explicar cómo personalizar un encabezado o pie de página.
  • Describir cómo puede utilizar páginas y componentes.
  • Explicar la diferencia entre la activación y publicación de una tienda.
  • Explicar cómo personalizar una tienda.

Personalizar una tienda de D2C Commerce

Taylor Givens, representante de comercialización sénior de Ursa Major Solar, quiere crear una experiencia increíble para los usuarios que visitan la tienda de Salesforce D2C Commerce. Como primer paso, piensa personalizar la plantilla de D2C Experience Builder con el logotipo de la tienda de Ursa Major Solar.  

Logotipo de Ursa Major Solar

La plantilla de D2C Commerce ya incluye páginas específicas del comercio, como la página de inicio y la de resultados de búsquedas. Estas páginas usan componentes desarrollados específicamente para tiendas de D2C Commerce. Con la interfaz fácil de utilizar de Experience Builder, Taylor puede arrastrar y soltar componentes en sus páginas y personalizar las propiedades de componentes. Puede agregar imágenes y estilos a la tienda para crear una experiencia de comprador única.

Taylor Givens, representante de comercialización sénior de Ursa Major Solar

Taylor crea esta lista de verificación útil de lo que necesita 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

Previsualizar y publicar la tienda.

5

Configurar una URL personalizada para la tienda.

Para empezar, Taylor personaliza las páginas y los componentes de su página de D2C Commerce haciendo clic en el mosaico de Experience Builder, en la página de inicio de la tienda.

Use Experience Builder en su tienda para crear, diseñar una marca y personalizar su tienda.

Consulte Personalizar sitios con Experience Builder para ver detalles sobre Experience Builder.

Configurar el tema de la tienda

A Taylor le agrada saber que la plantilla de la tienda de D2C Commerce usa un tema de D2C preintegrado. Puede especificar colores, imágenes, tamaños de texto y espacios para personalizar el tema de modo que se ajuste a sus requisitos. Algunos componentes tienen propiedades que permiten anular la configuración de tema del componente.

Para acceder a la configuración de tema de un componente, expanda el ícono Theme (Tema) en el lado izquierdo de la página de Experience Builder.

En Experience Builder, seleccione un tema.

Taylor especifica colores para el fondo, el texto, la marca y el primer plano. Genera una paleta a partir de una imagen ya cargada.

En la página Images (Imágenes), selecciona el logotipo de la compañía.

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

También se puede configurar el tamaño de texto y los espacios del sitio para PC/computadora y para dispositivos móviles. 

La plantilla de tienda de D2C Commerce incluye un componente de encabezado y pie de página en cada página. Taylor quiere usar un encabezado personalizado para una página, por lo que primero ajusta el formato de tema de la página. A continuación, se describe el proceso que sigue.

  1. Seleccione la página donde quiere usar un encabezado o pie de página personalizado: Inicio
  2. Haga clic en el ícono Settings (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. Ingrese el nuevo formato: Ursa Major Solar - home (Ursa Major Solar: inicio)
  7. En el menú desplegable Commerce Layout (Formato de comercio), seleccione Commerce Layout (Formato de comercio).
    En Experience Builder, personalice el formato de página.
  8. Haga clic en Save (Guardar).

La página ahora tiene una sección superior e inferior en blanco, donde Taylor puede usar el encabezado o pie de página personalizado.
Consulte la guía para el desarrollador de D2C Commerce si quiere conocer los 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 por página.

Una página

Objetivo

Componentes

Carrito

Muestre a los compradores los productos que eligieron comprar.

  • Carrito
  • Total del carrito
  • Botón Checkout (Paso por caja)
  • Pancarta de héroe
  • Lista de vínculos
  • Editor de contenido enriquecido
  • Logotipo de tienda
  • Menú de mosaico

Categoría

Muestra a los compradores los productos en la categoría seleccionada.

  • Pancarta de categoría
  • Rutas de exploración de categoría
  • Pancarta de héroe
  • Lista de vínculos
  • Editor de contenido enriquecido
  • Resultados de búsqueda
  • Comprar por categoría
  • Logotipo de tienda
  • Menú de mosaico
  • Más vendidos

Paso por caja

Permita a los compradores finalizar su compra.

  • Total del carrito
  • Paso por caja
  • Encabezado de Checkout (Paso por caja)
  • Pancarta de héroe
  • Lista de vínculos
  • Editor de contenido enriquecido
  • Logotipo de tienda
  • Menú de mosaico

Error

Indique a los compradores que el sistema encontró un error.

  • Pancarta de héroe
  • Lista de vínculos
  • Mensaje de error de página
  • Editor de contenido enriquecido
  • Logotipo de tienda
  • Menú de mosaico

Iniciar sesión/Comprobar contraseña

Indique a los compradores registrados que revisen su email para restablecer su contraseña.

  • Comprobar email
  • Pancarta de héroe
  • Lista de vínculos
  • Encabezado de My Account (Mi cuenta)
  • Editor de contenido enriquecido
  • Logotipo de tienda
  • Menú de mosaico

Iniciar sesión/Contraseña olvidada

Permita a los compradores registrados que recuperen una contraseña que olvidaron.

  • Contraseña olvidada
  • Pancarta de héroe
  • Lista de vínculos
  • Encabezado de My Account (Mi cuenta)
  • Editor de contenido enriquecido
  • Logotipo de tienda
  • Menú de mosaico

Iniciar sesión/Inicio de sesión

Permita a los compradores que inicien sesión en la tienda.

  • Pancarta de héroe
  • Lista de vínculos
  • Formulario de inicio de sesión
  • Encabezado de My Account (Mi cuenta)
  • Editor de contenido enriquecido
  • Logotipo de tienda
  • Menú de mosaico

Iniciar sesión/Registrarse

Permita a los compradores que se registren en la tienda.

  • Pancarta de héroe
  • Lista de vínculos
  • Editor de contenido enriquecido
  • Inscripción automática
  • Logotipo de tienda
  • Menú de mosaico

Inicio

Cree una página de inicio atractiva para que los compradores accedan a su escaparate.

  • Pancarta de héroe
  • Lista de vínculos
  • Editor de contenido enriquecido
  • Comprar por categoría
  • Logotipo de tienda
  • Menú de mosaico
  • Más vendidos

Mi perfil

Permita a los compradores ver su imagen de perfil y restablecer su contraseña.

  • Pancarta de héroe
  • Lista de vínculos
  • Encabezado de My Account (Mi cuenta)
  • Contraseña de My Account (Mi cuenta)
  • Mi perfil
  • Editor de contenido enriquecido
  • Logotipo de tienda
  • Menú de mosaico

Orden

Indique a los compradores que sus artículos se pidieron correctamente.

  • Pancarta de héroe
  • Lista de vínculos
  • Mensaje de confirmación de pedido
  • Editor de contenido enriquecido
  • Logotipo de tienda
  • Menú de mosaico

Producto

Muestre información sobre un producto, incluido el precio, la descripción y la imagen.

  • Einstein Recommendations
  • Pancarta de héroe
  • Lista de vínculos
  • Mensaje de confirmación de pedido
  • Descripción de producto
  • Galería de productos
  • Información de producto
  • Editor de contenido enriquecido
  • Logotipo de tienda
  • Menú de mosaico

Buscar

Permita a los compradores buscar el escaparate.

  • Pancarta de héroe
  • Lista de vínculos
  • Editor de contenido enriquecido
  • Resultados de búsqueda
  • Comprar por categoría
  • Logotipo de tienda
  • Menú de mosaico

Servicio no disponible

Especifique qué pueden ver los compradores si el escaparate no está disponible.

  • Editor HTML
  • Editor de contenido enriquecido

 Taylor ve en detalle los componentes para detectar cuáles usará así y cuáles modificará.

Categoría

Componente

Carrito

  • Carrito: muestre el contenido del carrito de compra.
  • Total del carrito: muestre el costo de los artículos del carrito.

Categoría 

  • Pancarta de categoría: especifique el color del nombre de la categoría que se mostrará en la pancarta.
  • Rutas de exploración de categoría: muestre la ruta a la categoría actual.

Paso por caja

  • Paso por caja: muestre los pasos del proceso de paso por caja.
  • Botón Checkout (Paso por caja): Hacer clic para confirmar la compra.
  • Encabezado de Checkout (Paso por caja): muestre el logotipo de la tienda y la insignia de carrito en la parte superior de la página Checkout (Paso por caja).

Commerce Einstein

  • Einstein Recommendations: personalice la experiencia de compra.

Contenido

  • Pancarta de héroe: muestre una imagen y texto, de manera que se destaquen en la página.
  • Editor HTML: cree y edite contenido personalizado en HTML, incluido texto e imágenes.
  • Mensaje de error de página: muestre un mensaje Invalid Page (Página no válida).
  • Editor de contenido enriquecido: agregue texto e imágenes personalizados y con formato a una página.
  • Logotipo de tienda: sustituya la imagen de logotipo en una página específica.

Navegación

  • Lista de vínculos: muestre una lista de vínculos en el pie de página que permita a los compradores navegar por el escaparate.
  • Comprar por categoría: muestre los productos agrupados por categoría.
  • Menú de mosaico: explore el escaparate haciendo clic en los mosaicos.
  • Más vendidos: muestre los productos de una categoría.

Pedidos

  • Mensaje de confirmación de pedido: muestre cuándo se completó el pedido de un comprador.

Detalles del producto

  • Descripción de producto: muestre información sobre productos.
  • Galería de productos: muestre el artículo en la página Product (Producto).
  • Información de producto: muestre el SKU, el precio y la descripción de un producto.

Buscar

  • Resultados de búsqueda: muestre los productos recuperados en una búsqueda del comprador.

Cuentas de usuario

  • Comprobar email: pídale al comprador que busque en su email el vínculo para restablecer la contraseña.
  • Contraseña olvidada: permita a un comprador restablecer su contraseña.
  • Formulario de inicio de sesión: úselo para iniciar sesión en el escaparate, activar el proceso de contraseña olvidada o comenzar la inscripción automática.
  • Encabezado de My Account (Mi cuenta): agregue el título My Profile & Password (Mi perfil y contraseña) al componente del menú My Account (Mi cuenta).
  • Contraseña de My Account (Mi cuenta): muestre un vínculo que le permita al comprador restablecer su contraseña.
  • Mi perfil: muestre el nombre y la dirección de email de un comprador.
  • Inscripción automática: permita a un comprador que se registre en la tienda.

Previsualizar y publicar la tienda

A medida que Taylor personaliza la tienda, puede previsualizar qué verán los compradores y publicar los cambios. A continuación, se describe el proceso que sigue.

  1. Abra Experience Builder.
  2. Abra la página que desea ver.
  3. Haga clic en Preview (Vista previa) en el extremo superior derecho de la página.
    Consulte Realizar vista previa de su sitio de Experience Builder.
  4. Cuando le guste el aspecto de su tienda, haga clic en Publish (Publicar) en el extremo superior derecho de la página. Taylor recibe una notificación por email cuando la tienda está publicada.

Puede publicar una tienda independientemente de que esté activada o no. Puede activar una tienda aunque no esté publicada. En este caso, Maria Jimenez, la administradora, ya la activó. Consulte el módulo Aspectos básicos de Salesforce D2C Commerce para ver cómo lo hizo.

A modo de resumen

En esta unidad, aprendió a personalizar la plantilla de tienda de D2C Commerce. También aprendió a publicar y previsualizar una tienda. En unidades anteriores, aprendió sobre las búsquedas y sobre Commerce Einstein. Ahora realice la última prueba y obtenga una increíble insignia.

Recursos

Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantaría saber más sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

Más información Continuar a Compartir comentarios