What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Arrows underneath slideshow

Solved

Arrows underneath slideshow

Parts2
Tourist
16 0 2

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. 

Accepted Solution (1)
Moeed
Shopify Partner
6367 1725 2088

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:

Moeed_0-1728126726844.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


View solution in original post

Replies 10 (10)

Moeed
Shopify Partner
6367 1725 2088

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

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


Parts2
Tourist
16 0 2

arrows.png

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

Moeed
Shopify Partner
6367 1725 2088

Hey @Parts2 

 

Share your website link please.

 

 

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


Parts2
Tourist
16 0 2

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

 

https://store.batteliniwreckersales.com/

Moeed
Shopify Partner
6367 1725 2088

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:

Moeed_0-1728126145274.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


Parts2
Tourist
16 0 2

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 

Moeed
Shopify Partner
6367 1725 2088

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:

Moeed_0-1728126726844.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


Parts2
Tourist
16 0 2

That helped for the desktop view but now the arrows disappeared from the mobile view

devcoders
Shopify Partner
572 81 143

Hello there

Please send me your store URL and password, so I can check it and update you.

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
Parts2
Tourist
16 0 2