Back button and arrow

[Sawadcb]

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

[albertofanini]

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:

<a href="/collections/all" class="back-to-shop">
    ← Back to Shop
</a>

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