How to add a back button on refresh theme

jhghidossi · ‎06-24-2022

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

made4Uo · ‎06-24-2022

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

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

made4Uo · ‎06-24-2022

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

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 · ‎10-26-2023

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 · ‎11-01-2023

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 · ‎03-17-2024

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

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

made4Uo · ‎03-17-2024

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 · ‎03-22-2024

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 · ‎02-25-2023

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

How to add a back button on refresh theme

How to add a back button on refresh theme

Community Blog Articles