Ocultar botones de agregar al carrito

Puedes ocultar tus botones de Agregar al carrito en tu tienda online y volver a mostrarlos en el futuro.

Temas con y sin secciones

Sectioned
  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 para abrir tu archivo product-template.liquid. Busca el código HTML del botón Agregar al carrito. Para comenzar, puedes buscar la palabra carrito.

El código del botón Agregar al carrito varía según el tema. Busca una etiqueta <input> o <button> con texto como Add to cart, AddToCart o add-to-cart.

En el tema Debut, el código del botón agregar al carrito se ve así:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
  1. Cuando encuentres el código, inclúyelo entre las etiquetas Liquid {% comment %} y {% endcomment %}. Esto impedirá que el código se muestre en la tienda, pero te permitirá volver a colocarlo más fácilmente si quieres cambiar la nueva plantilla más adelante.

En el ejemplo anterior, el código nuevo tendría este aspecto:

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}
  1. Haz clic en Guardar para confirmar tus cambios.

Cuando estés listo para mostrar tus botones de Agregar al carrito nuevamente, vuelve a tu archivo product-template.liquid en la página Editar HTML/CSS, elimina las etiquetas {% comment %} y {% endcomment %}, y haz clic en Guardar.

Non-sectioned
  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 Plantillas, haz clic para abrir tu archivo product.liquid. Busca el código HTML del botón Agregar al carrito. Para comenzar, puedes buscar la palabra carrito.

El código del botón Agregar al carrito varía según el tema. Busca una etiqueta <input> o <button> con texto como Add to cart, AddToCart o add-to-cart.

En el tema Minimal, el código del botón del carrito debería verse así:

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
  1. Cuando encuentres el código, inclúyelo entre las etiquetas Liquid {% comment %} y {% endcomment %}. Esto impedirá que el código se muestre en la tienda, pero te permitirá volver a colocarlo más fácilmente si quieres cambiar la nueva plantilla más adelante.

En el ejemplo anterior, el código nuevo tendría este aspecto:

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}
  1. Haz clic en Guardar para confirmar tus cambios.

Cuando quieras volver a mostrar tus botones de Agregar al carrito, vuelve a tu plantilla product.liquid en la página Editar HTML/CSS, elimina las etiquetas {% comment %} y {% endcomment %} y haz clic en Guardar.

¿No encuentras las respuestas que estás buscando? Estamos aquí para ayudarte.