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 entregas elegibles que se estima se entregarán dentro de Estados Unidos en cinco días calendario o menos. Este distintivo les indica a los clientes que su pedido incluye una entrega rápida y confiable.
Después de activar Shop Promise, ve a la página de producto con el editor de temas para confirmar que el distintivo de Shop Promise se muestra correctamente.
Si el distintivo no se muestra correctamente, asegúrate de que la tienda tenga activados los botones de pago acelerado. También hay varias opciones para personalizar cómo se muestra el distintivo de Shop Promise.
En esta página
Posicionar manualmente el módulo de Shop Promise
Si dominas la lectura y edición del código del tema, puedes identificar dónde hacer cambios y actualizar la página de producto.
Identificar dónde hacer cambios
El código del módulo de Shop Promise debe incluirse en el formulario de producto de la página de producto, que debería ser similar a {%- form 'product', product -%}. El módulo de Shop Promise puede estar en distintas ubicaciones según el tema. Estas son ubicaciones comunes:
main-product.liquidproduct-form.liquidproduct-template.liquidproduct.liquid
Actualizar la página de producto
Pasos:
Escritorio
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que quieres editar, haz clic en el ícono
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 línea nueva justo debajo de
{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}y pega lo siguiente en esa línea:
<div class="delivery-promise__promise-container"></div>- Haz clic en Guardar.
El resultado debería ser similar a lo siguiente:
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
<div class="delivery-promise__promise-container"></div>Móvil
Desde la app de Shopify, toca el ícono
.En la sección Canales de ventas, toca Tienda online > Gestionar todos los temas.
Busca el tema que quieres editar, toca el botón … para abrir el menú de acciones y, luego, toca 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 línea nueva justo debajo de
{%- if block.settings.show_dynamic_checkout -%}{{ form | payment_button }}{%- endif -%}y pega lo siguiente en esa línea:
<div class="delivery-promise__promise-container"></div>- Toca Guardar o ✓.
El resultado debería ser similar a lo 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 de Shop Promise
El módulo de Shop Promise incluye un tema oscuro y uno claro. El módulo usa automáticamente el tema con mayor relación de contraste respecto al color de fondo de la página de producto.
Si dominas la lectura y edición del código del tema, puedes anular el tema seleccionado del módulo agregando un atributo de datos al elemento ancla que se usa para posicionar manualmente el módulo de Shop Promise.
Antes de hacer cambios, duplica el tema y edita la copia para poder revertir cualquier cambio fácilmente.
Pasos:
Escritorio
- Sigue las instrucciones para posicionar manualmente el módulo de Shop Promise en la página de producto y mantén abierto el editor de temas.
- Agrega un atributo de datos del tema al elemento ancla recién creado, configurado en dark o light.
- 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>Móvil
- Sigue las instrucciones para posicionar manualmente el módulo de Shop Promise en la página de producto y mantén abierto el editor de temas.
- Agrega un atributo de datos del tema al elemento ancla recién creado, configurado en dark o light.
- 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 o Liquid personalizados para el módulo de Shop Promise
Si el tema admite bloques personalizados, puedes usar un bloque de Liquid personalizado para agregar el módulo de Shop Promise a la página de producto sin editar código del tema.
Pasos para agregar el módulo de Shop Promise con un bloque de Liquid personalizado:
Escritorio
Desde el panel de control de Shopify, ve a Tienda online > Temas.
Busca el tema que quieres editar y haz clic en Editar tema.
Ve a una página de producto usando el selector de plantillas en la barra de menú superior.
En el menú lateral, busca la sección Información del producto.
Haz clic en Agregar bloque y selecciona Liquid personalizado de la lista de bloques disponibles.
En el campo de texto de Liquid personalizado, pega el siguiente código:
<div class="delivery-promise__promise-container"></div>- Coloca el bloque arrastrándolo hasta la ubicación deseada, normalmente debajo del bloque de botones de compra.
- Haz clic en Guardar para aplicar los cambios.
Si quieres especificar una preferencia de tema (dark o light), usa una de las siguientes opciones:
<div class="delivery-promise__promise-container" data-theme="dark"></div>O
<div class="delivery-promise__promise-container" data-theme="light"></div>Móvil
Desde la app de Shopify, toca el ícono
.En la sección Canales de ventas, toca Tienda online > Gestionar todos los temas.
Busca el tema activo y toca Editar tema.
Ve a una página de producto usando el selector de plantillas en la parte superior.
Toca la sección Información del producto.
Toca Agregar bloque y selecciona Liquid personalizado.
En el campo de texto de Liquid personalizado, pega el siguiente código:
<div class="delivery-promise__promise-container"></div>- Coloca el bloque arrastrándolo hasta la ubicación deseada, normalmente debajo del bloque de botones de compra.
- Toca Guardar para aplicar los cambios.
Si quieres especificar una preferencia de tema (dark o light), usa una de las siguientes opciones:
<div class="delivery-promise__promise-container" data-theme="dark"></div>O
<div class="delivery-promise__promise-container" data-theme="light"></div>Idiomas compatibles para el distintivo de Shop Promise
Consulta la siguiente tabla para ver los idiomas en los que se puede mostrar el distintivo de Shop Promise. Si el idioma de la tienda no es compatible, el distintivo de Shop Promise se muestra en inglés.
| chino (simplificado) | chino (tradicional) | croata | checo |
| danés | neerlandés | Inglés | finés |
| francés | alemán | griego | hindi |
| húngaro | indonesio | italiano | japonés |
| coreano | lituano | malayo | noruego (bokmål) |
| polaco | portugués (Brasil) | portugués (Portugal) | rumano |
| ruso | eslovaco | esloveno | español |
| sueco | tailandés | turco | vietnamita |