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

mimport
Tourist
14 0 1

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.

Replies 16 (16)
Jasoliya
Shopify Expert
4519 586 1131

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

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

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

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

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

Jasoliya
Shopify Expert
4519 586 1131

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 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
Drume
Tourist
8 0 3

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

Templates >> product.liquid

Had me stumped for a bit too 🙂

mpgriff90
Excursionist
25 0 13

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

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

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

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

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

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

send me store password 

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

Hi there,

 

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

Ange2
Shopify Partner
7 0 1

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?