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

Solved
Highlighted
New Member
2 1 1

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
Highlighted
New Member
2 1 1

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

 

 

1 Like
Highlighted
Tourist
8 0 1

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.

1 Like
Highlighted
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... 

1 Like
Highlighted
New Member
1 0 1

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

1 Like
Highlighted
Shopify Partner
4946 731 1595

@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 Expert | 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