Quick add button disappear

Store Design
1

I am quite new in modifying the code to customize the store design
after I added a color swatch snippet and i find that the quick add button does not show up anymore.
I could not find whats not working in my code though, please help!

I am now using the rise theme
here is my store: https://girigirihk.com/

2

Hi @GRGR
When you added the color swatch snippet, you likely modified a file such as:

/snippets/product-card-grid.liquid
/snippets/card-product.liquid
/sections/main-collection-product-grid.liquid

Try below code where you put color swatch code

{%- if card_product.available -%}
  <form method="post" action="/cart/add" id="quick-add-{{ card_product.id }}" class="quick-add-form" enctype="multipart/form-data">
    <input type="hidden" name="id" value="{{ card_product.variants.first.id }}">
    <button
      type="submit"
      name="add"
      class="quick-add-btn button button--primary"
      aria-label="{{ 'products.product.add_to_cart' | t }}"
    >
      {{ 'products.product.add_to_cart' | t }}
    </button>
  </form>
{%- else -%}
  <button class="quick-add-btn button button--disabled" disabled>
    {{ 'products.product.sold_out' | t }}
  </button>
{%- endif -%}
3

Please check if you have turned off Quick add option from your theme settings

Screenshot 2025-10-31 at 14.49.16
Screenshot 2025-10-31 at 14.49.163184×848 182 KB

4

I turned this off but it does not show as it would :frowning:

5

Thanks! it does provide a new quick add button under my product card which does not allow customization (showing only on main page but not collection page)
I wonder if there is any ways that allow me to show a customizable button like what was default. I am sure I have probably hid it with the code i added ><

6

Instead of re-creating it manually, let’s restore the old one so it works on both the homepage and collection pages

Search for quick-add or product-form or card__buttons

if you find it make sure your color swatches are outside that form.

It should look like:
{% render ‘color-swatch’, product: card_product %}
{% render ‘quick-add’, product: card_product %}

Not like below:

<form>
  {% render 'color-swatch', product: card_product %}
  <button>Quick Add</button>
</form>

Please check this and confirm if you find it or not.

Thanks

7

The quick add button disappearing is almost certainly a code conflict from your color swatch snippet.

Quick fixes:

  1. Check browser console for JavaScript errors (F12 > Console)

  2. Temporarily remove the swatch code - if the button returns, you’ve found the issue

  3. Check theme settings to ensure quick add is still enabled

The conflict is likely in JavaScript that controls button visibility. If you’re not comfortable debugging, post your swatch code in the Shopify Community for specific help, or consider hiring a Shopify expert to resolve the code conflict properly.