Shop Promise visible en la página de producto

El distintivo de Shop Promise se muestra junto a las fechas de entrega y en las páginas de producto para las entregas elegibles que se estima que se realizarán en territorio nacional dentro de Estados Unidos en cinco días calendario o menos. Este distintivo indica a los clientes que su pedido incluye entrega rápida y confiable.

Una vez aprobada tu solicitud de uso de Shop Promise, debes acceder a la página de producto a través del editor de temas para confirmar que el distintivo de Shop Promise se muestra correctamente.

Si el distintivo no se muestra correctamente, deberás colocar manualmente el módulo de Shop Promise.

Colocar manualmente el módulo de Shop Promise

Si sabes cómo leer y editar el código de los temas, puedes identificar dónde hacer cambios y actualizar la página de producto.

Identificar dónde realizar cambios

El código para el módulo de Shop Promise debe incluirse en el formulario del producto en la página de producto, el cual tendrá un aspecto similar al siguiente: {%- form 'product', product -%}. El módulo de Shop Promise se puede encontrar en varios lugares en función del tema. Los siguientes son lugares comunes:

• main-product.liquid
• product-form.liquid
• product-template.liquid
• product.liquid

Consejo

Si no sabes cómo leer o editar el código del tema y estás utilizando un tema de Shopify, puedes contactar a atención al cliente de Shopify para modificarlo. Obtén más información sobre la política de diseño de Shopify. Si usas un tema externo, puedes contactar al desarrollador de temas o contratar a un Shopify Partner.

Modificar la página de producto

Consejo

Antes de realizar cualquier cambio, duplica el tema y realiza cambios en el duplicado para que puedas revertirlos fácilmente.

Pasos:

Escritorio

1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
2. Busca el tema que desees editar, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
3. Abre el archivo correspondiente.
4. Busca la línea que contiene {%- if block.settings.show_dynamic_checkout -%} o {{ form | payment_button }}.
5. Crea una nueva línea debajo de {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} y pega lo siguiente en ella:

<div class="delivery-promise__promise-container"></div>

1. Haz clic en Guardar.

El resultado debería ser similar al siguiente:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

iPhone

1. En la aplicación de Shopify, toca el botón ….
2. En la sección Canales de ventas, toca Tienda online.
3. Toca Administrar temas.
4. Busca el tema que desees editar, toca el botón … para abrir el menú de acciones y, luego, toca Editar código.
5. Abre el archivo correspondiente.
6. Busca la línea que contiene {%- if block.settings.show_dynamic_checkout -%} o {{ form | payment_button }}.
7. Crea una nueva línea debajo de {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} y pega lo siguiente en ella:

<div class="delivery-promise__promise-container"></div>

1. Toca Guardar.

El resultado debería ser similar al siguiente:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

Android

1. En la aplicación de Shopify, toca el botón ….
2. En la sección Canales de ventas, toca Tienda online.
3. Toca Administrar temas.
4. Busca el tema que desees editar, toca el botón … para abrir el menú de acciones y, luego, toca Editar código.
5. Abre el archivo correspondiente.
6. Busca la línea que contiene {%- if block.settings.show_dynamic_checkout -%} o {{ form | payment_button }}.
7. Crea una nueva línea debajo de {%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%} y pega lo siguiente en ella:

<div class="delivery-promise__promise-container"></div>

1. Toca Guardar.

El resultado debería ser similar al siguiente:

