How to add 'back' button on product page in Dawn Theme

[Sheriden_Webb]

Hello, I would like to add a back button in my products pages to take the customer back to the collections page - is anyone able to help? 

Thank you,

Sheriden 

(I'm using Dawn theme. My website is www.oceangroveoutfithire.com.au and password is OGOUTFITHIRE). 

[Dan-From-Ryviu]

Hi @Sheriden_Webb,

I found this article hope can help 

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-...

[SmallTask]

Hi @Sheriden_Webb,

We need to customize the code to add the back button on the product pages.

[Cedcommerce · Accepted solution]

Hello @Sheriden_Webb,

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 :

• Go to your Shopify admin > Online store > Themes
• Select Dawn theme > Click on action > Edit code
• Create a snippet file called "back-button.liquid" in the Snippet folder
• Enter the below code in that file
• Go to the Sections folder and open "main-product.liquid" file
• Include that snippet using the code (refer to the screenshot)

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"

image.png

Result:-

image.png

This will surely help you with your issue, do let us know if you need any other help. 

All the best, 

CedCommerce

[Sheriden_Webb]

Thank you so much @Cedcommerce - this worked and  I love the look of the button. Appreciate your help!!

[Cedcommerce]

We're glad it helped you @Sheriden_Webb keep growing 

All the best!! 

[kommandokaj]

It worked perfectly for me.

What if i wanna add the same arrow to all my "pages"?

[GLS3]

Hi I did this bu the return button goes back to an 'all' product page rather than the one that it came from (ie instead of going back to dresses catalog goes back to an all products).

Do you have a fix for this?

[Vishalpothur]

HI i have posted a fix for this, please check the thread for the solution.

[ceschnee]

hi, 

i used the above code to create a back button, but i substituted  this line

<a class="back-btn" onclick="history.back()">  for this line 

 <a class="back-btn" href="/collections/all"> because i just want to go back to the previous page. It works but, when i move the cursor over the button the circle with a line (ban symbol) through it appears as the mouse is hovered over the arrow. I have tried

<a class="back-btn" href="history.back()"> which produces a page not found error. Any suggestions for eliminating the BAN sign?

[cjcmetals]

Ceschnee, Thanks so much for posting this.  What a coincidence I needed this 11 hours after you posted.  I am using  <a class="back-btn" onclick="history.back()"> as you described and it works perfectly, I am not even getting the ban issue that you describe.  If I hover over the arrow nothing happens except the grey background illuminates and I can click it.  Are you on a different OS / browser?  It works as expected on Win 11, Chrome, and Edge and iOS w/ safari.  Anyways, this is mostly to just say thanks for posting - it solved my problem.

[vbalaz]

@ceschnee , to eliminate that cursor icon, you must give an empty value to the href property. In this case, the empty value is "#", which is an anchor to the given page pointing nowhere. So the code you need:

<a class="back-btn" href="#" onclick="history.back()">

[GLS3]

Thank you, I’m not used to coding so wondering if you could give me detail instructions on ‘where’ the code goes.  Screengrabs would be even better.



Thank you.

[vbalaz]

@GLS3 : If you have done everything by the proposed solution, then you should just replace the 19th line of back-button.liquid to the line of code that is in my previous comment.

[HOO2]

Hi there, thank you for the solution that I have been able to implement into my specific main product pages it works flawlessly. Would it be possible to have multiple back arrows on my Shopify website to improve consumer usability?

[PlankedTop]

Having trouble reading your Observe the changes in "main-product.liquid"sc screen shot, can you please repost?

[rosie_leclerc]

I tried to do this with our Dawn theme but nothing happened. Do you have any idea as to why?

[Vishalpothur]

I have updated this a bit for when clicked on the back button it will take you to the previous page. this can be used on any theme.

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="#" onclick="goBackToCollection()">
<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>

<script>
function goBackToCollection() {
history.go(-1);
}
</script>

[shim101]

this the error code I get: Liquid error (snippets/back-button line 1): Nesting too deep Snippet code:

[shim101]

nvm i figured it out. i had to remove it from the snippet folder

[xxxxxx]

This worked a treat, thanks, but is there a way to add text after the arrow so that its not just an arrow?

[Vishalpothur]

Glad to hear that the code worked for you! Yes, you can add text after the arrow to provide a more meaningful context for the back button. To achieve this, you can modify the HTML inside the `<a>` element and add a `<span>` element for the text. Here's an updated version of the code with the addition of text after the arrow:

```html
<style>
.back-btn__wrapper svg {
width: 28px;
height: 20px;
}

.back-btn__wrapper {
margin-bottom: 12px;
}

.back-btn {
background: #fff;
padding: 10px 7px 4px 6px;
display: inline-flex;
align-items: center;
}

.back-btn-text {
margin-left: 5px;
}

.back-btn:hover {
border-radius: 26px;
background: #f0f0f0;
}
</style>

<div class="back-btn__wrapper">
<a class="back-btn" href="#" onclick="goBackToCollection()">
<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>
<span class="back-btn-text">Go back</span>
</a>
</div>

<script>
function goBackToCollection() {
history.go(-1);
}
</script>
```

In this code, I added a `<span>` element with the class "back-btn-text" after the `<svg>` element. The text "Go back" is placed within the `<span>` element. You can customise the text and style to suit your needs. Now, the back button will display both the arrow and the text "Go back" for better user understanding.

[Brandingplusme]

Hello dear

please i need your help about back button 

i follow all your instructions and its working in product page 

how if i want to add this button to all pages in the store 

the second question please how if i want to remove the arrow and keep only text with border

thank you for your support 

[pepitesdemilo]

Hi thank you so much for the code, it works for me but do you know how to change thé text color in black please?

[Dizastor]

Hi,
Thank you for the code, it works great!
The only problem is that I have is that it doesn't work on mobile. I click it and nothing happens.
But actually I would like to remove it all together because there is no need for it on mobile.
Could you please provide the code so it doesn't show on mobile?
Thank you in advance. 🙂

[Leopolddenis]

Hello !
It works perfectly, however whenever you arrive from Google on a product page and click the button, you go back to Google. Is there a way to send the user to a collection or something in this specific case ?

[Caroline111]

This doesnt work for me.

I get repeated words "snipet code hundreds of times above product photo.

can you help please? 

[zac07]

hi this helped quite a lot, however its not positioned correctly as it is in your screenshot, , can i have assistance in what i'd need to edit or place to achieve the correct placement? also if you could dumb it down as im probably no better than a toddler when it comes to the technical terms used in coding. many thanks!

[ostrichodette]

Thank you so much! I have never done ANY coding and this worked great! I appreciate you putting this out there for folks like me who can't yet hire folks like you. (Plus, I'm too much of a control freak....) Thank you again.

[ATWS]

Perfect set of instructions. The only thing that threw me off was I copied and pasted the whole filename and it added the liquid extension twice. Thank you solution provider and thank you for asking this question!

[DianeLoren]

how do i add a back buttton to crave theme?