Change number counter to dots

[golazocases]

hi i want to change the number counter underneath the collections list widget on mobile to dots slider. see attached.

URL golazocasesuk.myshopify.com

theme: trade

[Sweans]

Hi @golazocases ,

Please see the solution below:

1. In your Shopify admin, navigate to “Online Store” under Sales Channels. Click the three dots next to the theme you wish to edit, then select “Edit Code”.

2. Next you can find Main.css/theme.css/base.css/style.css(it will be based on your theme file)

Add this css code:

@media screen and (max-width: 767px) {
      .pagination__list li {
        width: 10px !important;
        height: 10px;
        background: #000;
        border-radius: 100%;
        max-width: 10px;
      }
      .pagination__list li a {
        font-size: 0;
        height: auto;
      }
      .pagination__item--current::after, .pagination__item:hover::after {
        content: none;
      }
      .pagination__item.pagination__item--next.pagination__item-arrow.link.motion-reduce {
        top: -10px;
        left: -25px;
      }
      .pagination__item.pagination__item--prev.pagination__item-arrow.link.motion-reduce {
        top: -10px;
        right: -25px;
      }
    }

Result:-

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[golazocases]

Hi, I want the pagination dots only for the collections list widget on mobile view. So please can you change the coding so it doesn’t effect anything else such as the product page.

Also can you code the pagination for the collections list on mobile so it looks like this → see video link: https://streamable.com/e9g70w

So that the dots are different for selected vs not selected slides.

Hope this makes sense.

[EBOOST]

Hi @golazocases ,

If you didn’t have any customize on this widget. I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Download code here https://github.com/eboost10/2640367/blob/main/2642389/sections/collection-list-dots.liquid

3. Sections/collection-list.liquid

4. Replace code in the file by Code that you have just downloaded at step 2.

[Sweans]

Hi @golazocases ,

Please modify the code as below:

@media screen and (max-width: 767px) {
      
      .section-template--23286665380185__product-grid-padding .pagination__list li a {
        width: 10px !important;
        height: 10px;
        background: #919090;
        border-radius: 100%;
        max-width: 10px;
        font-size:0;
      }
      .section-template--23286665380185__product-grid-padding .pagination__item.pagination__item--prev.pagination__item-arrow.link.motion-reduce {
        background: none;
      }
      .section-template--23286665380185__product-grid-padding .pagination__item--current::after, .pagination__item:hover::after {
        content: none;
      }
      .section-template--23286665380185__product-grid-padding .pagination__item.pagination__item--current.light {
        width: 16px !important;
        height: 16px;
        background: #fff;
        border-radius: 100%;
        max-width: 16px;
        font-size: 0;
        border: 3px solid #000;
      }
      .section-template--23286665380185__product-grid-padding .pagination__item.pagination__item--next.pagination__item-arrow.link.motion-reduce {
        top: 0px;
        left: -25px;
      }
      .section-template--23286665380185__product-grid-padding .pagination__item.pagination__item--prev.pagination__item-arrow.link.motion-reduce {
        top: 0px;
        right: -25px;
      }
    }

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[golazocases]

Thanks, this has worked, I really like how it looks on the store. But one minor change I would like, how can I remove the thin seperator lines above and below the dots?

[EBOOST]

Hi,

I updated code you can download new code here to update https://github.com/eboost10/2640367/blob/main/2642389/sections/collection-list-dots.liquid

[golazocases]

Thanks I appreciate all of your help! Could you check out my other post regarding changing the filter to a dropdown list?

[golazocases]

Hey, I like the dots slider you did for my collections list on the home page, could you please do the same for product images?

[EBOOST]

Hi,

I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Download code here https://github.com/eboost10/2640367/blob/main/2642389/sections/product-media-gallery-dots.liquid

3. Sections/product-media-gallery.liquid

4. Replace code in the file by Code that you have just downloaded at step 2.

[golazocases]

Your work is amazing thankyou, I have a couple other requests.

1. On the home page the dots slider for the collections seems to be incorrect as you can only swipe three times but there is 4 dots.

2. Can we also add the dots slider to the featured collection on the home page for the kit cases?

3. Is it possible to slightly change the style of the slider to the same as https://debutifydemo.myshopify.com/ and with no arrows (see attached)

[golazocases]

@EBOOST please could you look at this? thanks

[EBOOST]

Hi,

1. On the home page the dots slider for the collections seems to be incorrect as you can only swipe three times but there is 4 dots.

→ you can download code here https://github.com/eboost10/2640367/blob/main/2642389/sections/collection-list-dots.liquid to replace code in sections/collection-list.liquid file

2. Can we also add the dots slider to the featured collection on the home page for the kit cases?

→ You can download code here https://github.com/eboost10/2640367/blob/main/2642389/sections/featured-collection-dots.liquid to replace code in sections/featured-collection.liquid file

3. Is it possible to slightly change the style of the slider to the same as https://debutifydemo.myshopify.com/ and with no arrows (see attached)

→ add code below to end of file Assets/base.css

slideshow-component .slider-counter--dots button span {
  display: none!important;
}
slideshow-component .slider-counter--dots button:hover {
  opacity: 1;
}
slideshow-component .slider-counter--dots button{
  font-size: 0;
  opacity: 1;
  line-height: 1;
  margin: 0 5px; 
}
slideshow-component .slider-counter--dots button::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 100%;
  background-color: rgba(var(--color-foreground),.2) !important;
  transform: scale(.5);
  transition: all .5s;
  display: block;
}
slideshow-component .slider-counter--dots button:focus {
  outline: none;
}
slideshow-component .slider-counter--dots button.slider-counter__link--active{
  opacity: 1;
}
slideshow-component .slider-counter--dots button.slider-counter__link--active:before {
  content: "trip_origin";
  background-color: transparent !important;
  transform: scale(1);
  border: 3px solid rgba(var(--color-foreground),.2) !important;
}

[golazocases]

Hey thanks for this. Couple changes if that’s okay. The arrows are still on the slider and so are the two lines above and below the slider - can we remove these? Also can we have the colour of the buttons more suited to the colour of the store? they are light grey currently.

[golazocases]

also on desktop the slider seems to have disrupted the image sizes of the featured collection

[EBOOST]

Hi,

You can add code below to end of Assets/base.css to remove it

.slider-buttons {
  border: none;
  margin: 0 0 30px;
}

To update color you can refer screenshot below to find code after replace color that you would like to change.

[golazocases]

Hey, that code still isnt working - the border and arrows are still visible.

The slider is still effecting the size of some of the products on desktop - could you help this?

Thanks!

[golazocases]

Hey @EBOOST please help with this as I am launching my store soon

[EBOOST]

Hi,

You try download new code to update.

https://github.com/eboost10/2640367/blob/main/2642389/sections/collection-list-dots.liquid
https://github.com/eboost10/2640367/blob/main/2642389/sections/featured-collection-dots.liquid

[golazocases]

Hey @EBOOST how can I get these dots added to the featured collections product slide on my store? Could you also remove the arrows next to the dots please.

Thanks!