Agregar un enlace de seguir comprando a tu carrito

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.

Seguir comprando

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

Para agregar un enlace Seguir comprando a tu carrito:

  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 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:

Para agregar un enlace que remita a tu página de catálogo, pega el siguiente código en una nueva línea, ya sea antes o después del código para el botón Pago:

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

Para un enlace que remita a tu página de inicio

Para agregar un enlace que remita a tu página de inicio, pega el siguiente código en una nueva línea, ya sea antes o después del código del botón Pago:

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

Para un enlace que remita a la última colección vista

Para agregar un enlace que remita a la última colección vista, pega el siguiente código en una nueva línea, ya sea antes o después del código del botón Pago:

<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 de la parte inferior 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:

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>

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis