Adding Quick Add Button to Collection Carousel Section

Shopify Discussion

Topic summary

A user wants to add Dawn Theme’s default Quick Add button to a Collection Carousel Section, similar to how it appears in the related products section.

Initial Solution Provided:

  • Copy the Quick Add button code from related products
  • Insert it into the carousel’s product loop
  • Ensure required JavaScript and CSS are included

Challenge Identified:
The Quick Add button is rendered within the card-product snippet, making it difficult to extract just the button without the entire card structure.

Recommended Approach:

  1. Locate the Quick Add button element in the card-product snippet
  2. Pass a conditional parameter (quick_add_only: true) when rendering the snippet
  3. Modify card-product to conditionally render only the button when this flag is set
  4. Ensure button styling is preserved
  5. Test the implementation

The discussion remains ongoing with code snippets shared via external links for troubleshooting.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I want to add the default quick add button/option of the Dawn Theme to the Collection Carousel Section like how it is on the related products.

Here is the carousel code: https://pastecode.io/s/eav2wbc5
and here is the related products code: Untitled (i2abkx3q) - PasteCode.io

Any help is appreciated. Thanks!

2

Hi Sunrayzz,

To add the Quick Add button to the Collection Carousel in the Dawn theme:

  1. Copy Quick Add Code:
    From your related products code, locate the Quick Add button block (likely with quick-add class).
  2. Insert into Carousel Code:
    Paste the Quick Add button code inside the product loop of your carousel code, e.g.:
    liquid
    Copy code
    {% for product in section.settings.products %}

{{ product.title }}

{{ product.title }}

Quick Add

{% endfor %}

  1. Include Scripts/Styles:
    Ensure any required JavaScript and CSS for the Quick Add feature is included (e.g., render ‘quick-add-script’).
  2. Test and Debug:
    Preview your theme to verify functionality.

If needed, share the Quick Add code snippet for more tailored help!

3

The quick add button in the related products is rendered inside card-product. How should I extract only the button and not the entire card?

Related products code: https://pastecode.io/s/hbhxg8du

4

To extract only the “Quick Add” button and not the entire card in your related-products implementation, you can directly target the rendered button in the card-product snippet. Here’s how you can modify and access the button:

Steps to Extract Only the Button1. Identify the Button Element in card-product: Open the card-product snippet and locate the code for the “Quick Add” button. It might look something like this:

Quick Add
  1. Modify the card-product Rendering: If the “Quick Add” button is part of the card-product snippet, but you only need the button, modify how card-product is rendered. You can pass a flag to the snippet to render only the button. For example:

{% render ‘card-product’,
card_product: recommendation,
quick_add_only: true,
section_id: section.id
%}

  1. Update the card-product Snippet: Inside the card-product snippet, conditionally render the “Quick Add” button if the quick_add_only parameter is true:

{% if quick_add_only %}

Quick Add

{% else %}

{% endif %}

  1. Add Styling: Ensure the extracted button retains its styles. Include or reuse the CSS for the “Quick Add” button from the full card.

5. Test the Implementation: Check the related products section on the storefront to ensure that only the “Quick Add” button is rendered where expected.