Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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
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
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
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!
You're welcome! I'm glad to hear it worked. Wishing you a great week.
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
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:
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024