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.
Topic summary
A user is customizing their Shopify homepage slideshow, initially wanting to reposition navigation arrows from underneath the slideshow to the sides of the images to eliminate wasted space.
Progress made:
- Successfully moved arrows to desired position on desktop
- Encountered secondary issue: extra empty space remained below images after repositioning
Current problem:
After applying CSS code to remove the extra space and reposition arrows, the arrows now display correctly on desktop but have disappeared from mobile view.
Solutions offered:
- Multiple CSS code snippets provided to add to theme.liquid file above tag
- Alternative simpler CSS solution suggested using absolute positioning for slideshow controls
Status: Unresolved - the user still needs a solution that works across both desktop and mobile views. The discussion includes code snippets and before/after screenshots demonstrating the changes.
1 Like
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
Hello there
Please send me your store URL and password, so I can check it and update you.
Hey @Parts2
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
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
Hey @Parts2
Apologies for the confusion, remove the previous code and add this new code above in the end of theme.liquid file.
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
Just use
.slideshow__controls.slider-buttons { position: absolute; }