Change Buy now button border’s opacity without affecting other buttons

Solved

Change Buy now button border’s opacity without affecting other buttons

MiguelMaya
Excursionist
48 0 4

Id like having 80% border opacity for the home page button, but i want all the other buttons’ borders remain 100%, like the Buy now (Compra ahora) buttons both in the product, cart and cart notification pages. These are not separate settings on the Dawn Theme, it changes the border opacity for anll buttons. Are you able to help change it just for the homepage button?

 

Using Dawn 15 misteri.ca

 

IMG_0122.jpeg

Accepted Solution (1)

BSS-TekLabs
Shopify Partner
2401 695 835

This is an accepted solution.

Hi @MiguelMaya,

You can follow these steps to make 80% border opacity for just the home page button

1. Open Online Store > Theme > Edit Code

2. Find and open the base.css (or theme.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

 

.banner__buttons .button--secondary:after {
   --border-opacity: 0.8;
}

 

4. Open Sales Channels > Online Store > Select your current theme > Customize

5. Open Theme Settings > Buttons > Border

6. Set the value for opacity back to 100% to set all other buttons to default

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Reply 1 (1)

BSS-TekLabs
Shopify Partner
2401 695 835

This is an accepted solution.

Hi @MiguelMaya,

You can follow these steps to make 80% border opacity for just the home page button

1. Open Online Store > Theme > Edit Code

2. Find and open the base.css (or theme.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

 

.banner__buttons .button--secondary:after {
   --border-opacity: 0.8;
}

 

4. Open Sales Channels > Online Store > Select your current theme > Customize

5. Open Theme Settings > Buttons > Border

6. Set the value for opacity back to 100% to set all other buttons to default

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now