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>