Slide Out Cart Plugin

Upsells

Step 1. Create An Upsell Page

  • Create this as a regular page under the non-linked section of your website

  • Set this page to enabled under the page settings

  • We would then recommend adding product blocks to your page however you are free to add other blocks as well

  • We would recommend setting the page to hidden under the SEO settings

  • In Version 7.1 of Squarespace you can add multiple section to this page and they will all display within the pop-up

Important

  • Background images cannot be used

  • Section dividers cannot be used

  • Image block animations cannot be used

  • For Version 7.1 of Squarespace gallery sections cannot be used

  • Quick view will not function within the pop-up

  • Auto layouts cannot be used

 

Step 2. Upsell Details

Upsell Page URL
Enter the URL of your upsell page created in the previous step.

You have entered an invalid URL, please check your URL format.

Is This A Product Specific or Global Upsell?
Product specific upsells will override a global upsell.

Pop-Up or Redirect
Your upsell can be displayed within a pop-up or you can redirect users to your upsell page.

 

Pop-Up Only Features

Add To Cart Behaviour
By default the cart will load once a user adds an item to their cart from within the pop-up. You can disable this behaviour by selecting "Nothing".

Upsell Width (%) - Optional
You can set a specific width for your upsell pop-up, enter your width as a percentage such as 40%.

Limited Display

By default your upsells will display every time a user adds an item to their cart. Enabling this option will limited the upsell to only displaying once.

Important: Enabling this option will place a cookie on your users device for each upsell with this feature enabled. Please ensure your website & policies comply with the relevant laws and regulations.

Cookie Age
The default cookie age is 30 days, this means that your upsell will display again after 30 days have passed. You can adjust this value up to a maximum of 400 days.

Step 3. Link Your Upsell

If you tried the free trial then you can re-use any HTML links you've already added

Now it is time to link your upsell page to your product.

  • Navigate to the product page that you wish to add an upsell to.

  • Navigate to the Additional Information section of the product.

  • Add a code block within the additional information section.

  • Finally, copy the HTML below into the code block.

Upsell HTML

<div data-upsell-link="/upsell" data-upsell-width="default" data-upsell-redirect="false" data-upsell-atc-redirect="true" data-upsell-limited-display="false" data-upsell-limited-display-expires="30" class="upsell-link"></div>
 
 

Using Product Blocks?

If you’re using product blocks you will need to ensure that the product title is set to ‘Show Title’ in order for the upsell to display.

To do this navigate to the product block settings and tick ‘Show Title‘, you can the re-hide the title using one of the two below styles.

https://support.squarespace.com/hc/en-us/articles/205814508-Product-Blocks#toc-add-product-details

Hide The Product Title - Global

Design > Custom CSS

.sqs-block-product .product-title {display:none!important}#snazzy-view-add-to-cart-pop-up .sqs-block-product .product-title {display:block!important}

Hide The Product Title - Per Page

Settings > Advanced or Developer Tools > Code Injector (Footer Code)

<style>.sqs-block-product .product-title {display:none!important}#snazzy-view-add-to-cart-pop-up .sqs-block-product .product-title {display:block!important}</style>