Agregar un enlace de seguir comprando a tu carrito

Precaución

Los temas vintage no están disponibles en la tienda de temas. Estos temas no tienen las funciones incluidas en los temas de la Online Store 2.0 de Shopify, y los temas Vintage gratuitos de Shopify no reciben actualizaciones más allá de las correcciones de seguridad.

Nota

Si usas un tema gratis de Shopify, puedes comunicarte con atención al cliente de Shopify para que te ayude con este tutorial. Requiere 15 minutos de tiempo de diseño. Para obtener más información, consulta Soporte de temas.

Nota

Esta personalización es para temas vintage de Shopify, y no se aplica a temas de Online Store 2.0.

• Conocer la versión de la arquitectura del tema
• Explorar las personalizaciones de temas de Online Store 2.0

Puedes agregar un enlace Seguir comprando a tu página del carrito que permite a los clientes volver fácilmente a la navegación de productos después de agregar algo al carrito. Puedes optar por agregar un enlace que remita a los clientes de nuevo a tu página de catálogo, a tu página de inicio o a la última página de colección que estaban mirando.

Agregar un enlace de seguir comprando a tu página del carrito

Para agregar un enlace Seguir comprando a tu carrito:

Escritorio

1. Desde tu panel de control de Shopify, ve a Tienda online > Temas.

2. Busca el tema que deseas editar, haz clic en el botón ... para abrir el menú de acciones y luego haz clic en Editar código.

iPhone

1. Desde la app de Shopify, toca Tienda.

2. En la sección Canales de ventas, selecciona Tienda online.

3. Toca Administrar temas.

4. Busca el tema que deseas editar, haz clic en el botón ... para abrir el menú de acciones y luego haz clic en Editar código.

Android

1. Desde la app de Shopify, toca Tienda.

2. En la sección Canales de ventas, selecciona Tienda online.

3. Toca Administrar temas.

4. Busca el tema que deseas editar, haz clic en el botón ... para abrir el menú de acciones y luego haz clic en Editar código.

1. En el directorio Secciones, haz clic en cart-template.liquid. Si tu tema no tiene este archivo, haz clic en cart.liquid en el directorio Plantillas.

2. Busca el código del botón Pago buscando el archivo de name="checkout". La línea de código del botón de pago varía según el tema pero debería verse así:

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>

1. El siguiente paso consiste en pegar una nueva línea de código para crear un enlace Seguir comprando. El código que pegues dependerá de la página a la que desees que remita el enlace:

<a href="/collections/all" title="Continue shopping">Continue shopping</a>

### For a link that goes to your home page

To add a link that goes to your home page, paste the following code on a new line either before or after the code for the **Checkout** button:

<a href="/" title="Continue shopping">Continue shopping</a>

### For a link that goes to the last collection viewed

To add a link that goes to the last collection viewed, paste the following code on a new line either before or after the code for the **Checkout** button:

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>

1. Haz clic en Guardar. Si has agregado un enlace que remita a tu página de catálogo o a tu página de inicio, has terminado. Si has agregado un enlace que remita a la última colección vista, deberás agregar un JavaScript al código de tu tema. Continúa con los siguientes pasos.

2. En el directorio Diseño, haz clic en theme.liquid.

3. Busca la etiqueta de cierre </body> cerca del final del archivo. Pega el siguiente código arriba de la etiqueta de cierre </body>:

<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

    }
</script>

1. Haz clic en Guardar.

Agregar estilo de botón (opcional)

Si usas un tema gratuito de Shopify, puedes aplicar estilo a tu enlace Seguir comprando para que se vea como un botón. Al agregar un atributo de clase al código del enlace del botón, puedes hacer que el estilo de este botón coincida con el de los otros botones de tu tema. Todos los temas gratuitos de Shopify usan el mismo nombre de clase para los estilos de botones principales y la mayoría usa el mismo nombre de clase para los estilos de botones secundarios.

Para aplicar el estilo del botón principal a tu enlace de seguir comprando:

Agrega el atributo class="btn" a la línea de código que has pegado para agregar un enlace Seguir comprando. Tu código debería verse así:

<a href="/collections/all" title="Continue shopping" class="btn">
  Continue shopping
</a>

Para aplicar un estilo de botón secundario a tu enlace de seguir comprando:

Nota

Agregar esta clase no funcionará en Boundless.

Si usas un tema gratis que no es Supply, agrega el atributo class="btn--secondary" a la línea de código que has pegado para agregar un enlace Seguir comprando. Tu código debería verse así:

<a href="/collections/all" title="Continue shopping" class="btn--secondary">
  Continue shopping
</a>

Si usas Supply, agrega el atributo class="btn-secondary" a la línea de código que has pegado para agregar un enlace Seguir comprando. Tu código debería verse así:

<a href="/collections/all" title="Continue shopping" class="btn-secondary">
  Continue shopping
</a>