Center add to cart button in collection Dawn theme

Store Design
, , ,

Topic summary

Goal: Center the “Add to cart” button on Featured Collection and Collection pages, increase price size, and remove underline on product-name hover.

Key solution (CSS changes):

  • Center button by targeting .quick-add with margin: 0 auto (often with !important to override theme styles).
  • Remove hover underline via .underline-links-hover:hover a { text-decoration: none !important; }.
  • Enlarge price with span.price-item.price-item–regular { font-size: 25px !important; }.

Where to add CSS:

  • Option 1: Edit quick-add.css (replace existing .quick-add margin with margin: 0 auto; and keep its positioning/z-index as needed).
  • Option 2: Add to base.css or a custom CSS file at the end.
  • Option 3: Inject in theme.liquid before inside a block.

Notes: Screenshots were provided for guidance but not required to implement.

Outcome: The requester confirmed the CSS fix worked and resolved all three items. Status: Resolved; no further action requested.

Summarized with AI on December 21. AI used: gpt-5.
4

Hello @Multicoloruni , Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. open “quick-add.css”
  5. Add the following code at the end of the file.

Find the CSS with .quick-add class.

.quick-add {
    position: relative;
    grid-row-start: 4;
    margin: 0 0 1rem; /* this is old CSS, remove or comment this CSS */
    margin: 0 auto; /* this is new CSS, add this CSS */ 
    z-index: 1;
}

See the screenshot below,

Screenshot from 2024-08-22 14-57-37.png
Screenshot from 2024-08-22 14-57-37.png1846×966 286 KB

dws_pvt_ltd_0-1724319018309.png
dws_pvt_ltd_0-1724319018309.png1846×966 197 KB

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

2 Likes