How to add slider in Related products in Dawn

Technical Q&A

Topic summary

A user wants to transform the Related Products section in their Dawn theme from a static grid layout into a slider/carousel format.

Current Status:

  • The user shared screenshots showing the desired slider appearance versus their current grid display
  • They’re seeking implementation guidance for this layout change

Proposed Solutions:

  • Add a slider library (JavaScript-based carousel component)
  • Incorporate necessary CSS and JavaScript files into the theme
  • Modify the Related Products section code to integrate the slider functionality
  • Apply custom CSS for styling adjustments

Outstanding Need:

  • The original poster requested detailed step-by-step instructions with specific code examples, indicating they have limited technical experience with this type of customization
  • No complete implementation code has been provided yet
Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

NOT1_0-1724657556139.png
NOT1_0-1724657556139.png352×400 58.8 KB

How can i change this like this (as how i have for collection):

NOT1_1-1724657556090.png
NOT1_1-1724657556090.png316×400 73.8 KB

2

@NOT1 Yeah you can do this by putting slider code in the you may also like section.

3

Hi,

Add a Slider Library
Add CSS/JS Files
Edit the Related Products Section
Initialize the Slider

Code example

Use CSS for style

4

I dont know much about these can u pls explain me step by step and give the codes