How To Add Add To Cart Button On My Collection Page

Technical Q&A
, , , , , , , ,

Topic summary

  • Goal: Add an “Add to cart” button on collection pages in the Ride theme and show a success prompt on the same page instead of redirecting to the cart.

  • Implementation shared: A form was added in Snippets > card-product.liquid posting to /cart/add with the selected_or_first_available_variant.id and a submit button.

  • Resulting behavior: Clicking the button successfully adds the item but automatically redirects to the “Your cart” page, with no on-page confirmation.

  • Request: Guidance on modifying the code so the add-to-cart action confirms on the current page (e.g., a prompt/modal) without a redirect.

  • Materials provided: Code snippet and multiple screenshots demonstrating the current behavior (images are relevant to understand the issue).

  • Responses so far: Participants asked for the store URL (and password, if any) to review and suggest a solution. No code-based fix or concrete steps were provided yet.

  • Status: Unresolved and pending further details (store link). Key open question: how to prevent the redirect and show an on-page success confirmation.

Summarized with AI on December 31. AI used: gpt-5.
1

I am using Ride theme. I need to add “add to cart” button on my collection pages.
Please see attached file.

微信截图_20240412154248.jpg
微信截图_20240412154248.jpg1259×437 62.8 KB

Open Snippets → card-product.liquid

<form method="post" action="/cart/add" id="product-form-template--14675953680478__main" accept-charset="UTF-8" enctype="multipart/form-data" novalidate="novalidate" data-type="add-to-cart-form">
<input type="hidden" name="form_type" value="product">
<input type="hidden" name="utf8" value="✓">
<input type="hidden" name="id" value="{{ card_product.selected_or_first_available_variant.id }}">

<button type="submit" name="add" class="">
Add to cart
</button>

<input type="hidden" name="product-id" value="{{ card_product.id }}">
<input type="hidden" name="section-id" value="template--14675953680478__main">
</form>

Click now to add to the shopping cart, but it will directly jump to the “Your cart” page , without a prompt popping up on the current page.

How can you modify the code to prompt successful addition to the shopping cart on the current page instead of redirecting to another page ??

微信截图_20240412154349.jpg
微信截图_20240412154349.jpg1421×686 41.3 KB

微信截图_20240412154554.jpg
微信截图_20240412154554.jpg1390×839 77 KB

2

Hello @loverlinlin

please send your Store Url?

3

Hi @loverlinlin ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.