Goal: add a “Back” button on Dawn theme product pages that returns users to the prior page/collection.
Solution shared: insert a back-button HTML snippet near the top of Sections/main-product.liquid (just before the closing ) and add CSS in assets/base.css (e.g., .back-button { text-align: center; display: block; }). This creates a centered clickable “Back” element.
Implementation support: a step-by-step guide with screenshots and a YouTube video demonstrates exactly where to paste code and how to save changes. Images and the video are central to following the instructions; code snippets are required.
Results/feedback: several users confirmed it works. One reported the button appears as a plain blue link rather than a styled block, indicating additional CSS is needed for visual styling (beyond display: block and centering).
Open questions:
Status: partially resolved. Core method to add the button is clear; styling, responsiveness, and localization remain unanswered.
Hi,
I’m using the dawn theme and want to add a back arrow button to my product page so that it will go back to the collection. If a back arrow isn’t an option then I would be happy with a back button in a box that matches my theme.
I have tried the coding posted on a different thread but that was just the word back underlined.
Thanks
Please add following code before end of tag in Sections/ main-product.liquid file.
back
Please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.
.back-button{text-align: center; display: block;}
Hope this work.
Thanks!
Thanks for your quick reply.
I’m sorry but I’m very much a beginner when it comes to website building. So I’m not entirely sure where I need to copy/paste the coding you gave.
Do I add a block in the Default Product section?
Thanks
I don’t want to have to instruct an expert for one simple option and I have managed to do everything myself through the Shopify app with the Manage Themes>Customize section so far. I just needed a little more direction as to where you were pointing me to go.
I have found the Edit Code section under the drop down Actions. I’m assuming that the first instruction is also under the Online store> Themes> Edit Code section?
I have added the first lot of coding to the Default Product section under a Custom Liquid Block and moved it up my page. It is appearing under the main image of the product and I would rather it be at the top of the page.
Is anyone else willing to assist with this query?
Thanks
Is there a way to put this in the top left corner of the product page?
Sometimes I feel like people don’t want to be clear on purpose so you have to pay time or money… I really don’t know why people can’t make concise posts like this to explain exactly how to do everything in an accessible way
If this helps you please accept this answer as a solution so others may see it
Video:
OK I’m really sick of how complicated people make things when it comes to Shopify 2.0 tutorials — people should really explain themselves better
You’re going to want to go to your theme customizer and press edit code:
Press the enlarge window option here so you can see things more clearly:
Now type “main-product” into the “search files” option and open main-product.liquid:
Open the main-product.liquid file and click inside it — then type “<section
Press enter one, then below this code:
Paste this code:
back>
Press save, then search for base.css in the Shopify theme editor:
Scroll all the way to the bottom and paste this:
.back-button{text-align: center; display: block;}
We’re done
Thanks!
Hamish
i just tried this code for the back button. though the code works the second half (when you paste it at the bottom of base.css) just leaves you with a blue “back” clickable link. It does not become a block as shown in the video. Any way to make it a block as shown in your video and not just a link
Thanks!
Thank you, this was so helpful! Is there an edit to this that can be made so the back button only displays on desktop and not mobile devices? Thanks again.
Thank you, that worked like a charm.
I do have 3 languages in my website though… any idea on how / where do I insert the translation for the back button?.. I’ve been cracking my head, and just can’t bring myself to find it at the"Translate & Adapt" shopify app 
