"add to cart" button to the collection level - (Prestige THEME)

Store Design

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.liquid after the color swatch section
  • Insert vanilla JavaScript function _addMeToCart() in assets/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.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
20

it is implemented on this site caffetech.com and working. test if this site works for you.

also to line up the buttons evenly at the bottom we used this.

https://community.shopify.com/c/shopify-design/how-would-we-align-add-to-cart-button-to-bottom-in-collections/m-p/1694230#M452814%3Futm_source=communitymembers&utm_medium=email&utm_campaign=immediate_general