Debut Theme Slideshow Add Heading/Subheading Color and move Text Position to Block Settings

Solved
Saltydog
New Member
2 1 3

The Debut Theme slideshow is great, and it is awesome that text size and position can be set for the slideshow. However, many images are either high key and light all over or contain dark elements, and this presents a problem with multiple images. At times, dark or black text can't be seen on dark images or if the text is set to white, it can't be seen easily on light images. Also, the area of interest in the image changes, so headings and subheadings need to be moved for each image. I know the overlay opacity setting was designed to try to provide text readability, but it doesn't work well for many images as it darkens the image too much.

 

Currently, the text size and text position are set at the section level while the image, heading text and subheading text are set at the block.settings level. It would be so awesome if we could move the text size and position into the block.section with each individual image and also add color for the heading and subheading text. This would allow a multi-image slideshow that could accommodate almost any image.  Text could be colored for each slide and text could be positioned in different areas for each slide. Perfection! :-) 

 

I have made a few attempts at this. I do development, but I am new to Shopify and Liquid. I added heading and subheading text color into the block setting schema. I understand block variables are limited to blocks, but I wondered if there is a way to assign a block variable to a section settings variable that could be rendered in CSS. This way, each block containing individual heading and subheading text colors and positions could be passed to CSS.

 

slideshow_custom.jpg

    Does anyone know of a way to accomplish this?  Thanks so much!

 

 

 

 

 

 

0 Likes
Saltydog
New Member
2 1 3

This is an accepted solution.

I never received any responses to this. I went ahead and took the existing slideshow in Debut and created a new custom slideshow that has all of the properties I described. Now, each image in the slideshow has text adjustments plus additional attributes can be set for individual slides, and I added the ability to make the entire slide a clickable link. These text adjustments are implemented on non-mobile device screens, For mobile, it uses the default Debut text positioning. 

 

CustomSlideShow.jpg

 

 

Algalsc
Excursionist
29 0 6

This is amazing, how can I add this to my page? That the exact problem I am having: trying to change the text colors for each slideshow heading and subheading.

RDS13
Tourist
3 0 1

Hey Saltydog, would you be kind to share the custom slideshow you have created? I am having the same problem you faced... 

swellsosplendor
New Member
1 0 1

Agreed that this is spectacular!! Would love to know your secrets as I too am experiencing the same problem.

KetanKumar
Shopify Partner
20348 2107 7617

@swellsosplendor 

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
jcdlink
New Member
1 0 0

 @Saltydog Any chance you will be sharing the code for this? It is exactly what I have been looking for to add to my Debut theme!

0 Likes
ilovepillow
Excursionist
13 0 7

I would also greatly appreciate the coding you used to add to my Debut theme!

0 Likes
ilovepillow
Excursionist
13 0 7

Hi Saltydog! Would you mind sharing the coding you added to enable this feature?

0 Likes
nickeykehoe
New Member
1 0 1

This is a really lovely solution - just what I'm looking for. 

Could you share the solution? 

 

Thanks!