pagination

Shopify Discussion

Topic summary

A user is customizing the Dawn theme’s image slider by attempting to move pagination dots inside the slider images rather than their default position.

Solutions Provided:

Two community members offered CSS code solutions:

  • First approach: Modifies .slideshow__controls positioning to absolute with bottom alignment and removes borders
  • Second approach: Centers the controls at the bottom using transform properties and adjusts the slideshow component to relative positioning

Both solutions involve editing the theme’s CSS file (base.css, style.css, or theme.css) through the Shopify admin code editor.

Outcome:

The original poster thanked contributors for their help, suggesting the issue was resolved. One respondent included a visual example showing the expected result with pagination dots positioned inside the slider area.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

hi there i creating a store and i have image slider in dawn theme i want pagination dots to be inside image can anyone help me how to so it

1 Like
2

Hi @Nabeelshakil

Please share your store URL so I can check

3
4

Hi @Nabeelshakil ,

  1. Go to Online Store > Themes > Actions > Edit Code > base.css

  2. Add below code in base.css file

.slideshow__controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border: 0;
}
button.slideshow__autoplay.slider-button {
    position: unset !important;
}
5

Hi @Nabeelshakil

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.slideshow__controls.slideshow__controls--top.slider-buttons {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
}

slideshow-component.slider-mobile-gutter.mobile-text-below {
    position: relative;
}
.slideshow__controls, .slideshow__autoplay.slider-button {
    border: 0;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
6

thanks for the help