Shopify themes, liquid, logos, and UX
Every other theme I have tried, there has been the option to change the image overlay color and opacity, yet Venture does not give this option. The current overlay is extremely dark and gray! Is there a way to adjust color and/or opacity in this theme?
Solved! Go to the solution
This is an accepted solution.
Okay, I ended up figuring this out myself after spending hours figuring out the code. So for anyone reading in the future, here's what you do.
The above steps will work if you want to get rid of the "selection" or transition overlay. To have full range of customization though, you can do the steps below.
Go into your theme.scss.liquid and ctrl + f and look for ".link-block".
Should see a style like this:
.link-block {
position: relative;
display: block;
@include display-flexbox();
justify-content: center;
padding: 20px 20px;
text-align: center;
flex: 1;
background: {
size: cover;
position: top center;
}
&:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $color-fixed-black;
opacity: 0.8;
transition: opacity 0.2s ease;
z-index: 1;
Or something close to that. I don't remember what my numbers were before as I've changed them now.
Anyway, it's this part that's important
background-color: $color-fixed-black;
opacity: 0.8;
transition: opacity 0.2s ease;
Or whatever your exact numbers say. So first off, you can change the $color-fixed-black to $color-fixed-white if you'd rather have a white button overlay, which I did.
The regular opacity over the buttons is the top number. I set mine all the way down now to 0.2. You can make it anywhere from 0 to 1 though.
The transition opacity was the one I kept referring to as the "selection" opacity, basically showing that you're about to click an option. You can also set it from 0 to 1 per your preference.
Please share store URL & screenshot what do you want .
Thanks!
The overlay over these 4 link blocks in the top and over my collections. In the first image, I have the first option selected so you can see how dark the overlay already is on the options are when not selected. The color behind that overlay is the exact same color as the menu bar, yet you can't tell because the overlay is so dark. The color on the second image is white but looks super dark gray because of the overlay.
I don't currently have this as my theme because I'm trying to fix this before publishing it, so I don't have my actual URL to share, but here's the preview URL: https://rdjjm0wwodpg1qux-55442145437.shopifypreview.com
please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid ->paste below code at the bottom of the file.
.link-block:after {
background-color: #fff !important;
opacity: .8 !important;
}
Thanks!
@dmwwebartisan this did work! But when I put this in, then it gets rid of everything. I was okay with the overlay that just showed what item you were selecting, it's just the dark overlay when you're not even on the image that I'm trying to get rid of. With this code, both the regular overlay and selection overlay go away. Is there a way to just make the random dark overlay on the color go away without making the standard selection overlay go away too?
Thank you so much!!
This is an accepted solution.
Okay, I ended up figuring this out myself after spending hours figuring out the code. So for anyone reading in the future, here's what you do.
The above steps will work if you want to get rid of the "selection" or transition overlay. To have full range of customization though, you can do the steps below.
Go into your theme.scss.liquid and ctrl + f and look for ".link-block".
Should see a style like this:
.link-block {
position: relative;
display: block;
@include display-flexbox();
justify-content: center;
padding: 20px 20px;
text-align: center;
flex: 1;
background: {
size: cover;
position: top center;
}
&:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $color-fixed-black;
opacity: 0.8;
transition: opacity 0.2s ease;
z-index: 1;
Or something close to that. I don't remember what my numbers were before as I've changed them now.
Anyway, it's this part that's important
background-color: $color-fixed-black;
opacity: 0.8;
transition: opacity 0.2s ease;
Or whatever your exact numbers say. So first off, you can change the $color-fixed-black to $color-fixed-white if you'd rather have a white button overlay, which I did.
The regular opacity over the buttons is the top number. I set mine all the way down now to 0.2. You can make it anywhere from 0 to 1 though.
The transition opacity was the one I kept referring to as the "selection" opacity, basically showing that you're about to click an option. You can also set it from 0 to 1 per your preference.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024