Thanks! Worked perfectly. Can you please help me make them slightly wider? I’d like them to be as wide as the arrows on my slideshow (they must be in-line).
Please help if possible.
Topic summary
Goal: reposition and enlarge slider arrows for Shopify Dawn collection lists to the screen edges, and remove controls/pagination on mobile.
Key details:
- Store: Dawn theme, preview link provided. Focus on “collection list” (carousel of collections) and “featured collections” (grid/carousel of highlighted collections).
- Slider controls = prev/next arrows; pagination = slide counter below the carousel.
Solutions shared:
- Mobile removal (targeted): CSS added to base.css to hide a specific slider on screens ≤768px by ID (approach is ID-specific).
- Desktop styling: CSS to vertically center arrows on the collection list, increase icon size, and hide the slider counter/pagination.
- Alignment to screen edges: Additional CSS offsets arrows outside the collection container (left/right: -35px), sets icon colors and disabled state; note that on mobile the arrows remain inside.
Outcomes:
- OP confirmed the desktop arrow styling works and looks wider/inline as desired.
- Next request: apply the same control layout to “featured collections.” Helper notes the code should affect all collection list sliders, but prior customizations may be hiding elements (mentions theme.liquid and scattered code) and suggests cleanup.
Status: partially resolved. Desktop arrow placement and pagination removal are done; mobile removal is ID-based; applying the style to featured collections remains open pending theme cleanup.