How can I improve the slideshow on my ecommerce store?

HHloot
Excursionist
20 0 4

Hello, 

I recently saw a shop with a slideshow and liked the way they putted it. So I decided to put a slideshow as well on my shopify store. However it doesn't look the same as I wanted it to look like.

Here is the expectation : 

HHloot_0-1705016584401.png

Here is the one on my shopify store :

HHloot_1-1705016624923.png

I would like to only have the little 3 points without the arrows and the pause button and making the little 3 points transparent in the picture just like in the expectation image.

 

Can someone help me do that ?

Here is the link for my shopify store : https://blenderpure.com

 

Many thanks to anyone who will provide any kind of help.


Best-reguards.

 

 

 

 

Replies 5 (5)

ZenoPageBuilder
Shopify Partner
1052 203 217

Hello @HHloot 👋

In Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.slideshow__controls {
    bottom: 32px !important;
}

.slideshow__controls > button {
    display: none !important;
}

.slider-counter__link .dot {
    background-color: #FFFFFF80 !important;
}

.slider-counter__link--active .dot {
    background-color: #FFFFFF !important;
}

.slider-counter__link--active

The result

Screenshot 2024-01-12 at 09.15.43.png

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HHloot
Excursionist
20 0 4

Thank you so much, this is exactly what I wanted! However I've got a small problem. It seems that when you first land on the page, when you scroll down, arrives a point when you get to the slideshow, where you can move the slideshow picture up down (and it's not supposed to move up and down). Resulting in a mess with where the 3 points of the slideshow are located in the picture. Here is a video to illustrate that.

Video : https://www.veed.io/view/cd57887a-31ea-457e-85c1-4d54e538325c?panel=share

 

Is there a way to fix that ?

 

 

ZenoPageBuilder
Shopify Partner
1052 203 217

Can you share the video file here? Veed requires me to sign up to view the video.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HHloot
Excursionist
20 0 4

Sorry I forgot to make it public, you should have acess to it now.

BSS-Commerce
Shopify Expert
3477 460 516

1. Go to theme -> edit code, find file name "component-slideshow.css"

Add the following code

z-index: 3 -> will make the button on the top of slider and you can click it

 .slideshow__controls {
   position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    border: none;
    z-index: 3;
 }

.slider-button {
  visibility: hidden;
}

The result will be like:

view - 2024-01-15T180931.812.png

mobile

view - 2024-01-15T181013.307.png

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development