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

Solved
agorist
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!

Accepted Solution (1)

Accepted Solutions
Jasoliya
Shopify Expert
4519 586 1132

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 convert visitor to buyers ? try This app.
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

View solution in original post

Replies 41 (41)
Jasoliya
Shopify Expert
4519 586 1132

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 convert visitor to buyers ? try This app.
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
agorist
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.

Jasoliya
Shopify Expert
4519 586 1132

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 convert visitor to buyers ? try This app.
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
agorist
Tourist
17 0 0

Great! Thanks!

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

 

Jasoliya
Shopify Expert
4519 586 1132

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 convert visitor to buyers ? try This app.
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
MeganChurchill
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!

Jasoliya
Shopify Expert
4519 586 1132

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 convert visitor to buyers ? try This app.
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
Coenraad_S
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!

Jasoliya
Shopify Expert
4519 586 1132

As i can see you have already button on top. 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
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
pasang
New Member
1 0 0

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

Screen Shot 2020-08-07 at 11.36.02 AM.png

Screen Shot 2020-08-07 at 11.37.23 AM.png

  

Jasoliya
Shopify Expert
4519 586 1132

Send your store url

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
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
MRLA
New Member
1 0 0

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
Shopify Expert
4519 586 1132

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

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
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
dantwiss
New Member
2 0 2

Hi,

Do you have the solution for the Debut theme?

Caterking
Tourist
11 0 1

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
Shopify Expert
4519 586 1132

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; }
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
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
Caterking
Tourist
11 0 1
SanaAhmed
Excursionist
11 1 1

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
Shopify Expert
4519 586 1132

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 %}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
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