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

[mimport]

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.

[Jasoliya]

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

[MeganChurchill]

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

[Jasoliya]

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

[MeganChurchill]

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. 

[Jasoliya]

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

[MeganChurchill]

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! 

 

[Jasoliya]

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>

[Drume]

For the future, you can find it in the product template (product.liquid)

Templates >> product.liquid

Had me stumped for a bit too 🙂

[mpgriff90]

@Jasoliya Hello! Is there any way to be able to change what it says? It just showing up with the collection name. Is it possible for it to say "Back to" (Collection)?

[Jasoliya]

Yes you can follow my code it's for back to collection page , if you want back to [collection name] then you can also do by using {{collections.title}} 

[rahul294]

Hi, i have tried this method but i need this to go to the previous visited page , simple back button 

currently its taking me to home page 

[Jasoliya]

have checked for that must need your product page url with collection, send me link of page

[rahul294]

https://effnbeelifestyle.myshopify.com/products/dru-katori

[Jasoliya]

send me store password 

[Fanfiber]

Hi there,

I wanted to ask something, but i fixed the problem myself. Thank you.

[Ange2]

Hi, I'm using boundless and had a similar problem with the new sectioned theme. This code is not there, and when adding it it still doesn't work.

The collection name does not appear in the string of the handle, even though I go through the collection to get the the product.

It seems to be only a problem with the new sectioned version of the Boundless theme. I know this because when I preview my store using an old un-sectioned Boundless theme, the back button appears as expected and the collection name is in the url. When I try the same even with a new, unedited version of the Boundless theme, it only takes you to the homepage, and the url somehow lacks the collection name. Any thoughts on how to fix this?