Hello, I would like to add a back button in my products pages to take the customer back to the collections page - is anyone able to help?
Thank you,
Sheriden
(I’m using Dawn theme. My website is www.oceangroveoutfithire.com.au and password is OGOUTFITHIRE).
Hi @Sheriden_Webb ,
I found this article hope can help
Hi @Sheriden_Webb ,
We need to customize the code to add the back button on the product pages.
Hello @Sheriden_Webb ,
This can be achieved with the help of a custom code.
Please follow the below-provided instructions to fix the same with a custom code :
Here is the Code to include a snippet in “main-product.liquid” file:-
{% include “back-button” %}
Snippet code:-
.back-btn__wrapper svg{ width: 28px; height: 20px; } .back-btn__wrapper{ margin-bottom: 12px; } .back-btn { background: #fff; padding: 10px 7px 4px 6px; } .back-btn:hover{ border-radius: 26px; background: #f0f0f0; }Observe the changes in “main-product.liquid”
Result:-
This will surely help you with your issue, do let us know if you need any other help.
All the best,
CedCommerce
Thank you so much @Cedcommerce - this worked and I love the look of the button. Appreciate your help!!
We’re glad it helped you @Sheriden_Webb keep growing
All the best!!
It worked perfectly for me.
What if i wanna add the same arrow to all my “pages”?
Hi I did this bu the return button goes back to an ‘all’ product page rather than the one that it came from (ie instead of going back to dresses catalog goes back to an all products).
Do you have a fix for this?
hi,
i used the above code to create a back button, but i substituted this line
because i just want to go back to the previous page. It works but, when i move the cursor over the button the circle with a line (ban symbol) through it appears as the mouse is hovered over the arrow. I have tried
which produces a page not found error. Any suggestions for eliminating the BAN sign?
Ceschnee, Thanks so much for posting this. What a coincidence I needed this 11 hours after you posted. I am using as you described and it works perfectly, I am not even getting the ban issue that you describe. If I hover over the arrow nothing happens except the grey background illuminates and I can click it. Are you on a different OS / browser? It works as expected on Win 11, Chrome, and Edge and iOS w/ safari. Anyways, this is mostly to just say thanks for posting - it solved my problem.
@ceschnee , to eliminate that cursor icon, you must give an empty value to the href property. In this case, the empty value is “#”, which is an anchor to the given page pointing nowhere. So the code you need:
Thank you, I’m not used to coding so wondering if you could give me detail instructions on ‘where’ the code goes. Screengrabs would be even better.
Thank you.
@GLS3 : If you have done everything by the proposed solution, then you should just replace the 19th line of back-button.liquid to the line of code that is in my previous comment.
Perfect set of instructions. The only thing that threw me off was I copied and pasted the whole filename and it added the liquid extension twice. Thank you solution provider and thank you for asking this question!
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?
how do i add a back buttton to crave theme?
Having trouble reading your Observe the changes in "main-product.liquid"sc screen shot, can you please repost?
I tried to do this with our Dawn theme but nothing happened. Do you have any idea as to why?
I have updated this a bit for when clicked on the back button it will take you to the previous page. this can be used on any theme.
Here is the Code to include a snippet in “main-product.liquid” file:-
{% include “back-button” %}
Snippet code:-
.back-btn__wrapper svg { width: 28px; height: 20px; } .back-btn__wrapper { margin-bottom: 12px; } .back-btn { background: #fff; padding: 10px 7px 4px 6px; } .back-btn:hover { border-radius: 26px; background: #f0f0f0; }this the error code I get: Liquid error (snippets/back-button line 1): Nesting too deep Snippet code: