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

Solved
Highlighted
Tourist
17 0 0

Hello everyone,

 

I was wondering if anyone knew how to add the back to collection button to the top of the product page as well as the bottom. As it is right now, it is only at the bottom of the page and while I hope most people go all the way through the page, I think it would be better for user experience to not have to go all the way to the bottom to go back and browse other products in a collect. Beside they probably don't even know to go all the way to the bottom to find the button. Any help would be much appreciated!

0 Likes
Highlighted
Shopify Expert
3816 557 908

Hi @agorist 

Find this button on Section->product-template.liquid and paste on top of this page.

if cant find let me know or send store url.

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

Hey yeah I have looked, but I cannot find the code for the button.

 

https://theblueshields.com/collections/baby-blue-shields/products/the-little-rascals-pink-cyan

 

Here is one of the product pages for my store. Sawton is the password.

0 Likes
Highlighted
Shopify Expert
3816 557 908

You can fine bellow code in Section->product-template.liquid file 

Move it to top and adjust css to look it perfect 

{% 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.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
17 0 0

Great! Thanks!

How do I move it ot the left side of the top? Right now it is centered.

 

0 Likes
Highlighted
Shopify Expert
3816 557 908

This is an accepted solution.

Add this css in Asset->theme.scss file at bottom:

.return-link-wrapper:first-child .return-link{ margin-top: 0;    padding-left: 55px;}
.return-link-wrapper:first-child  a.return-link{ float: left;}
Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
New Member
4 0 0

Hello,

I was wondering if there was a way to change my button on a product page from directing a customer back to the homepage to direct them back to the collection they selected the product on. My website is bonedryceramic.com

Thanks!

0 Likes
Highlighted
Shopify Expert
3816 557 908

HI @MeganChurchill 

So you want to change back button to collection page? if so you can use this code in Section->product-template.liquid file;

{% 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 %}

Note: for debut theme.

 

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
1 0 0

Hi there

I am busy with a store and would like a 'back to collection' button top centre. I have pasted the code you supplied, but I'm seeing this:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

All I require is for it to look like this with no mouse-over, just a clickable black button:

B.jpg

Any assistance would be greatly appreciated.
Thank you!

0 Likes
Highlighted
Shopify Expert
3816 557 908

As i can see you have already button on top. 

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