Debut Theme - Multiple text alignment position for slider images

Solved
bw-cn
Excursionist
33 0 12

I have 3 images on my homepage slideshow with the text alignment set to "bottom left". However, I want to set the text alignment to "top left" for the 2nd image in the slider. Is there a way to do this?

0 Likes

Hello,

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one) so we can help you.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
bw-cn
Excursionist
33 0 12

@diego_ezfy 

 

briowell.com

 

Thank you so much for your help!

0 Likes

This is an accepted solution.

Hey,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

 

<style>
@media (min-width: 767px){
    .template-index .slideshow .slick-slide:nth-child(2) .slideshow__text-content{
    position: absolute;
    bottom: unset;
    transform: unset;
    right: 0 !important;
    left: auto;
    text-align: left !important;
    margin-top: 65px;
}
}
</style>

 

 

Please let me know whether it works.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
bw-cn
Excursionist
33 0 12

@diego_ezfy 

Amazing - thank you!!!!

I actually needed it to be on the left so just made that tiny edit and it worked with your code. Appreciate your help, Diego!

0 Likes

You're welcome! I'm glad to hear it worked. Wishing you a great week.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ How to add a slider & thumbnails to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
barcusmrandt
Tourist
5 0 0

There is a much better way of doing this, that will allow you to select different heading/title/text position dynamically for each slide. And, it's easy to do!  

 

Go to edit code, and find your slideshow.liquid in sections.

Find this code, copy it, and comment it out:

barcusmrandt_0-1620554396589.png

 

Now paste the code you copied here. It should now look like this:

barcusmrandt_1-1620554454371.png

What this does is to move the text position selection from besing selected globally - or for the whole slideshow section if you will, to being selected in each slide. Or in other words, you move the selection from "section" to each "block". Block being the individual slides.

Now to also move the drop-down menu option in the customizer from the slide-section to each individual slide, you have to move the corresponding "schema" code.

Search for "text_alignment" and find this down below in the "schema" part of the code.

Now you have to move all of the code within the text_alignment part from "section" to "blocks". There is quite a large number of lines you need to select and cut out. Select from this part (be sure to include the opening bracket):

barcusmrandt_2-1620554684564.png

All the way down to this part (be sure to include the closing bracket and comma):

barcusmrandt_3-1620554766093.png

 

Cut all of this code out (CTRL+X).

Scroll down in the schema part until you get to the "blocks" section. Find a good place to paste all of the code you just copied. If your file has not been altered too much yet, you should paste the code after the "default" section closing bracket, around line 1007.

barcusmrandt_4-1620554988592.png

 

Now you can change the text position on each individual slide in your theme customizer, under each slide section:

barcusmrandt_5-1620555171880.png

0 Likes