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.
Thanks in advance.
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
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
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
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.
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 %}
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>
User | Count |
---|---|
418 | |
206 | |
144 | |
54 | |
42 |