Dawn Theme - Customise Quick add Buttons

[lucylocket205]

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

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

[akshay_bhatt]

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:

<button class="custom-add-to-cart">
    <svg> <!-- Your cart icon here --> </svg>
    Add to Cart
</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

[lucylocket205]

Thanks for your reply!

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

[lucylocket205]

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!

[LizHoang]

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: <button class="quick-add-button">Quick Add</button>
With: 
<button class="custom-quick-add">
<svg class="icon icon-cart" width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="#icon-cart"></use>
</svg>
Add to Cart
</button>

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:
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M5 5h10l-1 7H6L5 5zm0 0h10l1-3H4L5 5zm2 11a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2z"/>
</svg>

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.

[lucylocket205]

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!

[LizHoang]

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.