Crear un diseño para una página

Puede crear diseños para las páginas que gestiona en la Commerce Composer tool. Este proceso consiste en asignar el diseño a una o más páginas, añadir widgets al diseño y definir las propiedades y contenido de cada widget. Luego podrá previsualizar el diseño en la vista previa de la tienda y realizar retoques.

Antes de empezar

En función del tipo de página para el que vaya a crear el diseño, es posible que tenga que realizar algunos pasos de requisito previo.

Prerrequisitos para crear diseños
Diseño Pasos de requisito previo
Un diseño de página de contenido Cree la página en la Commerce Composer tool si la página no existe. Consulte Crear una página de contenido.
Un diseño de página de categoría
Un diseño de página de entrada de catálogo

Procedimiento

  1. Open the Commerce Composer tool.
  2. Efectúe una de las acciones siguientes:
    • Si va a asignar el diseño a una página de categoría o de entrada de catálogo, realice estos pasos:
      1. En la vista de explorador (panel izquierdo), expanda Páginas de catálogo para store hasta que localice la página.
      2. Pulse el botón derecho del ratón en la página y luego pulse Nuevo diseño.
    • Si va a asignar el diseño a una página de contenido, realice estos pasos:
      1. En la vista de explorador (panel izquierdo), pulse Páginas de contenido.
      2. En el área de trabajo (panel derecho), pulse el botón derecho del ratón en la página y luego pulse Nuevo diseño.
  3. En la ventana Nueva selección de plantilla de diseño, seleccione la plantilla a utilizar para ese diseño, después, pulse Aceptar.
  4. Complete los campos siguientes:
    OpciónDescripción
    Nombre de diseño Especifique un nombre para este diseño, por ejemplo, HalloweenLandingPageLayout.
    Carpeta Especifique una o más carpetas donde incluir este diseño. Desde la vista del explorador, arrastre una subcarpeta de la carpeta Diseños a esta tabla. Si no especifica una carpeta, este diseño solo se incluye en la carpeta Diseños.
    Prioridad Asigne una prioridad entrando un número entre cero (prioridad más baja) y mil (prioridad más alta). Si una página tienen más de un diseño asignado o heredado para un periodo de tiempo determinado, en el escaparate se aplica el diseño con la prioridad más alta.

    Por ejemplo, la página puede tener un diseño existente asignado de forma indefinida con prioridad 1. Si desea que el diseño nuevo sobrescriba al diseño existente durante una semana, asigne al nuevo diseño una prioridad 2 y defina las fechas de inicio y finalización de la semana. Durante esta semana se mostrará este diseño a los clientes en lugar del diseño existente.
    Fecha de inicio Especifique una fecha y hora de inicio para esta asignación de diseño. Si no especifica una fecha de inicio, el diseño se asigna inmediatamente.
    Fecha de finalización Especifique una fecha y hora de finalización para esta asignación de diseño. Si no especifica una fecha de finalización, el diseño se asigna de forma indefinida.
  5. En la tabla Páginas, compruebe que la página aparece listada.
  6. Si la tabla Páginas contiene una página de categoría o de entrada de catálogo, en la columna Asignar diseño a, seleccione la opción que tenga sentido para su asignación de diseño.
  7. Para asignar este diseño a más páginas:
    1. En el campo que hay encima de la tabla Páginas, escriba el nombre de la página.
      Consejo: Para páginas de entrada de catálogo o de categoría, escriba el código o el nombre de la entrada de catálogo o categoría, por ejemplo Utensilios de mesa.
    2. Pulse la flecha del botón Buscar y añadir y luego seleccione el tipo de página.
    3. Pulse Buscar y añadir.
  8. Opcional: Para utilizar también este diseño como una página de resultados de búsqueda para un término de búsqueda específico:
    1. Encima de la tabla Términos de búsqueda, pulse Añadir un término de búsquedaAñadir un término de búsqueda.
    2. En la columna Término de búsqueda, escriba el término de búsqueda. Cuando los clientes hagan búsquedas en su sitio web con este término, se mostrará este diseño en lugar de la página de resultados de búsqueda predeterminada. Incluya todas las variaciones del término que espera que los clientes utilicen. Para asignar el diseño, el término de búsqueda del cliente debe coincidir con los términos de búsqueda especificados.
    3. Para añadir más términos de búsqueda, pulse Añadir un término de búsqueda Añadir un término de búsqueda para añadir más filas a la tabla.
  9. Pulse la pestaña Disposición del diseño.
  10. Añada widgets a las ranuras del diseño:

    El mapa esquemático muestra la plantilla de diseño que ha seleccionado. Para añadir contenido al diseño, debe añadir widgets en una o más ranuras de la plantilla de diseño. Puede agregar más de un widget en una ranura y puede dejar ranuras vacías.

    1. En el mapa esquemático, Pulse cualquier ranura.
    2. Opcional: Utilice los campos Filtrar por para filtrar la lista de widgets.
      Por ejemplo:
      • En el primer campo Filtrar por, escriba las primeras letras del nombre del widget.
      • En el segundo campo Filtrar por:
        • Seleccione Widgets de página de categoría para ver los widgets que son adecuados para las páginas de categoría.
        • Seleccione Widgets para cualquier página para ver los widgets que son adecuados para las páginas de contenido.
    3. Seleccione un widget y pulse Aceptar.
    4. Defina las propiedades y el contenido del widget, en caso necesario.
    5. Para obtener una vista previa de la página de tienda que contiene el widget, pulse Guardar y Vista previa.
    6. Si se muestra la ventana Opciones de vista previa de la tienda:
      1. En la lista URL de tienda, seleccione la página de la que desea obtener una vista previa.
      2. Expanda Opcione, pulse Especificar la fecha y hora y luego especifique la fecha de inicio para el diseño.
      3. Pulse Lanzar vista previa de la tienda.
    7. En la vista previa de la tienda, revise el diseño.

      Para obtener información sobre los widgets del diseño, pulse Mostrar información de página en la parte superior de la ventana de vista previa. A continuación, pulse Mostrar información sobre el widget en el que está interesado.

    8. Para añadir más widgets al diseño, repita los pasos 10.a a 10.g.
      Consejo: No es necesario que cierre y vuelva a lanzar la vista previa de la tienda después de cada cambio que realice en el diseño. En su lugar, mantenga la vista previa abierta y vuelva a cargar la ventana de vista previa de la tienda después de guardar los cambios en el diseño. Para volver a cargar la ventana de vista previa de la tienda, pulse F5 en el teclado.
  11. Cuando haya terminado con el diseño, pulse Guardar.