Dawn Theme - Customise Quick add Buttons

Store Design
, , , , ,

Topic summary

Goal: Replace Dawn theme’s bulky “Quick Add” buttons in Featured Products with a streamlined, brand-colored button using the existing basket SVG icon.

Guidance provided: One approach suggests editing sections/product-grid.liquid or sections/featured-products.liquid, swapping the button markup, adding CSS in assets/theme.css, and optionally using AJAX to add to cart without redirect. Another provides detailed steps to modify a product-card template, inject a custom-quick-add button with the icon-cart SVG, style it in base.css, and verify the icon in snippets/icon-cart.liquid.

Roadblocks: The requester cannot find product-card.liquid in Sections and instead sees snippets/card-product.liquid without the referenced render code, indicating file/path differences across Dawn versions.

Artifacts: Images show the desired button style and a code screenshot, which are central to understanding the design target and where the user is looking in code.

Status: Unresolved. Next action is for the requester to share the store URL and password so the helper can inspect the theme structure and provide exact file paths and implementation.

Clarifications: Dawn is Shopify’s default theme; SVG is a scalable vector icon; AJAX enables adding to cart without page reload.

Summarized with AI on December 13. AI used: gpt-5.
1

Hi,

I’ve tried so many tutorials and various codes and got nowhere so asking for help on here,

Currently, working on homepage.

I have a featured products section and detest the quick add bulk option buttons.

I want to create something that looks like this using my own brand colours that I can use wherever I have products displayed. Happy to use the current dawn theme basket Svg icon

button options.png

If anyone can help me with this using basic terminology it would be amazing!

2

Hi @lucylocket205 ,

To replace the quick add button with a custom design in the Dawn theme:

  1. Edit HTML: In Edit Code, go to sections/product-grid.liquid or sections/featured-products.liquid . Replace the quick add button code with your custom button:

Style Button: In assets/theme.css, add styles for your button:

.custom-add-to-cart {
    background-color: #your-brand-color;
    color: white;
    padding: 10px 20px;
}
.custom-add-to-cart:hover {
    background-color: #darker-shade;
}

Optional - JavaScript: Use Shopify’s AJAX API to add products to the cart without redirecting.

  • Save and Test: Save your changes and preview your homepage.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

3

Thanks for your reply!

Just attempting your instructions but struggling to locate the quick add button code within the html log.

4

Screenshot 2024-11-18 111353.png
Screenshot 2024-11-18 111353.png1902×298 15 KB

Is this it? If so what portion of it am I deleting? My html knowledge is so basic, I apologise for what could be really dumb questions!

5

Hi @lucylocket205 ,

Thank you for your question!
To achieve the customization of the “Quick Add” buttons on your Shopify Dawn theme, follow the steps below. The goal is to replace the current bulky button style with a more streamlined, custom-styled “Quick Add” button using your brand colors and the Dawn theme’s basket SVG icon.

1. Update Product Card Template

To begin, you need to customize the product card component.

Steps:- Go to Online Store > Themes > Edit Code.

  • Find the product-card.liquid file under the Sections directory.

Look for this block of code in product-card.liquid: {% render ‘product-card’, product: product %}

And add a custom class to the button for easier styling:

Replace: Quick Add
With:




Add to Cart

2. Customizing the Button Style (CSS)

Now, let’s add some custom styles using CSS:

Steps:- Go to Assets > base.css (or style.css, depending on your Dawn theme version).

Add this CSS to style the “Quick Add” button:

.custom-quick-add {
display: flex;
align-items: center;
justify-content: center;
background-color: #ff4500; /* Replace with your brand color */
color: #ffffff;
border-radius: 5px;
padding: 8px 12px;
font-weight: bold;
transition: background-color 0.3s ease;
border: none;
cursor: pointer;
}

.custom-quick-add:hover {
background-color: #e63900; /* Darker shade of your brand color */
}

.custom-quick-add .icon-cart {
margin-right: 5px;
}

3. Update the Dawn Theme SVG Icon Reference

To make sure you are using the Dawn theme basket SVG, you can verify its existence in icon-cart or modify the SVG if needed.

Check SVG Icons- Go to Snippets > icon-cart.liquid.

  • Verify the SVG icon exists or update the SVG code here.

Example SVG code in icon-cart.liquid:


4. Test Your Changes- Refresh your Shopify storefront and check the Featured Products section on your homepage.

  • You should now see a custom-styled “Quick Add” button using your brand colors.

Additional Notes:- If the CSS doesn’t apply, ensure you have cleared your browser cache or try viewing it in an incognito window.

  • Feel free to adjust the styles (colors, padding, etc.) to better fit your design preferences.

It’s a little complicated but I hope you found this helpful!

Best,
Liz.

6

Thanks @LizHoang !

This looks great however, I’ve already encountered my first problem. I do not have this ‘product-card.liquid file’ in the sections folder. Could it have another name?

In the snippets folder I have located a file named card-product-liquid but this does not contain the following {% render ‘product-card’, product: product %} within the html as far as I can tell!

I look forward to hearing from you!

1 Like
7

Dear @lucylocket205 ,

Sorry for the late response! Can you please share your store URL along with its protection password (if it had one) with me so I can help you further?

Liz.