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

Solved
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

  

0 Likes
Shopify Expert
4038 563 967

Send your store url

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
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 %}
0 Likes
Shopify Expert
4038 563 967

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

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
New Member
1 0 0

Hi,

Do you have the solution for the Debut theme?

0 Likes
Tourist
10 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;}

 

0 Likes
Shopify Expert
4038 563 967

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.
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
Tourist
10 0 1

awesome thanks!

0 Likes
Tourist
10 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

0 Likes
Shopify Expert
4038 563 967

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.
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