how to add bordered add to cart button on each product on featured collection on home page

Store Design
,

Topic summary

A user wants to add bordered “Add to Cart” buttons beneath each product in their featured collections on the homepage. They provided a reference image showing the desired button style.

Solution provided:

  • Navigate to Online Store → Themes → Customize
  • In the featured collection settings, change the quick add option to “Standard”
  • This enables the bordered button display

Follow-up customization:
To modify button background colors:

  • Access Online Store → Themes → Edit code
  • Open the base.css file
  • Add custom CSS at the bottom targeting .quick-add__submit with the desired background color

Status: Resolved with step-by-step instructions for both implementation and styling customization.

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

Hi, you can file base.css file in your Online Store → Themes → Edit code, then paste this code at the bottom of the file

.quick-add__submit {
    background: aliceblue !important; // Replace with your taste
}
1 Like