sandracheesman

Hi, On a product page there are 'previous'/'next' and 'add to cart' buttons. I have managed to add some code to the site courtesy of @ThompsonWebDesign to enable a pop-up to say 'continue shopping' or 'proceed to cart' which is wonderful. After the pop-up if I choose 'continue shopping' the pop-up closes and | am still on the page I added the product to the basket from. What I would like is a button I can add to all my product pages titled 'Back to shop' that then takes the customer back to the front of the shop page. I have various pages of 'shops' chosen from a drop down depending on what country the customer is in, so for this reason I would need to be able to specify the link to those buttons rather than have a generic one across the site. My site is https://bassoon-dog-tknb.squarespace.com/ pw: SandraCB then: shop choose country (UK only one set up so far) Wines Choose a wine and add it to the basket close pop-up to continue shopping From there I would like to have a button that takes the customer back to the 'Wines UK' page for the customer to see the list of wines again. This would change to Wines France, Wines USA pages etc when they are set up. The previous/next button only moves you through each product. I hope that makes sense! many thanks Sandra

@joepsnell This is the Custom CSS code:.read-more-state { display: none; } .read-more-target { opacity: 0; max-height: 0; font-size: 0; } .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; } .read-more-state ~ .read-more-trigger:before { content: 'READ MORE'; } .read-more-state:checked ~ .read-more-trigger:before { content: 'READ LESS'; } .read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .9em; color: #156; background-color: #fff; font-family: raleway; font-size: 0.8em; font-weight: bold; letter-spacing: 3px; line-height: 3; border: 2px solid #156; border-radius: .25em; } .read-more-trigger:hover { background:#156; color:white; } and this is the page code: .read-more-state { display: none; } .read-more-target { opacity: 0; max-height: 0; font-size: 0; } .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; } .read-more-state ~ .read-more-trigger:before { content: 'READ MORE'; } .read-more-state:checked ~ .read-more-trigger:before { content: 'READ LESS'; } .read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .9em; color: #156; background-color: #fff; font-family: raleway; font-size: 0.8em; font-weight: bold; letter-spacing: 3px; line-height: 3; border: 2px solid #156; border-radius: .25em; } .read-more-trigger:hover { background:#156; color:white; } I hope that helps? It is based on the pencode you kindly provided :o)

@joepsnell here is the codepen https://codepen.io/sandracheesman/pen/yqZyry it is based on your original codepen you kindly gave on here. On the codepen the gap is much more equal than on the site, which you can see from the images? Any ideas? Thank you!

@joepsnell here is the codepen https://codepen.io/sandracheesman/pen/yqZyry it is based on your original codepen you kindly gave on here. On the codepen the gap is much more equal than on the site, which you can see from the images? Any ideas? Thank you!

Hi @joepsnell the code works brilliantly - thank you! My only issue is when I click 'read more' the 'read less' button is then very close to the last paragraph - no gap like there is Images attached. Any ideas?