Custom Html Slideshow with Images and text on top of them (Supply)

Solved
GregoryKika
Tourist
18 0 0

Good morning everyone,

I'm trying to replace the standard Slideshow in the Supply theme with the same one, except I would need the pictures and the text to be separate (in order to save money with translation apps).

Does anyone know of a simple code that would help me achieve what I need to do.

Basically I would like to know:

1) How to add a text OVER an image

2) How to have multiple texts and image in a slideshow

It would also work if I could do something similar using the slideshow option.

 

Thanks to anyone who can help me

Replies 30 (30)
GregoryKika
Tourist
18 0 0

With the code you sent me, the text is now showing on the bottom of the picture.

I would like it to be above the picture and in the center, where the white line is

GregoryKika_0-1634898411562.png

 

oscprofessional
Shopify Partner
9183 1561 1926

@GregoryKika,

You have to set this via CSS code. Now only need to apply basic CSS just like to set position and width height that's it.

Also please You can mark it as an accepted solution. So other should know there are no action required for this thread.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
GregoryKika
Tourist
18 0 0

Perfect, thank you so much!

GregoryKika
Tourist
18 0 0

Should I set the CSS in the slideshow.liquid file?

oscprofessional
Shopify Partner
9183 1561 1926

There is a theme.scss.liquid file inside Asset folder.
Add a css inside this file.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
GregoryKika
Tourist
18 0 0

Should I add a css style in that part of the theme.scss.liquid file?

I can't figure out how to make it move to the top part of the image.

GregoryKika_0-1634910228265.png

 

oscprofessional
Shopify Partner
9183 1561 1926

You can add it at the end of file

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
GregoryKika
Tourist
18 0 0

Sorry to bother you again, I can't seem to find the proper way to have it go where I want it.

I tried different position properties but I see no changes in the website.

oscprofessional
Shopify Partner
9183 1561 1926

This is an accepted solution.

Hi

Please add the code in theme.scss.css file

.flex-viewport .slides li h2 {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    color: red;/*just to highlight the text. change it as per requirement*/
}
.flex-viewport .slides li {
    position: relative;
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

GregoryKika
Tourist
18 0 0

Thank you very much. Should I accept that as a solution too since it's a part of what I needed to do?