Add custom section for collection slider in your store:
Topic summary
A user created custom code for a clickable collection slider but encountered design issues. The slider displays collection images in a grid format but needs to function as a swipeable carousel with pagination dots.
Technical Details:
- The implementation uses Slick Carousel library with custom HTML/CSS/JavaScript
- Initial problem: broken image URLs and missing pagination dots
- Target behavior: display 3 images side-by-side with swipe/arrow navigation on both mobile and desktop
Solutions Provided:
Pagination dots: Add dots: true parameter to the Slick initialization code
Design styling: Custom CSS was added to style the slider, slides, and pagination dots (including active state indicators)
Image issues: Broken images traced to incorrect Shopify CDN URLs
Resolution:
The original poster successfully resolved the styling issues by implementing the suggested CSS code for dots and slider appearance. Additional resources for creating custom collection slider sections were shared as alternatives.