How to add a back button on refresh theme

Solved
jhghidossi
Excursionist
23 0 0

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

Accepted Solution (1)
made4Uo
Shopify Partner
3384 636 964

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

 

We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Having trouble?  Hire us! For fast reply, shoot us a message using chat at Made4Uo.com

Check how to sell everywhere with Shopify POS. Keep your stuffs private. Refrain from giving unnecessary access to your store.

View solution in original post

Replies 2 (2)
made4Uo
Shopify Partner
3384 636 964

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

 

We are volunteering to help    |      Likes and Accept as Solution  will be much appreciated.✌
Having trouble?  Hire us! For fast reply, shoot us a message using chat at Made4Uo.com

Check how to sell everywhere with Shopify POS. Keep your stuffs private. Refrain from giving unnecessary access to your store.
NoraRF
New Member
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