Agregar un enlace de seguir comprando a tu carrito

Esta página fue impresa el Sep 13, 2024. Para acceder a la versión actual, por favor visita https://help.shopify.com/es/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-back-link.

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

Seguir comprando

En esta página

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

  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. 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.
  4. 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>

 5. El siguiente paso consiste en pegar una nueva línea de código para crear el 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 la 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 agregar un enlace que remita a la 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 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>

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

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

 8. 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>

 9. Haz clic en Guardar.

  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, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
  5. 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.
  6. 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:
    • Para agregar un enlace que remita a la página de catálogo, 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="/collections/all" title="Continue shopping">Continue shopping</a>
  • Para agregar un enlace que remita a la 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 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 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.
  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, haz clic en el botón … para abrir el menú de acciones y, luego, haz clic en Editar código.
  5. 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.
  6. 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:
    • Para agregar un enlace que remita a la página de catálogo, 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="/collections/all" title="Continue shopping">Continue shopping</a>
  • Para agregar un enlace que remita a la 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 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 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:

Si usas un tema gratis que no es Supply, agrega el atributo class="btn--secondary" a la línea de código que pegaste para agregar un enlace Seguir comprando. El 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