Shopify themes, liquid, logos, and UX
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 </section> tag in Sections/ main-product.liquid file.
<div class="back-button grid">
<a class="product-form__submit button button--secondary" href="javascript:history.go(-1)">back</a>
</div>
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
Please hire shopify expert OR conatct to shopify support.
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
Please check following link for help
https://shopify.dev/themes/tools/code-editor
Is there a way to put this in the top left corner of the product page?
Please share your stroe URL !
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.
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:
<div class=”back-button grid”>
<a class=”product-form__submit button button — secondary” href=”javascript:history.go(-1)”>back</a>
</div>
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!
@HamishDavisonIC
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 🤔
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025