thanks for the code, however it shows the side cart after clicking, but the product isn’t shown, when I refresh the page it is then shown in the cart, any help on this?
Topic summary
Users are seeking to add an “Add to Cart” button directly on collection pages for the Shopify Prestige theme, allowing customers to add products without leaving the collection view.
Initial Solutions:
- Early attempts involved custom HTML forms and jQuery-based code snippets, but these often failed to work properly or became outdated with theme updates.
- Issues included buttons not being clickable, items not appearing in cart until page refresh, and compatibility problems with newer Prestige versions.
Working Solution (by snde, post #17):
- Add button markup to
snippets/product-item.liquidafter the color swatch section - Insert vanilla JavaScript function
_addMeToCart()inassets/custom.js - Uses Shopify’s Cart API (
/cart/add.js) with fetch requests - Includes
data-action="open-drawer"to trigger the cart drawer automatically - Successfully adds items and opens side cart without page refresh
Ongoing Challenges:
- Variant selection: Multiple users want to add variant selectors before adding to cart (sizes, colors)
- Button alignment: Requests for buttons to align evenly at bottom of product cards
- Conditional display: Hiding buttons for sold-out or unavailable products
- Styling: Making buttons appear on hover instead of always visible
Status: The vanilla JavaScript solution works for basic single-variant products, but variant selection and advanced customization remain unresolved.