Jump to content

Creating a 'Back to Shop' Option on Product Page

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.immyhowardmillinery.com/theshining

Good afternoon all, 

I am trying to create a link on my product pages that lets customers go back to my main shop page where they can choose which category of products they want to look at. The style I'm trying to create is very similar to this (which can be found on this link: https://www.immyhowardmillinery.com/theshining/bandanna-bow-theoverlookhotel

Back2Shop.thumb.jpg.68b3fbf9a199d2181736af0f01d166dd.jpg

 

I have several pages set up similar to this link: https://www.immyhowardmillinery.com/theshining (which is the one I'd like to customise) and I have tried to describe below where I'd like the 'back to shop' link to be. I would like it when customers click 'Back to Shop' for them to be linked to this link here: https://www.immyhowardmillinery.com/shop

Back2Shop2.thumb.jpg.0d32192014a6e01b32d965ee9cc061d6.jpg

If anyone would be able to help me with this, if this is a possibility, that would be fantastic. 

 

Thank you ever so much

Immy

Link to comment
  • Solution
On 5/12/2021 at 3:57 PM, ImmyH said:

Hi there, 

 

Yes please! Thank you ever so much.

Add to Bows Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   jQuery(document).ready(function($) { 
   $('<section id="back-to" class="Index-page"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--center"><a href="https://beaverhero.com" class="sqs-block-button-element--small sqs-block-button-element">BACK TO SHOP</a></div></div></section>').insertAfter("header#header");
 }); 
</script>
<style>
section#back-to {
    margin-top: 20px;
}
  #page {
    padding-top: 40px;
}
</style>

image.thumb.png.62968f563377623f8febb2f3b9408498.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
5 hours ago, tuanphan said:

Add to Bows Page Header


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   jQuery(document).ready(function($) { 
   $('<section id="back-to" class="Index-page"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--center"><a href="https://beaverhero.com" class="sqs-block-button-element--small sqs-block-button-element">BACK TO SHOP</a></div></div></section>').insertAfter("header#header");
 }); 
</script>
<style>
section#back-to {
    margin-top: 20px;
}
  #page {
    padding-top: 40px;
}
</style>

image.thumb.png.62968f563377623f8febb2f3b9408498.png

Hi Tuanphan

Wonderful! Thanks so much, this has worked perfectly! Cheers! Immy

Link to comment

Hello, i have the same problem/request. I tried to copy the CSS but it would show up on every page if I copy it in the Header (code injection). Actually I would only like to have a text link on the product page in order to get easily back to the shop. Like this (in line with the product title etc.):997973776_Bildschirmfoto2021-05-19um18_51_29.thumb.png.9554395eaeb4926b0d8fa0938482e910.png
Website is: https://www.trecord.ch/shop
Can somebody help?
Thank you a lot in advance! 

Jasmine

Edited by jasminede
Link to comment
22 hours ago, jasminede said:

Hello, i have the same problem/request. I tried to copy the CSS but it would show up on every page if I copy it in the Header (code injection). Actually I would only like to have a text link on the product page in order to get easily back to the shop. Like this (in line with the product title etc.):997973776_Bildschirmfoto2021-05-19um18_51_29.thumb.png.9554395eaeb4926b0d8fa0938482e910.png
Website is: https://www.trecord.ch/shop
Can somebody help?
Thank you a lot in advance! 

Jasmine

Add this to Code Injection Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   jQuery(document).ready(function($) { 
   $('<a href="/shop" class="back-to">Back to Shop</a>').appendTo("nav.ProductItem-nav");
 }); 
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 5/20/2021 at 5:24 PM, tuanphan said:

Add this to Code Injection Header


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   jQuery(document).ready(function($) { 
   $('<a href="/shop" class="back-to">Back to Shop</a>').appendTo("nav.ProductItem-nav");
 }); 
</script>

 

Thank you a lot, it worked out!! 🙏🙏

Link to comment
On 5/28/2021 at 10:25 PM, jasminede said:

Thank you a lot, it worked out!! 🙏🙏

Need solve these problems?

Site URL: https://www.trecord.ch/

1. (Mobile-Products) Increase button width?

trecord.ch-01-min.png

2. (Mobile-Products) Change mobile logo color?

trecord.ch-02-min.png

3. (Mobile-Products) Change burger icon color?

4. (Tablet-Blog post) Increase content width?

trecord.ch-03-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.