Debut Theme - Multiple text alignment position for slider images

[bw-cn]

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?

[diego_ezfy]

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

[bw-cn]

@diego_ezfy 

briowell.com

Thank you so much for your help!

[diego_ezfy · 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

[bw-cn]

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

[diego_ezfy]

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

[alexislabrada]

@diego_ezfy 

Hi, how would I be able to add multiple subheadings on my slideshow. I want multiple rows of words so like a line break. And then I also put the words to the top right but I need them moved a little bit to the left so that it is centered. Please let me know thank you.

Example:

I want to go shopping

This is nice

and more

Please let me know, thank you.

The URL is arayswim.com and password is seudru

1 Like

Reply

[alexislabrada]

Hi, how would I be able to add multiple subheadings on my slideshow. I want multiple rows of words so like a line break. And then I also put the words to the top right but I need them moved a little bit to the left so that it is centered. Please let me know thank you.

Example:

I want to go shopping

This is nice

and more

Please let me know, thank you.

The URL is arayswim.com and password is seudru

[barcusmrandt]

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:

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

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):

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

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.

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