How to edit buttons in featured section + product page

[courtsideasia]

Hi everyone,

The buttons on my site are horrendous and I cannot find a way to edit them. Please help because I'm slowly going insane! Currently using the free "whisper" theme generated from some keywords, I reckon its the dawn theme just redone.

Website - www.courtsideasia.com

I've attached photos of my buttons - I'd like to make them much smaller on the featured section and on the product page. Would also be great to increase the spacing between products if possible. 

Thank you in advance!!

[Digiteon]

Hey,

I understand your frustration with the buttons on your site. Let's address these issues step-by-step:

1. Editing Buttons: To resize the buttons, you’ll need to access the theme's CSS. Since you’re using the “Whisper” theme, which is similar to the Dawn theme, you can follow these steps:
   - Go to your Shopify admin panel.
   - Navigate to Online Store > Themes.
   - Click on "Customize" next to your active theme.
   - In the theme editor, click on "Theme Settings" and then "Custom CSS" or "Additional CSS" (depending on your theme).
   - Add the following CSS code to adjust the button size:
   
   

.featured-section .button-class,
.product-page .button-class {
  padding: 10px 20px; /* Adjust padding to change button size */
  font-size: 14px; /* Adjust font size as needed */
}

Replace .button-class with the actual CSS class of your buttons. If you’re unsure of the class, you can use your browser's developer tools to inspect the button element and find the class name.

2. Increasing Spacing Between Products: To increase the spacing between products, you can add this CSS code to the same "Custom CSS" section:

.product-grid-item {
  margin-bottom: 20px; /* Adjust the value to increase/decrease spacing */
}
​

Adjust the margin-bottom value to achieve the desired spacing between products.

I hope it will works!

[Sweans]

Hi @courtsideasia ,

To adjust the size of the buttons on your featured section and product page, you'll need to modify the theme code. Follow these steps:

1. In the theme customization panel, locate and open the custom CSS section.

2. Insert the following CSS code:

.quick-add__submit {
    min-width: unset;
    max-width: max-content;
    margin-inline: auto;
}

After applying the changes, you should see the buttons resize accordingly.

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,

Sweans