How to add a back button to the Dawn theme product page?

[Jwalsh1]

Hi,

I’m using the dawn theme and want to add a back arrow button to my product page so that it will go back to the collection. If a back arrow isn’t an option then I would be happy with a back button in a box that matches my theme.

I have tried the coding posted on a different thread but that was just the word back underlined. 

Thanks

[dmwwebartisan]

@Jwalsh1 

Please add following code before end of </section> tag in Sections/ main-product.liquid file.

<div class="back-button grid">
      <a class="product-form__submit button button--secondary" href="javascript&colon;history.go(-1)">back</a>
 </div>

Please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

.back-button{text-align: center; display: block;}

Hope this work.

Thanks!

[Jwalsh1]

Thanks for your quick reply. 

I’m sorry but I’m very much a beginner when it comes to website building. So I’m not entirely sure where I need to copy/paste the coding you gave. 

Do I add a block in the Default Product section?

Thanks

[dmwwebartisan]

@Jwalsh1 

Please hire shopify expert OR conatct to shopify support.

Thanks!

[Jwalsh1]

I don’t want to have to instruct an expert for one simple option and I have managed to do everything myself through the Shopify app with the Manage Themes>Customize section so far. I just needed a little more direction as to where you were pointing me to go. 

I have found the Edit Code section under the drop down Actions. I’m assuming that the first instruction is also under the Online store> Themes> Edit Code section?

I have added the first lot of coding to the Default Product section under a Custom Liquid Block and moved it up my page. It is appearing under the main image of the product and I would rather it be at the top of the page.

Is anyone else willing to assist with this query?

Thanks

[dmwwebartisan]

@Jwalsh1 

Please check following link for help

https://shopify.dev/themes/tools/code-editor

[tyler32]

Is there a way to put this in the top left corner of the product page?

[dmwwebartisan]

@tyler32 

Please share your stroe URL !

Thanks!

[tyler32]

https://www.baumans.com

@dmwwebartisan 

[senseational_u]

Thank you, this was so helpful! Is there an edit to this that can be made so the back button only displays on desktop and not mobile devices? Thanks again.

[HamishDavisonIC]

@Jwalsh1 @tyler32 

Sometimes I feel like people don't want to be clear on purpose so you have to pay time or money... I really don't know why people can't make concise posts like this to explain exactly how to do everything in an accessible way

If this helps you please accept this answer as a solution so others may see it

Video:

How to add a back button to Dawn theme in 3 minutes

OK I’m really sick of how complicated people make things when it comes to Shopify 2.0 tutorials — people should really explain themselves better

You’re going to want to go to your theme customizer and press edit code:

Press the enlarge window option here so you can see things more clearly:

Now type “main-product” into the “search files” option and open main-product.liquid:

Open the main-product.liquid file and click inside it — then type “<section

Press enter one, then below this code:

Paste this code:

<div class=”back-button grid”>
 <a class=”product-form__submit button button — secondary” href=”javascript&colon;history.go(-1)”>back</a>
 </div>

Press save, then search for base.css in the Shopify theme editor:

Scroll all the way to the bottom and paste this:

.back-button{text-align: center; display: block;}

We’re done

Thanks!

Hamish

[NinTP]

i just tried this code for the back button. though the code works the second half (when you paste it at the bottom of base.css) just leaves you with a blue "back" clickable link. It does not become a block as shown in the video. Any way to make it a block as shown in your video and not just a link

 

[funkydropshippi]

Thanks!