Add a box behind text on featured collections on Sahara theme

Add a box behind text on featured collections on Sahara theme

Sharon-W
New Member
7 0 0

Hi

I find the font does not stand out enough on my featured collections images. 

I am looking to add a almost transparent semi see through (or something that matches the colour) box behind the text on my featured collections to make the wording stand out more.

I am using Sahara theme. 

Can anyone assist please?

Replies 12 (12)

namphan
Shopify Partner
405 47 70

Hi @Sharon-W,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

 

.media.media--overlay.card-collection__media:after {
    content: '';
    background: #0000003b;
}

 

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
namphan
Shopify Partner
405 47 70

Hi @Sharon-W,

Have you tried my tutorial? Is it what you want 😊

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
Sharon-W
New Member
7 0 0

Thank you, can you provide an example of what this will look like? and also, do I have to manually go in and apply it or should it apply automatically?

Ahmed2
Shopify Partner
4 0 0

can you give me images that explain what you want to do because your problem is not clear enough for me

Sharon-W
New Member
7 0 0

1234.png

Ahmed2
Shopify Partner
4 0 0

You can make the text in box over the image, i will give you an example, because it is never stand out on the image and you will harms the customer experience and this will effects your store salles and Customer Retention to your store 

 

Screenshot_20240711-185957_Chrome.jpg

Sharon-W
New Member
7 0 0
Hi

Thank you. Please see attached image, where the writing is on the
collections, i would like a transparent banner put behind it to make the
text stand out a bit more
namphan
Shopify Partner
405 47 70

Hi @Sharon-W,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.media.media--overlay.card-collection__media:after {
    content: '';
    background: #0000003b;
}
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
Ahmed2
Shopify Partner
4 0 0

I seen it you can make the font bigger and bolder and change the color to something like white like this image 

Screenshot_20240711-193844_Chrome.jpg

Sharon-W
New Member
7 0 0

Thank you, this is not what I am looking for. I am looking to place a more definitive banner over the text to highlight the text. But thank you

Ahmed2
Shopify Partner
4 0 0

So that i can understand what you are looking for send me an example 

namphan
Shopify Partner
405 47 70

Hi @Sharon-W,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

 

.card-collection__title {
    position: relative;
}
.card-collection__title:after {
    content: '';
    background: #0000003b;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

 

You can change the background as you like, it will display like this:

Screenshot.png

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com