How to add "Back to Collection" button to the top of the product page?

Solved
Klforres
New Member
6 0 0

Hi there. I am looking for instructions to add a Back to Collection button but it appears some of the instructions are missing/deleted. Can you assist? I have the debut theme.

Thank you

0 Likes
Jasoliya
Shopify Expert
4209 569 1032

On debut theme its already but you add it if not code added.

on section->product-template page 

{% if collection %}
  <div class="text-center return-link-wrapper page-width">
    <a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
      {% include 'icon-arrow-left' %}
      {{ 'products.product.back_to_collection' | t: title: collection.title }}
    </a>
  </div>
{% endif %}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
jlpalumbo
Tourist
9 0 2

I'm trying to add a "back to collection" button on my store. I am using PRESTIGE theme. Anyone have a code for that? I'm having trouble with this.

0 Likes
Jasoliya
Shopify Expert
4209 569 1032

If you can add this type of code because of different them. you can just ad this code to make it working.

<a class="btn" onclick=" window.history.back();">Back</a>

Add this code in section->product-template file where you want it.  

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
jlpalumbo
Tourist
9 0 2

Hi Jasoliya,

Thank you so much for your help. The button works, however, is there any way to make it look the same as my other buttons on my site? On my product page, it's just the word "Back". No button. It's hard to see

0 Likes
Jasoliya
Shopify Expert
4209 569 1032

change to this code:

<a class="Button Button--secondary" onclick=" window.history.back();">Back</a>
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
jlpalumbo
Tourist
9 0 2

Hi Jasoliya,

That works perfect, thanks you so very much! One more question, when I hover over the button, the cursor switches to a text cursor. Is there any way to make the cursor switch to the click cursor? Thanks!

0 Likes
Jasoliya
Shopify Expert
4209 569 1032

remove old and change with this code

 

<a class="Button Button--secondary" style="cursor: pointer;" onclick=" window.history.back();">Back</a>

 

 
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
jlpalumbo
Tourist
9 0 2

And is there any way to change the placement of the button? 

0 Likes
Jasoliya
Shopify Expert
4209 569 1032

that part you have to do your self, based on your page code. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes