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.
To add CTAs to a Shopify collection page, turn on quick add in the product grid section’s settings for buttons on each card, or add an Image banner or Rich text section with a button to the collection template for a CTA that covers the whole collection. Both are covered below.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also built Fudge, the AI operator for Shopify stores, with a 4.9 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.
To see whether shoppers use the buttons, see Track Click Events in Shopify.
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, create separate collection templates or use the per-collection metafield method in Add a Banner to a Shopify Collection Page.
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 section (or any section with a button block) 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, the AI operator for Shopify stores: “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”) 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.” Fudge drafts it for you to check on mobile before publishing, and its conversion work compares conversion rate on your collection pages before and after the change.
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.
FAQ
Why isn't the quick-add button showing on my product cards?
Three usual causes: (1) the toggle exists in your theme but is disabled in the Collections section settings, (2) your theme version predates the quick-add feature (older Debut/Brooklyn don't have it), or (3) products with no available variants and out-of-stock items often hide the quick-add automatically.
Should the quick-add button skip the variant picker?
For products with no variants (or only one variant) - yes, skip the picker and add directly. For products with multiple variants (sizes, colours) - never skip; you'll get returns and complaints from buyers who picked the wrong variant. Modern themes handle this distinction automatically.
Can I have a different CTA on each individual collection page?
Yes, but it requires setup. Cleanest approach: describe what you want to Fudge ("read CTA text and link from a per-collection metafield, fall back to a default if empty") and it builds the metafield-driven section so you can set CTA per collection without extra templates. Alternative: per-collection templates each with its own CTA configuration.
Do CTA buttons hurt collection page load speed?
Negligibly. The button itself is just HTML/CSS. Quick-add buttons are slightly heavier because they fetch variant data when clicked, but this is on demand - not on initial page load.
What's the best CTA copy for a collection page?
Specific beats generic. "Shop 47 summer dresses" outperforms "Shop now". "Free returns on every order" outperforms "Learn more". Tell shoppers exactly what they'll get if they click - vague CTAs underperform consistently.
