How do I add product slider (Refresh Theme)

Shopify Discussion
,

Topic summary

A user seeks guidance on implementing a product slider on their Shopify store’s product page using the Refresh theme. They’ve included a screenshot showing the desired placement.

Solution Provided:

Another user offers a code-based approach:

  • HTML Structure: Add slider markup to the product template, including container divs for slides and navigation buttons (previous/next)
  • CSS Styling: Apply styles for positioning, transitions, and button formatting

Key Technical Elements:

  • Flexbox layout for slide arrangement
  • CSS transforms for smooth transitions (0.3s ease)
  • Absolute positioning for navigation controls
  • Responsive width settings (100%)

Status: The discussion appears to provide a starting implementation, though the code snippets are partially incomplete. No follow-up confirms whether the solution was successfully implemented.

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

Dear Pros,

I need help on adding product slider onto my product page as shown and drawn. Please let me know how do I add it in coding. Thank you!

Screenshot 2024-08-29 at 1.46.58 PM.png
Screenshot 2024-08-29 at 1.46.58 PM.png2806×1312 455 KB

2

Hi,

Add HTML for the Slider at the product template

Code example

Add CSS for Styling

CSS example

.product-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.3s ease;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}