Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Creating a 'Back to Shop' Option on Product Page


ImmyH

Question

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

8 answers to this question

Recommended Posts

  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Hi. Add back to shop button here?

https://www.immyhowardmillinery.com/bows/

image.thumb.png.b5f02e7379cab17b6031af13a76091ce.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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
  • 0
Posted (edited)

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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...