Back button and arrow

Shopify Discussion
1

Hi everyone,

I want to add a back button which consists of an arrow and “back to shop” text (aligned side to side) on my product page but i can’t seem to find a way to do so. any help?

this is the link to my website
https://f56daa-ac.myshopify.com/products/b-bucket

2

Hi there,

To add a “Back to Shop” button with an arrow icon next to the text on your product page, you’ll need to customize your theme’s code.

Here’s a simple way to do it:

  1. Edit Your Theme Code:

    • Go to Online Store > Themes in your Shopify admin;
    • Click on Actions > Edit code for your current theme;
    • Find the ‘product-template.liquid’ file or the relevant section in your theme where you want to place the button.

  2. Add the Button HTML:

    • Insert the following code where you’d like the button to appear:

    ← Back to Shop

  • Replace “/collections/all” with the URL of the page you want to link to.

  • Style the Button with CSS:

    • Add the following CSS in your “theme.css” or “styles.css” file:
.back-to-shop {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    text-decoration: none;
    color: #000; /* Customize the color */
}
.back-to-shop::before {
    content: "←";
    margin-right: 5px;
}
  • Adjust the styles as needed to match your theme’s design.

Let me know if you need further assistance!