Craft Theme: Modifying Button Opacity on Image Banner

Store Design
, , ,

Topic summary

A Shopify store owner using the Craft theme needed help removing transparency from a button on their header image banner.

Solutions Provided:

  • CSS approach: Add custom CSS code to the base.css file targeting the specific button class with opacity: 1 !important to override the transparent background.

  • Simpler fix: Ensure the button has a proper link added, which may automatically resolve the opacity issue without requiring custom code.

Outcome:

The issue was successfully resolved. The store owner confirmed the solution worked and thanked the contributors.

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

Hello,

I am currently using the Craft theme and I have created a header image banner and incorporated a button. The button currently has a transparent background, and I am trying to modify it so that it displays with no opacity. I would greatly appreciate any guidance or code suggestions that can help me achieve the desired effect on the button. Thank you for any advice or recommendations you can provide.

Site: shop.bymandymccoy.com

Pass: pewtra

2

Hi,

  1. Go to online store
  2. Edit Code
  3. Open your base.css file
  4. Paste the following code:

shopify-section-template–20786962858260__b26637c5-c68b-4d52-b162-d3d68343e3f3 .button {opacity: 1 !important;}
}

  1. Save.

Let me know if it work by marking it as a solution.

3

Hi @mandymccoy

This is David at SalesHunterThemes.

You only need to add the link for the button, then the problem will fixed.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

1 Like
4

Thank you so much for your help! :slightly_smiling_face: