Shopify themes, liquid, logos, and UX
Hi guys, How to create a button to go back to previous page?
My theme is Dawn version 10.0.
Thanks for the help!!
Solved! Go to the solution
This is an accepted solution.
This can be achieved with the help of a custom code.
Please follow the below-provided instructions to fix the same with a custom code :
Here is the Code to include a snippet in "main-product.liquid" file:-
{% include "back-button" %}
Snippet code:-
<style>
.back-btn__wrapper svg{
width: 28px;
height: 20px;
}
.back-btn__wrapper{
margin-bottom: 12px;
}
.back-btn {
background: #fff;
padding: 10px 7px 4px 6px;
}
.back-btn:hover{
border-radius: 26px;
background: #f0f0f0;
}
</style>
<div class="back-btn__wrapper">
<a class="back-btn" href="/collections/all">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="493.578px" height="493.578px" viewBox="0 0 493.578 493.578" style="enable-background:new 0 0 493.578 493.578;" xml:space="preserve">
<g>
<path d="M487.267,225.981c0-17.365-13.999-31.518-31.518-31.518H194.501L305.35,83.615c12.24-12.24,12.24-32.207,0-44.676 L275.592,9.18c-12.24-12.24-32.207-12.24-44.676,0L15.568,224.527c-6.12,6.12-9.256,14.153-9.256,22.262 c0,8.032,3.136,16.142,9.256,22.262l215.348,215.348c12.24,12.239,32.207,12.239,44.676,0l29.758-29.759 c12.24-12.24,12.24-32.207,0-44.676L194.501,299.498h261.094c17.366,0,31.519-14.153,31.519-31.519L487.267,225.981z"/>
</g>
</svg>
</a>
</div>
Observe the changes in "main-product.liquid"
Result:-
This will surely help you with your issue, do let us know if you need any other help.
This is an accepted solution.
This can be achieved with the help of a custom code.
Please follow the below-provided instructions to fix the same with a custom code :
Here is the Code to include a snippet in "main-product.liquid" file:-
{% include "back-button" %}
Snippet code:-
<style>
.back-btn__wrapper svg{
width: 28px;
height: 20px;
}
.back-btn__wrapper{
margin-bottom: 12px;
}
.back-btn {
background: #fff;
padding: 10px 7px 4px 6px;
}
.back-btn:hover{
border-radius: 26px;
background: #f0f0f0;
}
</style>
<div class="back-btn__wrapper">
<a class="back-btn" href="/collections/all">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="493.578px" height="493.578px" viewBox="0 0 493.578 493.578" style="enable-background:new 0 0 493.578 493.578;" xml:space="preserve">
<g>
<path d="M487.267,225.981c0-17.365-13.999-31.518-31.518-31.518H194.501L305.35,83.615c12.24-12.24,12.24-32.207,0-44.676 L275.592,9.18c-12.24-12.24-32.207-12.24-44.676,0L15.568,224.527c-6.12,6.12-9.256,14.153-9.256,22.262 c0,8.032,3.136,16.142,9.256,22.262l215.348,215.348c12.24,12.239,32.207,12.239,44.676,0l29.758-29.759 c12.24-12.24,12.24-32.207,0-44.676L194.501,299.498h261.094c17.366,0,31.519-14.153,31.519-31.519L487.267,225.981z"/>
</g>
</svg>
</a>
</div>
Observe the changes in "main-product.liquid"
Result:-
This will surely help you with your issue, do let us know if you need any other help.
Thanks for your help, it worked!
Hi, This worked fine for me. but i want to adjust the place for the arrow. ( closer to the product image) how can i do it so it is responsive on the same place on any format of mobile/desktop etc. And how can we use this for collections when u go from all collections to one and want to go back? can u also add an arrow for that or do u have any other options to make it as costumer friendly as possible. thanks in advanced
The Same Question here. The button work well, but if u have more then 1-2 product, with many different collection, how u can set it to bring u back, to u last history collection, and not to all !
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025