Hey , i’m using dawn theme & want to remove arrows from product page thumbnail images on mobile devicea as its not looking good , please help me with the code,…
See screenshot for reference…
My Store Link: https://mansaroverfurnishings.com/
Topic summary
A user running the Dawn theme wants to remove navigation arrows from product page thumbnail images on mobile devices, as they negatively impact the visual appearance.
Solution Provided:
Another user shared CSS code to hide the arrows by targeting the .icon-caret class:
.icon-caret {
display: none;
}
This code should be added via: Admin > Online Store > Themes > Customize > Product Page > Custom CSS.
Follow-up Issue:
A third user reported that while the code successfully removes thumbnail arrows, it also unintentionally hides arrows in collapsible row sections. They requested a modified version that targets only the thumbnail image arrows while preserving collapsible row functionality.
Status: The original issue is resolved, but a more specific CSS selector is needed to avoid affecting other UI elements.
Go into your admin > online store > themes > customize > navigate into a product page > click into the main ‘product’ section from the left-hand menu > copy and paste the following coding into the ‘custom css’ settings on the right-hand side, then save changes:
.icon-caret {
display: none;
}
1 Like
thanks!!