{%- if block.settings.show_dynamic_checkout -%}
  {{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>

Anular manualmente el tema del módulo Shop Promise

El módulo Shop Promise tiene un tema oscuro y claro, y usa automáticamente el que tenga la relación de contraste más alta en comparación con el color de fondo de la página del producto.

Si se te da bien leer y editar el código del tema, puedes anular el tema seleccionado del módulo agregando un atributo de datos al elemento de anclaje que se usa para colocar manualmente el módulo Shop Promise.

Antes de realizar cambios, duplica el tema y edita el duplicado. De ese modo, podrás revertir fácilmente cualquier cambio.

Consejo

Si no sabes cómo leer o editar el código del tema y estás utilizando un tema de Shopify, puedes contactar a atención al cliente de Shopify para modificarlo. Obtén más información sobre la política de diseño de Shopify. Si usas un tema externo, puedes contactar al desarrollador de temas o contratar a un Shopify Partner.

Pasos:

Escritorio

1. Sigue las instrucciones para colocar manualmente el módulo Shop Promise en la página de producto mientras mantienes el editor de temas abierto.
2. Agrega un atributo de datos del tema a tu elemento de anclaje recién creado establecido como oscuro o claro.
3. Haz clic en Guardar.

El resultado debería ser similar a uno de los siguientes:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

O

<div class="delivery-promise__promise-container" data-theme="light"></div>

iPhone

1. Sigue las instrucciones para colocar manualmente el módulo Shop Promise en la página de producto mientras mantienes el editor de temas abierto.
2. Agrega un atributo de datos del tema a tu elemento de anclaje recién creado establecido como oscuro o claro.
3. Toca Guardar.

El resultado debería ser similar a uno de los siguientes:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

O

<div class="delivery-promise__promise-container" data-theme="light"></div>

Android

1. Sigue las instrucciones para colocar manualmente el módulo Shop Promise en la página de producto mientras mantienes el editor de temas abierto.
2. Agrega un atributo de datos del tema a tu elemento de anclaje recién creado establecido como oscuro o claro.
3. Toca Guardar.

El resultado debería ser similar a uno de los siguientes:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

O

<div class="delivery-promise__promise-container" data-theme="light"></div>

Agregar HTML personalizado o líquido para el módulo de Promise

Si tu tema admite bloques personalizados, puedes usar un bloque Liquid personalizado para agregar el módulo de Shop Promise a tu página de producto sin editar el código del tema.

Pasos para agregar el módulo de Promise usando un bloque Liquid personalizado:

Escritorio

1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
2. Encuentra el tema que quieras editar y haz clic en Personalizar.
3. Navega a la página de producto usando el selector de plantillas en la barra del menú superior.
4. En el menú de la barra lateral, busca la sección Información del producto.
5. Haz clic en Agregar bloque y selecciona Liquid personalizado de la lista de bloques disponibles.
6. En el campo de texto Liquid personalizado, pega el siguiente código:

<div class="delivery-promise__promise-container"></div>

1. Coloca el bloque arrastrándolo a la sucursal deseada, normalmente debajo del bloque de botones Comprar.
2. Haz clic en Guardar para aplicar tus cambios.

Si deseas especificar una preferencia de tema (oscuro o claro), utiliza uno de los siguientes:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

O

<div class="delivery-promise__promise-container" data-theme="light"></div>

iPhone

1. Desde la aplicación de Shopify, toca Tienda online.
2. Toca Administrar temas.
3. Encuentra tu tema activo y toca Personalizar.
4. Navega a una página de producto usando el selector de plantilla en la parte superior.
5. Toca la sección Información del producto.
6. Toca Agregar bloque y selecciona Liquid personalizado.
7. En el campo de texto Liquid personalizado, pega el siguiente código:

<div class="delivery-promise__promise-container"></div>

1. Coloca el bloque arrastrándolo a la sucursal deseada, normalmente debajo del bloque de botones Comprar.
2. Toca Guardar para aplicar tus cambios.

Si deseas especificar una preferencia de tema (oscuro o claro), utiliza uno de los siguientes:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

O

<div class="delivery-promise__promise-container" data-theme="light"></div>

Android

1. Desde la aplicación de Shopify, toca Tienda online.
2. Toca Administrar temas.
3. Encuentra tu tema activo y toca Personalizar.
4. Navega a una página de producto usando el selector de plantilla en la parte superior.
5. Toca la sección Información del producto.
6. Toca Agregar bloque y selecciona Liquid personalizado.
7. En el campo de texto Liquid personalizado, pega el siguiente código:

<div class="delivery-promise__promise-container"></div>

1. Coloca el bloque arrastrándolo a la sucursal deseada, normalmente debajo del bloque de botones Comprar.
2. Toca Guardar para aplicar tus cambios.

Si deseas especificar una preferencia de tema (oscuro o claro), utiliza uno de los siguientes:

<div class="delivery-promise__promise-container" data-theme="dark"></div>

O

<div class="delivery-promise__promise-container" data-theme="light"></div>

Consejo

No todos los temas admiten bloques Liquid personalizados. Si tu tema no tiene esta opción, sigue las instrucciones para posicionar manualmente el módulo de Shop Promise Modules al editar el código de tu tema.