Customizing image banner section

Technical Q&A
, ,

Topic summary

  • Issue: Buttons in the Shopify Rise theme appeared transparent; the requester wanted a solid-color button in the image banner.

  • Solution provided: Add a CSS override in Online Store → Themes → Edit code → base.css (or theme.css):
    • .button, .button–primary { background-color: #000 !important; opacity: 1 !important; }
    • If transparency only occurs on hover, also use .button:hover { opacity: 1 !important; }
    Explanation: opacity controls transparency (1 = fully opaque). The hex color (#000) can be changed to any solid color.

  • Scope/impact: This forces solid button styling across the store, not just one section.

  • Outcome: The requester confirmed the CSS fix worked; no further issues reported. Status: resolved.

Summarized with AI on January 28. AI used: gpt-5.
1

Hey there! How can I remove the button transparency? I want it to have a solid color.

The theme I’m on is Rise.

First screenshot shows how the button looks now. Second screen shot shows what I’m aiming for.

Appreciate the support :white_heart:

2

@designer.drafts_1 Fix it with CSS.

Steps:

  1. Go to Online Store → Themes → … → Edit code

  2. Open base.css (or theme.css)

  3. Add this at the bottom:

.button,
.button--primary {
  background-color: #000 !important; /* change color */
  opacity: 1 !important;
}

If it’s only happening on hover, add:

.button:hover {
  opacity: 1 !important;
}

Save and refresh.

That will force a solid button color across the store.

1 Like
3

Thank you Zuhairan.Raydann. It worked!

1 Like