Shopify themes, liquid, logos, and UX
I am trying to add a back button to my product pages, and various pages I have added myself but am having no luck. How can I add a back button that I can style to my product pages? And how can I add the same back button to custom pages that I have added myself?
My store is SeaSide Athletics – SeaSideAthletics
Password: 0223
And here are screenshots of where I would like to add the buttons
Solved! Go to the solution
This is an accepted solution.
Hello @SeaSideATH,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file main-product.liquid and find this "<div class="page-width">"
Step 3: Paste the below code -> Save
<button class="back-button">Back</button>
<script>
document.querySelector('.back-button').addEventListener('click', function() {
window.history.back();
});
</script>
<style>
.back-button {
background-color: #007bff;
color: #ffffff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
.back-button:hover {
background-color: #0056b3;
}
</style>
Thanks!
Hello @SeaSideATH,
You want to like this button?
Hey,
yea that’s the kind I’m looking for
This is an accepted solution.
Hello @SeaSideATH,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file main-product.liquid and find this "<div class="page-width">"
Step 3: Paste the below code -> Save
<button class="back-button">Back</button>
<script>
document.querySelector('.back-button').addEventListener('click', function() {
window.history.back();
});
</script>
<style>
.back-button {
background-color: #007bff;
color: #ffffff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
.back-button:hover {
background-color: #0056b3;
}
</style>
Thanks!
Hey,
Thanks that worked for the product page, do you have any idea how I could add that to a custom page?
I would think I just put the code in the same place, but the pages are only in my code as json not liquid.
Thanks
You want to add a code into a custom page? @SeaSideATH
Yea, like for example I have a page for FAQ and would like to add a back button to that. But in my code all I have is FAQ.json
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024