Issue with "Shop" and "Add to Cart" Buttons Displaying Differently on Product Pages

[jscola]

Hello Shopify community,

I’m encountering an issue with the product buttons on my store. For some products, there’s a "Shop" button that redirects to the product page, while for others, there’s an "Add to Cart" button that automatically adds the product to the cart without going to the product page.

I’m not sure why this is happening, and I would like to streamline the user experience. I’ve checked the product configurations, and they seem to be the same, so I’m wondering if there’s a setting or a specific feature in my theme that’s causing this difference.

Has anyone experienced this before? Any insights or solutions on how I can make all the products have a consistent "Add to Cart" button (or the opposite, if that’s more effective)?

Thanks in advance for your help!

https://www.ciano.coffee/pages/tienda

[Huptech-Web]

Hi @jscola 
This isn’t an issue, but I’d like to clarify something with two product examples:
1. With multiple variants: https://www.ciano.coffee/products/cafetera-delonghi-dedica?variant=47763689406792 

2. With single variant: https://www.ciano.coffee/products/maquina-espresso-the-barista-express

For products with multiple variants, customers are redirected to the product page so they can select the desired variant before adding it to the cart.

However, for products with only a single variant, there are no options to choose from, so the item is added directly to the cart without a product page visit.

To maintain consistency, you can consider adding a "Shop" button to all products or Enable quick view. This way, the experience looks uniform across your store.

[jscola]

thanks for your asnwer.  

I’m facing a language issue in my store. Although my entire e-commerce site is in Spanish and all texts have been properly translated, some products still show a button labeled "Shop" instead of "Comprar". This is quite frustrating as it disrupts the consistency of the shopping experience for my Spanish-speaking customers.

I’ve checked the product settings and the theme settings but haven’t been able to find where to change this specific button text. Does anyone know how to update or translate the button text from "Shop" to "ver mas" to match the rest of my store’s language settings?

[Huptech-Web]

Hi @jscola 

For translations, you can use the app from Shopify it's free
- Translate and Adapt 
It has features like
- Manually add, edit, and review translations with the side-by-side editor.
- Auto-translate 2 languages with Google Translate (cloud.google.com/translate).
- Adapt content to reflect spelling and messaging variations between markets.
- Localize directly from the theme editor, or any resource page in your admin.
- Manage localized store content seamlessly from your Shopify admin.

[jscola]

Thank you again for your response. I understand that this is not a translation issue, as the e-commerce platform is natively set to Spanish, and I am unsure why the button is displayed in English.

I have looked through the translation app but couldn't find where to fix this. Could you help me identify the cause or suggest another way to resolve this?

I appreciate your assistance.

[Ahmad31]

Hi, @jscola 
it seems the difference between the "Shop" and "Add to Cart" buttons could be due to a setting or a feature in your theme. Here's a simple custom solution to ensure consistency for all products:

1. Custom Button Code: To ensure all products, including those with variants, have a consistent "Add to Cart" button, you can modify the product button code in your theme's Liquid files (usually in product-template.liquid or a similar file). Here’s how you can handle it:

{% if product.available %}
  <form action="/cart/add" method="post" enctype="multipart/form-data">
    {% if product.variants.size > 1 %}
      <select name="id" class="product-form__variants" aria-label="Select a variant">
        {% for variant in product.variants %}
          <option value="{{ variant.id }}" {% if variant.available == false %}disabled{% endif %}>
            {{ variant.title }} {% if variant.available == false %} - Out of Stock{% endif %}
          </option>
        {% endfor %}
      </select>
    {% else %}
      <input type="hidden" name="id" value="{{ product.variants.first.id }}">
    {% endif %}
    <button type="submit" class="btn product-form__cart-submit">
      Add to Cart
    </button>
  </form>
{% else %}
  <button type="button" class="btn" disabled>
    Out of Stock
  </button>
{% endif %}

This code ensures that:

• The "Add to Cart" button appears for products with variants.
• A dropdown will be shown for selecting a variant if there are multiple options.
• If a product is out of stock or the variant is unavailable, it will be disabled.
• If there is only one variant, it will automatically be added to the cart.

• Checking Theme Settings: If your theme has settings for button behavior, review those in your theme's customization options. Some themes allow you to toggle between "Add to Cart" and "Shop" behaviors directly in the admin.

• I’d be happy to assist further if you need help identifying the cause or applying a solution. Let me know if you'd like me to look into this more deeply!

[namphan]

Hi @jscola,

It will depend on the product, because when the product has many variants, it will not be possible to add to cart directly at the product card, you need to add it at the product page.

If you want to show add to cart instead of shop, it will only add the first variant.

Hope it is clear to you

[DaisyVo · Accepted solution]

Hi @jscola 

For cards where the "Shop" button is displayed and redirects to the product page upon clicking, it is because the product has multiple variants that need to be selected before adding to the cart.

For products with only one variant, the "Add to Cart" (ATC) action is available immediately.

Best,
Daisy - Avada Support Team.