Center add to cart button in collection Dawn theme

[Multicoloruni]

Hi there! I'm trying to center the add to cart button (which is currently on the left side) on both the feature collection display and the collection page, but nothing seems to work... I'd greatly appreciate help with this! Thank you very much! Below, a screenshot of how it looks right now. And if it's possible to also increase a bit the size of the price and remove the underlying when "hoovering" on the product name, that would be so amazing.

[dws_pvt_ltd · Accepted solution]

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"
6. 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,

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

[dws_pvt_ltd]

Hello @Multicoloruni, Please share your store URL and password.
So that I will check and let you know the exact solution here.

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

[Hung5]

how to provide url shop.

[dws_pvt_ltd · Accepted solution]

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"
6. 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,

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

[niraj_patel · Accepted solution]

Hello @Multicoloruni 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .quick-add {
      margin: 0 auto !important;
   }
    .underline-links-hover:hover a {
       text-decoration: none !important;
    }
    span.price-item.price-item--regular {
       font-size: 25px !important;
    }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Multicoloruni]

Thank you so much!! This worked perfectly and fixed all the 3 things I was mentioning!! I really appreciate your help.

[Huptech-Web]

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. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

 body .quick-add {
   margin: 0 auto !important;
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
K.K

[steve_michael2]

Hi @Multicoloruni , I hope you are doing well.

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </body>

<style>
  .quick-add {
    position: relative;
    grid-row-start: 4;
    z-index: 1;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!