Re: Adding a back-button to custom pages, and product pages in Dawn

Solved

Adding a back-button to custom pages, and product pages in Dawn

SeaSideATH
Tourist
7 0 1

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

Screenshot_3-5-2024_145819_seasideathletic.com.jpegScreenshot_3-5-2024_144548_seasideathletic.com.jpeg

Accepted Solution (1)
thirtycoders
Shopify Partner
135 21 27

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>

 

thirtycoders_0-1714766457039.png

 


 Thanks!

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com

View solution in original post

Replies 6 (6)

thirtycoders
Shopify Partner
135 21 27

Hello @SeaSideATH,

 

You want to like this button?

thirtycoders_0-1714765279389.png

 

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
SeaSideATH
Tourist
7 0 1

Hey, 

yea that’s the kind I’m looking for

thirtycoders
Shopify Partner
135 21 27

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>

 

thirtycoders_0-1714766457039.png

 


 Thanks!

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
SeaSideATH
Tourist
7 0 1

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

thirtycoders
Shopify Partner
135 21 27

You want to add a code into a custom page? @SeaSideATH 

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
SeaSideATH
Tourist
7 0 1

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