How can I customize pagination on Dawn theme?

caskincare
Tourist
5 0 1

I am trying to move the pagination dots that are below the slideshow images and overlay them at the bottom of the slideshow images. I would like to change from what I have now to something like the attached. I've attached my current slideshow and what our goal is. I am using the Dawn theme.

Replies 7 (7)

AliReviews
Shopify Partner
773 90 356

Hello @caskincare ,

 

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code

Go to product-template.liquid file -> add this code at the bottom of page

.slideshow-container {
  position: relative;
}

.slideshow {
  /* Slideshow styles */
}

.pagination-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px; /* Adjust as needed */
  display: flex;
  justify-content: center;
}

.pagination-dots span {
  width: 10px; /* Adjust the size of the dots */
  height: 2px; /* Adjust the thickness of the dots */
  margin: 0 5px; /* Adjust the spacing between the dots */
  background-color: #000; /* Adjust the color of the dots */
  cursor: pointer;
}

Save changes

 

Hope this can help.

Ali Reviews team.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!
caskincare
Tourist
5 0 1

@AliReviews, I do not see the file "product-template.liquid" in Dawn theme. Is there another name for the file you are talking about? Thank you. 

Dale_Van_Den_He
New Member
17 0 0

Question, will this coding move the Pagination dots to the inside of the image for both the desktop and mobile version of the slide header?

NomtechSolution
Astronaut
1245 113 152
  1. Add the following CSS code to override the default styles and position the pagination dots at the bottom of the slideshow:

 

.slideshow-pagination {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

 

caskincare
Tourist
5 0 1

@NomtechSolution I added this code to "CUSTOM CSS" section in the slideshow editor while customizing the site. Nothing happened. Is there where I'm supposed to add the code?

scottdbarrera
Visitor
1 0 0

Use this instead 

 

.slideshow__controls{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
Dale_Van_Den_He
New Member
17 0 0

Question, will this coding move the Pagination dots to the inside of the image for both the desktop and mobile version of the slide header?