Re: How to add a back button on refresh theme

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
3856 717 1201

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 7 (7)

made4Uo
Shopify Partner
3856 717 1201

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
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
17 0 5

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
3856 717 1201

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
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