Hi there, thank you for the solution that I have been able to implement into my specific main product pages it works flawlessly. Would it be possible to have multiple back arrows on my Shopify website to improve consumer usability?
Topic summary
A user seeks help adding a back button to product pages in Shopify’s Dawn theme to return customers to the collections page.
Accepted Solution:
A detailed code implementation is provided involving:
- Creating a new snippet file called “back-button.liquid”
- Adding custom HTML/CSS code for a styled arrow button
- Including the snippet in “main-product.liquid” using
{% include "back-button" %} - The original solution links to “/collections/all”
Key Refinements & Issues:
- Multiple users report the button works but returns to “/collections/all” instead of the previous page
- An improved version uses
onclick="history.back()"orhistory.go(-1)to return to the actual previous page - Some users encounter cursor display issues (ban symbol) when hovering, resolved by setting
href="#" - Additional customization requests include: adding text labels, hiding on mobile devices, changing text color, adjusting positioning, and preventing Google referral returns
Current Status:
The solution is confirmed working by multiple users across different timeframes, though implementation questions persist regarding placement clarity, mobile responsiveness, and specific styling adjustments. Some users report “nesting too deep” errors or repeated text when incorrectly implementing the snippet.