Adding Quick Add Button to Collection Carousel Section

Shopify Discussion
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.