Dawn Theme Back Button

Jwalsh1
Tourist
4 0 2

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

Replies 11 (11)
dmwwebartisan
Shopify Partner
9731 2226 3053

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Jwalsh1
Tourist
4 0 2

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
Shopify Partner
9731 2226 3053

@Jwalsh1 

Please hire shopify expert OR conatct to shopify support.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Jwalsh1
Tourist
4 0 2

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
Shopify Partner
9731 2226 3053

@Jwalsh1 

Please check following link for help

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
tyler32
Excursionist
13 0 8

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

dmwwebartisan
Shopify Partner
9731 2226 3053

@tyler32 

Please share your stroe URL !

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
HamishDavisonIC
Explorer
52 6 40

@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:

HamishDavisonIC_0-1634668311553.png

 

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

HamishDavisonIC_1-1634668311498.png

 

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

HamishDavisonIC_2-1634668311578.png

 

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

HamishDavisonIC_3-1634668311638.png

 

Press enter one, then below this code:

HamishDavisonIC_4-1634668311643.png

 

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:

HamishDavisonIC_5-1634668311656.png

 

Scroll all the way to the bottom and paste this:

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

We’re done

Thanks!

Hamish