Add slider dots on mobile

Store Design
, , , , , , , ,

Topic summary

A user seeks to add slider navigation dots to their carousel on mobile and adjust image display to show portions of adjacent slides (first/second images visible simultaneously).

Proposed Solution:

  • Navigate to Shopify Admin → Online Store → Themes → Actions → Edit Code
  • Locate base.css in the Assets folder
  • Insert provided CSS code

CSS Changes:

  • Positions slider controls at bottom center using absolute positioning
  • Styles dots with white borders
  • Highlights active dot with white background
  • Hides default slider arrow buttons

Status: Solution provided but not yet confirmed as tested or working. The second request (showing adjacent images) remains unaddressed.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

hi,

my site is https://vazluxe.com

I wanted to add 3 slider dots on my caroseul, also if possible to have the first image/2nd show more on mobile like this pic below

77B8C250-B83C-48B7-84C2-AB3F6CD1DAAC.jpeg
77B8C250-B83C-48B7-84C2-AB3F6CD1DAAC.jpeg1170×1669 124 KB

2

Hi there @Luxurymrkt You should try out these following steps and see if they work for you

  1. From your Admin store, go to Online store > Themes > Click Actions > Edit code
  2. Open the Asset folder, and find the base.css file.
  3. Add the code below.
.slideshow__controls.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile {
    position: absolute;
    z-index: 12222;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.slideshow__controls .dot {
    border: #fff 1px solid;
}

.slider-counter__link.slider-counter__link--active .dot {
    background: #fff;
}

.slideshow__controls .slider-button {
    display: none;
}