Add Back button on top of product page, instead of bottom in Boundless theme

Highlighted
Tourist
14 0 0

Hi,

 

I'm using the Boundless theme.

On the bottom of all product pages, there is a back button that takes you back to the collection of that product.

 

I would like to have this button as well on the top of the product page.

The reason is that I think that it is not user friendly to show the button al the way down the page. The button should be in clear sight and easily accessible.

 

I tried the answers from this question, but none of them are working.

https://community.shopify.com/c/Shopify-Design/How-to-add-quot-Back-to-Collection-quot-button-to-the...

 

Thanks in advance.

0 Likes
Highlighted
Shopify Expert
3897 559 935

Hi @mimport 

Follow this:

1. open section->product-template.liquid->find bellow code and move it just next to {% assign back_url = '/' %}

   <div class="back-button grid">
    <div class="grid__item"></div>
      <a href="{{ back_url }}" class="btn back-button__link">
        <span class="icon icon-arrow-left" aria-hidden="true"></span>
        <span>{{ back_text }}</span>
      </a>
    </div>

So it look like:

{% assign back_url = '/' %}
  {% assign back_text = 'products.product.back' | t %}
  {% if collection %}
    {% assign back_url = collection.url %}
    {% assign back_text = collection.title %}
  {% endif %}
  
  <div class="back-button grid">
    <div class="grid__item"></div>
      <a href="{{ back_url }}" class="btn back-button__link">
        <span class="icon icon-arrow-left" aria-hidden="true"></span>
        <span>{{ back_text }}</span>
      </a>
    </div>

Let me know if you need help

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
4 0 0

Hello,

I am struggling to find the code for this section. Currently, the button on my product page is at the bottom and directs the customer back to my homepage. I was wondering if I could move it to the top and have it redirect back to the collection that the product clicked on was in. My website is bonedryceramics.com and I was hoping to get this fixed before I launch more products on Friday! Please and thank you!

Megan Churchill

0 Likes
Highlighted
Shopify Expert
3897 559 935

Hi @MeganChurchill 

You can find this code in Section->product-template.liquid file by finding  this code:

 <div class="back-button grid">
<div class="grid__item"></div>
<a href="{{ back_url }}" class="btn back-button__link">
<span class="icon icon-arrow-left" aria-hidden="true"></span>
<span>{{ back_text }}</span>
</a>
</div>

Cut it and move it top of page withing below line:

<div class="product grid grid--uniform grid--no-gutters" itemprop="offers" itemscope itemtype="http://schema.org/Offer">

Note: if your product contain collection link then it must redirect to collection page otherwise it will back to home page. 

Url must like that:

www.store.com/collections/collection-name/products/product-name

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
4 0 0

I don't know if I am just missing it but I can't seem to find that section of code in that file. Did I mention that I am on the theme Boundless? Thank you so much for helping me. I am still learning to code so I am very novice. Is there another file I should be looking in? I do see the section to move it to but can't find the section that I need to move. 

0 Likes
Highlighted
Shopify Expert
3897 559 935

Hi @MeganChurchill 

Yes this code is for Boundless theme. If you have not changed your theme code ten it must in Section->product-template.liquid file. You can find at end of file above {% schema %} 

 

image.png

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
Highlighted
New Member
4 0 0

ugh that's so weird. Thank you again for responding and helping me! Unfortunately, this is what that section of code shows for me. That part is just not there? What would you recommend I do? Thanks again! 

 

 Screen Shot 2020-03-12 at 10.15.28 AM.png

0 Likes
Highlighted
Shopify Expert
3897 559 935

If you have not this code then we have to add this code on page:

Add below code in Section->product-template.liquid file: where you want to show back button

{% assign back_url = '/' %}
  {% assign back_text = 'products.product.back' | t %}
  {% if collection %}
    {% assign back_url = collection.url %}
    {% assign back_text = collection.title %}
  {% endif %}

  <div class="back-button grid">
<div class="grid__item"></div>
<a href="{{ back_url }}" class="btn back-button__link">
<span class="icon icon-arrow-left" aria-hidden="true"></span>
<span>{{ back_text }}</span>
</a>
</div>
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