Key takeaways
- Quick-add/Add to cart buttons on product cards: enable in Theme Editor > Collections section settings.
- Collection-level CTAs (banners, promotional sections): add via Theme Editor > Add section.
- Custom buttons with specific destinations: add a button block in a rich text or banner section.
- For CTAs that aren’t supported by Theme Editor sections, use Fudge to generate the code.
CTAs on collection pages take two forms: product-level (quick-add buttons on each card) and collection-level (a promotional banner or “Shop the edit” button for the whole collection). Here’s how to add both.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also built Fudge - an AI storefront editor with a 5.0 rating on the Shopify App Store.
Product card CTAs - quick-add buttons
The most common CTA on a collection page is the quick-add to cart button on each product card. This lets customers add products directly from the collection grid without visiting the product page.
How to enable quick-add buttons:
Step 1. Go to Online Store > Themes > Customize.
Step 2. Navigate to a Collection page.
Step 3. In the left sidebar, click on the Collection section or Product grid (the section that shows your products).
Step 4. Look for a setting called “Enable quick add”, “Quick buy”, or “Show Add to cart”.
Step 5. Enable it and save.
Quick-add buttons typically appear on hover (desktop) or persistently (mobile) on product cards. For products with variants (colours, sizes), the quick-add usually opens a variant selector popup.
Collection-level CTAs - banners and buttons
For a CTA that applies to the whole collection - like a “Shop the Summer Edit” banner with a button, or a “Free shipping on orders over $75” callout - you add it as a section via the Theme Editor.
Step 1. Go to Online Store > Themes > Customize > navigate to a Collection page.
Step 2. In the section list, click Add section. Choose:
- Image banner - a full-width image with a headline and button overlay
- Rich text - a text block with an optional button
- Promotional banner - if your theme has this section type
Step 3. Configure the section: add your heading, text, button label, and button link.
Step 4. Drag the section to the right position in the page layout (above or below the product grid).
Step 5. Save.
Note: Sections added in the Theme Editor for the collections template appear on all collection pages. For collection-specific CTAs, use metafields or create separate collection templates.
Adding a “View all” or “Shop now” button
If you want a simple button that links to a specific destination (a collection, a landing page, or an external URL), add it inside a Rich text or Button section in the Theme Editor.
In a Rich text section, you’ll see a Button label and Button link field. Set the label to “Shop now” or “View all” and the link to your desired destination.
CTAs on product cards beyond quick-add
Some stores want more sophisticated product card interactions - a “Save for later” button, a “Compare” checkbox, a wishlist icon, or a size selector directly on the card.
These go beyond the standard Theme Editor quick-add toggle. They require code changes to the product card template.
Describe what you want to Fudge: “Add a wishlist heart icon to the top right of each product card on collection pages. Clicking it saves the product to a wishlist.”
Sticky “Shop this collection” CTA
A sticky bottom bar or floating button with a CTA specific to the collection (e.g., “View all 47 products”) is an emerging pattern on high-converting collection pages. It keeps a clear action visible as users scroll.
This isn’t available in the standard Theme Editor. Describe it to Fudge: “Add a sticky button at the bottom of collection pages on mobile that says ‘View all [collection name] products’. It should disappear when the user reaches the footer.”
CTA placement strategy
Where you put CTAs on a collection page matters:
- At the top (above the grid): Works for promotional banners (“Summer sale - up to 40% off”) where you want to set context before browsing.
- Within the product grid: Quick-add buttons sit within the grid itself.
- Between grid rows: Some stores insert a promotional CTA block between product rows (e.g., after row 2). This is a custom implementation.
- Below the grid: A good place for a “Can’t find what you’re looking for? Contact us” or a newsletter sign-up CTA.
