Shopify themes, liquid, logos, and UX
How can I add a back button to collection and product pages on refresh theme?
Solved! Go to the solution
This is an accepted solution.
Hi @jhghidossi,
Just follow the instructions below.
1. In your Admin store, click Online store > Themes
2. Go to the theme you want to edit, click Actions > Edit code
3. In your Snippet folder, click Create a new snippet and name it back-button.
4. Open the newly created snippet by opening the back-button.liquid file under the Snippet folder. Paste the code below, then click SAVE
<div class="page-width backButton">
<button class="button" onclick="history.back()">Go Back</button>
</div>
<style>
.backButton {
margin: 2rem auto;
}
</style>
5. Go to the Layout folder, and open the theme.liquid. Find the code {{ content_for_layout }}. Then above it, paste the code below. Click SAVE
{% assign collection_product_templates = "collection, product" %}
{% if collection_product_templates contains template %}
{% render 'back-button' %}
{% endif %}
Please refer to image for placement
This is an accepted solution.
Hi @jhghidossi,
Just follow the instructions below.
1. In your Admin store, click Online store > Themes
2. Go to the theme you want to edit, click Actions > Edit code
3. In your Snippet folder, click Create a new snippet and name it back-button.
4. Open the newly created snippet by opening the back-button.liquid file under the Snippet folder. Paste the code below, then click SAVE
<div class="page-width backButton">
<button class="button" onclick="history.back()">Go Back</button>
</div>
<style>
.backButton {
margin: 2rem auto;
}
</style>
5. Go to the Layout folder, and open the theme.liquid. Find the code {{ content_for_layout }}. Then above it, paste the code below. Click SAVE
{% assign collection_product_templates = "collection, product" %}
{% if collection_product_templates contains template %}
{% render 'back-button' %}
{% endif %}
Please refer to image for placement
Hi! I followed these instructions to get a back button for my site and it worked great!! I have then decided I didn't want the back button anymore and tried to delete it and now receive error: "Liquid error (layout/theme line 286): Could not find asset snippets/back-button.liquid"
Do you know how I might be able to fix it by any chance? So desperate for help.
So this was exactly what I was looking for but in my theme.liquid there is no {{ content_for_layout }}. 😕
(Origin Theme)
Any other options?
I have the same issue, no {{ content_for_layout }}
it does not look like anyone is monitoring this discussion any longer. 😫
If you don't have the {{ content_for_layout }}, just place the code the line below the <body tag. You can find the <body tag inside your theme.liquid file under the layout folder
Hello, thank you for this - I have just used on my website with the Refresh theme!
However, there is quite a lot of space above & below 'Go Back' on the product & collection pages. I wonder if there is a way to customise the size of the section in which the 'Go Back' button appears?
Thanks a lot!
Hello! I wonder how we can insert a back button on all pages, and not only the product and collections pages?
I also need to change the colour and layout of the button. How do I do that?
Thanks in advance!
Nora
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024