How do I create a back button for Dawn version 10.0 theme?

Solved

How do I create a back button for Dawn version 10.0 theme?

chang99
Tourist
8 0 0

Hi guys, How to create a button to go back to previous page? 

My theme is Dawn version 10.0.

Thanks for the help!!

Accepted Solution (1)

oscprofessional
Shopify Partner
16266 2431 3160

This is an accepted solution.

@chang99 

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"

oscprofessional_0-1689675236368.png

 

 

image.png

 

Result:-

oscprofessional_1-1689675236380.png

 

 

image.png

 

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free | OSCP Shipping Discounts App : Free

View solution in original post

Replies 4 (4)

oscprofessional
Shopify Partner
16266 2431 3160

This is an accepted solution.

@chang99 

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"

oscprofessional_0-1689675236368.png

 

 

image.png

 

Result:-

oscprofessional_1-1689675236380.png

 

 

image.png

 

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free | OSCP Shipping Discounts App : Free
chang99
Tourist
8 0 0

Thanks for your help, it worked!

NicoGillis96
Tourist
4 0 2

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

Simsek92
Visitor
2 0 0

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 !