Jen102209 Posted November 25, 2019 Share Posted November 25, 2019 Hello Everyone! I was wondering if any of you who have e-commerce websites have tried inserting code to the checkout page to upsell ( not a fan of this term ) or cross sell? I have a product line that I'm really trying to get off the ground and I want people to try a few of the items together to see the benefit. Any thoughts on this? I would be ever so grateful as I don't want to have to switch to something like Landing Pages. Please let me know if I'm not clear in this question. Many Thanks! Link to comment
Jen102209 Posted November 25, 2019 Author Share Posted November 25, 2019 thanks! I'll check it out! Link to comment
karilyn Posted December 22, 2019 Share Posted December 22, 2019 That plugin is great, but after the one upsell, it just keeps redirecting to that same page. How do I get it to continue to checkout after the upsell? Link to comment
Guest Posted July 20, 2020 Share Posted July 20, 2020 Hi, Just wanted to ask if this app works same as Cartroids? https://apps.shopify.com/aov-suite Link to comment
RobPegurri Posted November 3, 2020 Share Posted November 3, 2020 I've created myself a cross sell feature on my Squarespace website, check it out. Try add to cart this product: https://www.fioridicipria.com/it/shop-now/prodotti/crema-viso-ialuronico-tripla-azione If you like it, I can send the code here so that anybody could implement it Link to comment
sstinus Posted November 7, 2020 Share Posted November 7, 2020 On 11/3/2020 at 9:51 AM, RobPegurri said: I've created myself a cross sell feature on my Squarespace website, check it out. Try add to cart this product: https://www.fioridicipria.com/it/shop-now/prodotti/crema-viso-ialuronico-tripla-azione If you like it, I can send the code here so that anybody could implement it Hi, Rob, I saw your upselling process. It will be really good for me and I would like to integrate it, if possible to have the code for this site https://www.thierrybamas.fr/ please. Thanks a lot 🙂 Seb Link to comment
RobPegurri Posted November 8, 2020 Share Posted November 8, 2020 20 hours ago, sstinus said: Hi, Rob, I saw your upselling process. It will be really good for me and I would like to integrate it, if possible to have the code for this site https://www.thierrybamas.fr/ please. Thanks a lot 🙂 Seb Sure, just let me organize the code for you 😉 Link to comment
RobPegurri Posted November 8, 2020 Share Posted November 8, 2020 I use Squarespace 7.0 with Brine template, I suppose you may have to change it a little bit in order to get it working on your site (don't know) So, this is the code snippet you have to put at the end of the product page (as a code block) in the rich content description <!-- Everything here is the upselling popup code, must be at the bottom of the product page! --> <!-- Product 1 > Product to Upsell --> <div style="display:none;"> <div id="upsell"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <upsell-details style="color: green; line-height: 4em;"><i class="fa fa-check-circle-o" style="font-size:17px; color: green"></i> <b>Added to cart</b></upsell-details> <br> <upsell-title>Fancy upsell title<br><upsell-title> <upsell-details style="line-height: 0em !important;">Your fancy upsell description... super nice I suppose!</upsell-details> <div class="sqs-block button-block sqs-block-button"> <a href="/path_to_upsell_product" class="sqs-block-button-element--medium sqs-block-button-element" style="font-size: 15px">Fancy Button Text</a> </div> <a href="/cart"><p style="font-size: 13px; color: grey; font-weight: 500;">OR GO TO CART TEXT</p></a> </div> </div> <script> const redirectToUpsellPageHandler = (wrapper) => { const addToCartButton = wrapper.querySelector('.sqs-add-to-cart-button'); const productVariants = wrapper.querySelector('.product-variants'); const isVariantInStock = () => { return productVariants.getAttribute('data-variant-in-stock'); }; const onClick = () => { if ((productVariants && isVariantInStock()) || !productVariants) { setTimeout(() => { $.getScript('https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js', function() {$.featherlight($('#upsell'), {});}); console.log('Cheers from the popup'); }, 2200); } }; addToCartButton.addEventListener('click', onClick); }; const redirectToUpsellPage = () => { const productPage = document.querySelector( '.collection-type-products.view-item' ); redirectToUpsellPageHandler(productPage); const blocks = document.querySelectorAll('.sqs-block-product'); blocks.forEach((block) => redirectToUpsellPageHandler(block)); }; document.addEventListener('DOMContentLoaded', redirectToUpsellPage); window.addEventListener('mercury:load', redirectToUpsellPage); </script> And this is the CSS code, you have to insert it in Your Shop Page > Advanced > Header code injection. Customize as you prefer to match your website style <!-- Popup CSS (Upsell)---> <style> /* Mobile appearence settings */ @media only screen and (max-width: 640px) { .featherlight .featherlight-content { margin: 10px !important; border: 2px solid #872533 !important; padding: 0px 15px 17px 15px !important; max-width: 90% !important; } upsell-title { font-size: 21px !important; } upsell-details { font-size: 14px !important; } } /* Tablet and PC appearence settings */ @media only screen and (max-width: 1024px) { .featherlight .featherlight-content { max-width: 60%; margin: 10px !important; border: 2px solid #872533 !important; } } /* Over 1024px */ @media only screen and (min-width: 1025px) { .featherlight .featherlight-content { max-width: 50% !important; } } /* Other */ .featherlight .featherlight-content { max-height: 98%; padding: 15px 50px 17px 50px; border-bottom: 10px solid transparent; margin: 20px; border: 3px solid #872533; text-align: center; border-radius: 5px; } .featherlight .featherlight-close-icon { line-height: 40px; width: 40px; background: transparent; color: #872533; font-size: 20px; } .featherlight:last-of-type { background: #777777d6; } upsell-title { font-family: proxima-nova; font-size: 36px; font-weight: 700; font-style: normal; text-transform: none; letter-spacing: 0em; line-height: 1.1em; color: #882534; } upsell-details { font-family: proxima-nova; font-weight: 300; font-style: normal; font-size: 17px; line-height: 0em; text-transform: none; letter-spacing: 0em; color: #333; } </style> Tell me if I forgot anything Link to comment
Olivia_Scholes Posted November 9, 2020 Share Posted November 9, 2020 On 11/25/2019 at 7:51 AM, ThompsonWebDesign said: Unfortunately you can add code to the checkout page as it is locked down for PCI Compliance. I have however linked to a free plugin by Ghost Plugins which allows you to create an up sell page. https://www.ghostplugins.com/steps/zxncn8gw I've used this plugin and it works well except my client needs to use the product form as they have too many variants to their products. Is there a way to keep this redirect from bypassing the product form. Or for it to be activated once the product form is complete? Link to comment
Bloomy Posted November 16, 2020 Share Posted November 16, 2020 On 11/3/2020 at 7:51 PM, RobPegurri said: I've created myself a cross sell feature on my Squarespace website, check it out. Try add to cart this product: https://www.fioridicipria.com/it/shop-now/prodotti/crema-viso-ialuronico-tripla-azione If you like it, I can send the code here so that anybody could implement it Hey, Can I use this for 7.1 as well ? Link to comment
RobPegurri Posted November 16, 2020 Share Posted November 16, 2020 4 hours ago, Bloomy said: Hey, Can I use this for 7.1 as well ? I don't know, I suppose you can with some corrections Link to comment
sstinus Posted November 16, 2020 Share Posted November 16, 2020 Hi @RobPegurri I've tried your codes but doesn't work 😞 Can you maybe have a look please ? https://thierry-bamas-boutique.squarespace.com/les-gateaux-de-voyage/le-cake-a-orange pw : hello Thank you 🙂 On 11/8/2020 at 12:55 PM, RobPegurri said: I use Squarespace 7.0 with Brine template, I suppose you may have to change it a little bit in order to get it working on your site (don't know) So, this is the code snippet you have to put at the end of the product page (as a code block) in the rich content description <!-- Everything here is the upselling popup code, must be at the bottom of the product page! --> <!-- Product 1 > Product to Upsell --> <div style="display:none;"> <div id="upsell"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <upsell-details style="color: green; line-height: 4em;"><i class="fa fa-check-circle-o" style="font-size:17px; color: green"></i> <b>Added to cart</b></upsell-details> <br> <upsell-title>Fancy upsell title<br><upsell-title> <upsell-details style="line-height: 0em !important;">Your fancy upsell description... super nice I suppose!</upsell-details> <div class="sqs-block button-block sqs-block-button"> <a href="/path_to_upsell_product" class="sqs-block-button-element--medium sqs-block-button-element" style="font-size: 15px">Fancy Button Text</a> </div> <a href="/cart"><p style="font-size: 13px; color: grey; font-weight: 500;">OR GO TO CART TEXT</p></a> </div> </div> <script> const redirectToUpsellPageHandler = (wrapper) => { const addToCartButton = wrapper.querySelector('.sqs-add-to-cart-button'); const productVariants = wrapper.querySelector('.product-variants'); const isVariantInStock = () => { return productVariants.getAttribute('data-variant-in-stock'); }; const onClick = () => { if ((productVariants && isVariantInStock()) || !productVariants) { setTimeout(() => { $.getScript('https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js', function() {$.featherlight($('#upsell'), {});}); console.log('Cheers from the popup'); }, 2200); } }; addToCartButton.addEventListener('click', onClick); }; const redirectToUpsellPage = () => { const productPage = document.querySelector( '.collection-type-products.view-item' ); redirectToUpsellPageHandler(productPage); const blocks = document.querySelectorAll('.sqs-block-product'); blocks.forEach((block) => redirectToUpsellPageHandler(block)); }; document.addEventListener('DOMContentLoaded', redirectToUpsellPage); window.addEventListener('mercury:load', redirectToUpsellPage); </script> And this is the CSS code, you have to insert it in Your Shop Page > Advanced > Header code injection. Customize as you prefer to match your website style <!-- Popup CSS (Upsell)---> <style> /* Mobile appearence settings */ @media only screen and (max-width: 640px) { .featherlight .featherlight-content { margin: 10px !important; border: 2px solid #872533 !important; padding: 0px 15px 17px 15px !important; max-width: 90% !important; } upsell-title { font-size: 21px !important; } upsell-details { font-size: 14px !important; } } /* Tablet and PC appearence settings */ @media only screen and (max-width: 1024px) { .featherlight .featherlight-content { max-width: 60%; margin: 10px !important; border: 2px solid #872533 !important; } } /* Over 1024px */ @media only screen and (min-width: 1025px) { .featherlight .featherlight-content { max-width: 50% !important; } } /* Other */ .featherlight .featherlight-content { max-height: 98%; padding: 15px 50px 17px 50px; border-bottom: 10px solid transparent; margin: 20px; border: 3px solid #872533; text-align: center; border-radius: 5px; } .featherlight .featherlight-close-icon { line-height: 40px; width: 40px; background: transparent; color: #872533; font-size: 20px; } .featherlight:last-of-type { background: #777777d6; } upsell-title { font-family: proxima-nova; font-size: 36px; font-weight: 700; font-style: normal; text-transform: none; letter-spacing: 0em; line-height: 1.1em; color: #882534; } upsell-details { font-family: proxima-nova; font-weight: 300; font-style: normal; font-size: 17px; line-height: 0em; text-transform: none; letter-spacing: 0em; color: #333; } </style> Tell me if I forgot anything Link to comment
sstinus Posted November 19, 2020 Share Posted November 19, 2020 On 11/16/2020 at 10:14 AM, sstinus said: Thanks @RobPegurri, I use a Brine template too, but the code doesn't work for me 😞 On 11/16/2020 at 10:14 AM, sstinus said: Hi @RobPegurri I've tried your codes but doesn't work 😞 Can you maybe have a look please ? https://thierry-bamas-boutique.squarespace.com/les-gateaux-de-voyage/le-cake-a-orange pw : hello Thank you 🙂 Link to comment
RobPegurri Posted November 20, 2020 Share Posted November 20, 2020 21 hours ago, sstinus said: Thanks @RobPegurri, I use a Brine template too, but the code doesn't work for me 😞 Sorry @sstinus, I'm a little swamped right now (damn covid). As soon as I have some free time, I'll have a look to your website. Sorry Link to comment
reedskocz Posted January 14, 2021 Share Posted January 14, 2021 @RobPegurri Have you had a chance to edit the code to work with Brine Template? No pressure, just wondering! Thanks Link to comment
Beyondspace Posted March 4, 2021 Share Posted March 4, 2021 On 1/14/2021 at 12:04 PM, reedskocz said: @RobPegurri Have you had a chance to edit the code to work with Brine Template? No pressure, just wondering! Thanks I can help you having a look, what is your site url BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
RobPegurri Posted April 7, 2021 Share Posted April 7, 2021 On 1/14/2021 at 6:04 AM, reedskocz said: @RobPegurri Have you had a chance to edit the code to work with Brine Template? No pressure, just wondering! Thanks Hey all, actually I am using Brine plugin so this should work fine... I think? But please, feel free to send here your website link and I'll have a look Link to comment
Dannnn Posted August 3, 2021 Share Posted August 3, 2021 I'm going out on a bit of a limb here. But this probably won't work without having featherlight present on your site. Here's a link to the documentation https://noelboss.github.io/featherlight/ & Here's a tutorial for how to instal it on a squaresspace site . https://www.spacetutorials.com/squarespace-lightbox/setup Lovely bit of coding by @RobPegurri, Thanks Link to comment
TangentCodes Posted September 28, 2021 Share Posted September 28, 2021 On 11/3/2020 at 8:51 AM, RobPegurri said: I've created myself a cross sell feature on my Squarespace website, check it out. Try add to cart this product: https://www.fioridicipria.com/it/shop-now/prodotti/crema-viso-ialuronico-tripla-azione If you like it, I can send the code here so that anybody could implement it Hey Rob, I love this feature! But I can't seem to get it to work on my website. Would you mind taking a look? https://www.tangentbooks.co.uk Cheers, Sol Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.