How to add text overlay to collection images in new page

New Member
7 0 0

Hi guys,

I have added a new page with some collections that I am wanting to use as PPC landing page. I got the instructions here https://help.shopify.com/en/themes/customization/collections/featuring-collections-using-link-lists

 

This worked really well. I just want to know how I can add text overlay to the images for the collection titles and remove the collection titles that appear below the collection images so the collection images look the same as my home page that has in-bedded text overlay on the collection images.

 

Thanks very much.

 

Bolsta

 

0 Likes

Hello 
Can you share your site url so that i can check and let you know?

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
7 0 0
Hi thanks for getting back to me. My site is www.detectorsdirect.com.au
0 Likes
Hello Add this css at bottom of Online Store-> Themes -> Edit code->Assets->theme.scss.liquid
This will remove collection title.

h3.collection-grid-item__title {
 display: none;
}

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
1 Like
New Member
7 0 0

Thanks mate. I think I didn't explain myself very well.

 

here is the link of the page in mention https://detectorsdirect.com.au/pages/waterproof-gold-metal-detectors-1

 

I'm hoping to remove the text below the collection images and then replace that text with a text overlay on the images so it looks the same as the collection images on the home page. Sorry for the confusion

0 Likes

Hello Ok now Add this css at bottom of Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

#MainContent .collection-grid__item-title {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
}
#MainContent .text-center {
	position: relative;
}
.collection-grid__item-title .collection-item__title {
	color: #fff;
	font-size: 24px;
	font-weight: 600;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Highlighted
New Member
7 0 0

THANK YOU!! mate, you are such a legend. it worked beautifully. thanks again. Bolsta

0 Likes
New Member
7 0 0

Sorry man, one more thing, its not working on mobile. the text is not staying within the picture frame. Anything I can do? Thanks heaps mate

0 Likes
New Member
7 0 0

the home page collection images are responsive but not on the other page. 


@bolsta wrote:

Sorry man, one more thing, its not working on mobile. the text is not staying within the picture frame. Anything I can do? Thanks heaps mate


 

0 Likes

Text size for mobile add this css in bottom

@media only screen and (max-width: 767px) {
.collection-grid__item-title .collection-item__title { font-size: 14px;
}}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes