What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: How to add text overlay to collection images in new page

How to add text overlay to collection images in new page

bolsta
Excursionist
11 0 24

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

 

Replies 16 (16)

oscprofessional
Shopify Partner
16116 2410 3126

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
bolsta
Excursionist
11 0 24
Hi thanks for getting back to me. My site is www.detectorsdirect.com.au

oscprofessional
Shopify Partner
16116 2410 3126
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;
}

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
bolsta
Excursionist
11 0 24

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

oscprofessional
Shopify Partner
16116 2410 3126

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;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
bolsta
Excursionist
11 0 24

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

bolsta
Excursionist
11 0 24

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

bolsta
Excursionist
11 0 24

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


 

oscprofessional
Shopify Partner
16116 2410 3126

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;
}}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
bolsta
Excursionist
11 0 24
Thank you mate will get that in tonight. Really appreciate all of your
help mate will let you know how it goes . Regards Bolsta
JackieKim
Excursionist
14 0 0

THANK YOU!!


@oscprofessional wrote:
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;
}


 

blackdogfarmmt
Visitor
2 0 0

Hi -- I have the same question and do not see the theme.scss.liquid in the assets folder. Do I need to add it?

oscprofessional
Shopify Partner
16116 2410 3126

@blackdogfarmmt 

path for theme.css

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

share the screenshot

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
meeshonline
Visitor
1 0 0

Hi, I have the same question. Underneath assets I have: theme-editor.js 

Any help would be very much appreciated, thank you 🙂

oscprofessional
Shopify Partner
16116 2410 3126

@meeshonline ,

Share your issue URl with us...

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
sehiggins
Visitor
1 0 0

Hi! Were you ever able to get an answer? I am having the same issue and am looking for a solution.