Shopify themes, liquid, logos, and UX
I have a slideshow at the top of my homepage and it has the navigation arrows underneath. Is there a way to bring the arrows into the middle of the slideshow and on either side of the screen? I don't like how the navigation arrows look underneath the images, it's wasted space.
Solved! Go to the solution
This is an accepted solution.
Hey @Parts2
Apologies for the confusion, remove the previous code and add this new code above </body> in the end of theme.liquid file.
<style>
@media screen and (min-width: 768px) {
.slideshow__controls.slider-buttons {
position: absolute;
}
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hey @Parts2
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
I hide the dots and the play/pause button but I would like to bring the arrows up so they render on either side of the image
Hey @Parts2
Share your website link please.
I figured out the arrows but now i have extra empty space underneath the images. Is there a way to reduce the size of the slidershow container so that there isn't wasted space under the images
Hey @Parts2
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
slideshow-component:not(.page-width) .slider-buttons {
display: none !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
that gets rid of the extra space but now the arrows are gone completely. i want the arrows to be on either side of the slideshow images
This is an accepted solution.
Hey @Parts2
Apologies for the confusion, remove the previous code and add this new code above </body> in the end of theme.liquid file.
<style>
@media screen and (min-width: 768px) {
.slideshow__controls.slider-buttons {
position: absolute;
}
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
That helped for the desktop view but now the arrows disappeared from the mobile view
Hello there
Please send me your store URL and password, so I can check it and update you.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024