Add left & right arrow overlays on top of my slideshow (Dawn theme)

Solved

Add left & right arrow overlays on top of my slideshow (Dawn theme)

Multicoloruni
Tourist
10 0 0

Hi, I want to add left & right arrow overlays on top of my slideshow (Dawn theme)

And remove the paginations below. I've looked at ALL of the posted solutions and they're all outdated. Every suggested code i've tried is not working...

Thank you!

Accepted Solution (1)
Vinsinfo
Shopify Partner
352 125 118

This is an accepted solution.

@Multicoloruni Please replace the code with below code. Let me know whether it works for you.

 

.slideshow__controls {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    justify-content: space-between !important;
}
.slider-counter {
    display: none !important;
}
.slider-button {
    background-color: #ffffff5e;
    width: 24px !important;
    height: 24px !important;
    margin: 0px 10px;
    z-index: 10;
}
.slider-button svg{
    display: block !important;
}

 

 

  

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 10 (10)

iCart_App
Shopify Partner
581 58 108

Hello @Multicoloruni ,

Please check this it might be helpful to you.

https://community.shopify.com/c/shopify-design/dawn-slideshow-add-arrow-overlays-amp-remove-paginati...

iCart Cart Drawer Cart Upsell App


- If you find the solution helpful, please accept and like it
- To learn more visit www.identixweb.com

Small_Task_Help
Shopify Partner
536 17 37

Hi,

 

In the Slideshow Section, add the navigation arrow

Example of code

<div class="slideshow-navigation">
  <button class="slideshow-prev" aria-label="Previous Slide">
    &#10094; <!-- Left arrow character or custom SVG -->
  </button>
  <button class="slideshow-next" aria-label="Next Slide">
    &#10095; <!-- Right arrow character or custom SVG -->
  </button>
</div>

Add javascript functionality and use CSS for hiding pagination and give style to arrow

 

If you still need help you can contact us (details at signature)

Click here to Contact and Get Shopify Store Help
E-mail - hi@ecommercesmalltask.com
We are Shopify Experts   from Ecommerce Small Task Company.
Multicoloruni
Tourist
10 0 0

Hi @Small_Task_Help thanks for this. but nothing seem to change when adding the code into de slideshow section. please see screenshot.

Captura de pantalla 2024-07-05 a las 11.29.35.png

Small_Task_Help
Shopify Partner
536 17 37

Let us check your backend from our side. If you want please get in touch with us (details at signature)

Click here to Contact and Get Shopify Store Help
E-mail - hi@ecommercesmalltask.com
We are Shopify Experts   from Ecommerce Small Task Company.

Vinsinfo
Shopify Partner
352 125 118

@Multicoloruni Please follow below steps to overlays left & right arrow on slideshow and remove pagination counter. Let me know whether it is helpful for you.

 

1. From admin go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Click "Slideshow".
Vinsinfo_0-1720165171196.png
4. Then scroll down and paste the below code in the "Custom CSS" field and save changes.

 

.slideshow__controls {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    justify-content: space-between !important;
}
.slider-counter {
    display: none !important;
}
.slider-button {
    background-color: #ffffff5e;
    width: 24px !important;
    height: 24px !important;
    margin: 0px 10px;
}

 

Vinsinfo_1-1720165179492.png

 

Result will be like,
Vinsinfo_2-1720165226528.png

 

 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
Multicoloruni
Tourist
10 0 0

Thank you so much for this @Vinsinfo , however when applying the code, the dots from the bottom disappear but the arrows appear as little squares which are not clickable. please see attached screenshot. i also tried changing the color code so that they would be a bit more visible but this doesn't seem to work either. do you think it can be fixed? thanks so much in advance.

Captura de pantalla 2024-07-05 a las 11.22.57.png

Vinsinfo
Shopify Partner
352 125 118

@Multicoloruni Please add the code and share your store URL, we will check insight and share you the solution.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
Multicoloruni
Tourist
10 0 0

Hi again @Vinsinfo, thank you, here's the website:

Vinsinfo
Shopify Partner
352 125 118

This is an accepted solution.

@Multicoloruni Please replace the code with below code. Let me know whether it works for you.

 

.slideshow__controls {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    justify-content: space-between !important;
}
.slider-counter {
    display: none !important;
}
.slider-button {
    background-color: #ffffff5e;
    width: 24px !important;
    height: 24px !important;
    margin: 0px 10px;
    z-index: 10;
}
.slider-button svg{
    display: block !important;
}

 

 

  

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
Multicoloruni
Tourist
10 0 0

Wow, this is awesome!!! Thank you so much @Vinsinfo it's exactly what I had in mind! Thank you!!!

Captura de pantalla 2024-07-06 a las 11.12.00.png