Mostrar Shop Promise 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.
En esta página
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, y 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
Modificar la página de producto
Pasos:
- Desde el panel de control de Shopify, ve a Tienda online > Temas.
- 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.
- Abre el archivo correspondiente.
- Busca la línea que contiene
{%- if block.settings.show_dynamic_checkout -%}o{{ form | payment_button }}. - 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>- 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>- En la aplicación de Shopify, toca el botón ….
- En la sección Canales de ventas, toca Tienda online.
- Toca Administrar temas.
- 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.
- Abre el archivo correspondiente.
- Busca la línea que contiene
{%- if block.settings.show_dynamic_checkout -%}o{{ form | payment_button }}. - 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>- 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>- En la aplicación de Shopify, toca el botón ….
- En la sección Canales de ventas, toca Tienda online.
- Toca Administrar temas.
- 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.
- Abre el archivo correspondiente.
- Busca la línea que contiene
{%- if block.settings.show_dynamic_checkout -%}o{{ form | payment_button }}. - 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>- 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>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.
Pasos:
- Sigue las instrucciones para colocar manualmente el módulo Shop Promise en la página de producto mientras mantienes el editor de temas abierto.
- Agrega un atributo de datos del tema a tu elemento de anclaje recién creado establecido como oscuro o claro.
- Haz clic en Guardar.
El resultado debería tener alguno de los aspectos siguientes:
<div class="delivery-promise__promise-container" data-theme="dark"></div>O
<div class="delivery-promise__promise-container" data-theme="light"></div>- Sigue las instrucciones para colocar manualmente el módulo Shop Promise en la página de producto mientras mantienes el editor de temas abierto.
- Agrega un atributo de datos del tema a tu elemento de anclaje recién creado establecido como oscuro o claro.
- Toca Guardar.
El resultado debería tener alguno de los aspectos siguientes:
<div class="delivery-promise__promise-container" data-theme="dark"></div>O
<div class="delivery-promise__promise-container" data-theme="light"></div>- Sigue las instrucciones para colocar manualmente el módulo Shop Promise en la página de producto mientras mantienes el editor de temas abierto.
- Agrega un atributo de datos del tema a tu elemento de anclaje recién creado establecido como oscuro o claro.
- Toca Guardar.
El resultado debería tener alguno de los aspectos siguientes:
<div class="delivery-promise__promise-container" data-theme="dark"></div>O
<div class="delivery-promise__promise-container" data-theme="light"></div>