Shop Design - "Go to previous page" Button

Store Design

Topic summary

A user added a “Back” button to their Shopify store’s product page using JavaScript code (history.go(-1)) in the product-template.liquid file. The button currently appears on the right side, and they want to move it to the left.

Another user provided a solution involving:

  • Wrapping the back button in a <div> container with a class
  • Adding CSS styling with text-align: left to position it on the left side
  • Optional styling for spacing, padding, background colors, borders, and hover effects

The discussion remains open with no confirmation whether the solution was implemented successfully.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi

I have added the below to my store to add “Back button”. How can I move this from right side to left side of the page?

Online store > Theme > Sections > product-template.liquid file and add following code where you want to add Back button.

<a href="javascript&colon;history.go(-1)">back</a>

Thank you

Winnie

2

To move your “Back” button from the right side to the left side, you need to apply some CSS styling to control its alignment.

<div class="back-button-wrapper">
  <a href="javascript:history.go(-1)">Back</a>
</div>


.back-button-wrapper {
  text-align: left;
  margin-bottom: 20px; /* optional spacing */
}

.back-button-wrapper a {
  display: inline-block;
  padding: 8px 16px;
  background-color: #f4f4f4;
  color: #333;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.back-button-wrapper a:hover {
  background-color: #e0e0e0;
}