Solved

How to add a back button on refresh theme

jhghidossi
Excursionist
39 0 1

How can I add a back button to collection and product pages on refresh theme?

Accepted Solution (1)

made4Uo
Shopify Partner
3804 713 1124

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

made4Uo_0-1656102545564.png

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Replies 7 (7)

made4Uo
Shopify Partner
3804 713 1124

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

made4Uo_0-1656102545564.png

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Jordan-nw92
Shopify Partner
5 0 0

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.

 

mellex
Excursionist
16 0 2

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?

SR_snrfarmville
Visitor
1 0 1

I have the same issue, no {{ content_for_layout }}

it does not look like anyone is monitoring this discussion any longer. 😫

made4Uo
Shopify Partner
3804 713 1124

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

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
ronniespencer1
Tourist
7 0 3

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!

NoraRF
Visitor
1 0 0

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