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

[agorist]

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!

[Jasoliya]

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.

[agorist]

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.

[Jasoliya]

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

[agorist]

Great! Thanks!

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

[Jasoliya · 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;}

[MeganChurchill]

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!

[Jasoliya]

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.

[Coenraad_S]

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:

Any assistance would be greatly appreciated.
Thank you!

[Jasoliya]

As i can see you have already button on top. 

[pasang]

i successfully added back button and it goes back to collection page but the mobile version code seems to be not working. can somebody help me with mobile version code???? i would really appreciate it!!! it broklyn theme

  

[Jasoliya]

Send your store url

[MRLA]

Where does this go? 

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

[Jasoliya]

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

[dantwiss]

Hi,

Do you have the solution for the Debut theme?

[Caterking]

Excellent advice. I managed to get the button in place. But I need some space between the button and the header.

https://www.caterking.se/collections/torringelund-julbord/products/torringelund-stora-julbuffen

What do I put in the css?

Currently I have this:

.return-link-wrapper:first-child .return-link{ padding-left: 10px;	margin-top: 20;}
.return-link-wrapper:first-child  a.return-link{ float: center;}

[Jasoliya]

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.return-link-wrapper { margin-top: 0; margin-bottom: 55px; }

[Caterking]

awesome thanks!

[SanaAhmed]

Hi, 

I copied this code, however i got the below

<translation:en Go back.

How to edit the css and only display Go Back arrow ?

Thank you

[Jasoliya]

Hi @SanaAhmed 

try this:

{% 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' %}
      {{ 'Back to collection' | t: title: collection.title }}
    </a>
  </div>
{% endif %}