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

Upsell or Cross selling


Jen102209

Recommended Posts

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 post
  • Replies 16
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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 pag

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

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

  • 4 weeks later...
  • 6 months later...
  • 3 months later...

Hi,

"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?"

I have not found any satisfactory solution for Squarespace atm. That is: a full upsell/cross-sell app with smart recommendations like you can find on other platforms atm.

so I might as well build it.

If anyone coming across this thread would like to signify his/her interest to move it up in the priority list, you can do so here:

https://shinypass.com/upsell

 

 

Edited by Leo_SP

I built the best currency converter extension for Squarespace in the market: https://shinypass.com/currencyconverter  I hope you like it ^^ For more: https://shinypass.com

 

Link to post
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 post

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

Edited by RobPegurri
Link to post
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 post

 

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 post
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 post
  • 1 month later...

Create an account or sign in to comment

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


×
×
  • Create New...