A user wants to adjust the transparency of a text block background in Shopify’s Prestige theme, as the theme only offers solid color options without transparency controls.
Solution Provided:
A community member offered CSS code to be added to the theme.scss file:
opacity: 0.6 (adjustable percentage)Implementation:
The code targets .ImageHero__Block--large class and applies the opacity property with !important flag.
Outcome:
The original poster confirmed the solution worked successfully.
Follow-up Question:
Another user asked how to locate and access the theme.scss file, indicating this may be a common knowledge gap for implementing the solution.
Hello,
I have an ‘Image with text block’ as my first element on my homepage. I would like to make the text block background slightly transparent so that the image can be seen behind it. Is there a way to do this? When selecting background colour it only gives option of solid colours, no choice to alter transparency.
Thanks
Will
Hii, @wpartridge
Kindly share your store URL so,
I can solve it perfectly.
Thank You.
hello @wpartridge
Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.
@wpartridge
Paste this code on top of the theme.scss file.
.ImageHero__Block.ImageHero__Block--large {
background: transparent !important;
}
Thank You.
Thanks! Is there a way I can set the transparency amount (%)? I only want it to be slightly transparent not fully.
Many thanks
@wpartridge
Paste this code on top of the theme.scss file.
.ImageHero__Block.ImageHero__Block--large {
opacity: 0.6 !important;
}
Thank You.
Fantastic - thanks!
@wpartridge
If it is helpful then like and accept my solution.
Thank You.
what is the theme.scss file and how do I access it?