Tip & Gratuity Plugin

Free Trial

  • The free trial will only function within the backend of Squarespace and on your built-in Squarespace domain

  • The free trial will not function on on your custom domain

  • We reserve the right to terminate our plugin trial service at anytime

  • Use of the plugin trial is subject to our Terms & Conditions

Step 1. Plugin Footer Code

Next, place the plugin footer code in your website's Global Code Injection Footer.

Website/Pages > Website Tools > Code Injection

Important
If you purchase the full version of the plugin then you will need to delete the free trial footer code and install the footer code for the full version of the plugin

Plugin Footer Code

HTTPS

Please ensure that you have SSL enabled on your website.

https://support.squarespace.com/hc/en-us/articles/205815898-Understanding-SSL-certificates

 

You will not need to repeat the following steps after you purchase the full version of the plugin

Step 2. Plugin CSS

Next, place the following into your website’s Custom CSS.

Website/Pages > Website Tools > Custom CSS

Plugin CSS

/* Tip and Gratuity Plugin Snazzy View */.tip-container .sqs-add-to-cart-button-wrapper .cart-adding,.tip-container .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button{width:auto!important;display:inline-block!important}.tip-container .ProductItem-details,.tip-container .ProductItem-details h1.ProductItem-details-title,.tip-container .ProductItem-details-excerpt,.tip-container .product-variants,.tip-container .sqs-add-to-cart-button-wrapper,.tip-container .variant-select-wrapper{opacity:1!important;visibility:visible!important}.tip-container .ProductItem-details-share,.tip-container .ProductItem-nav,.tip-container .afterpayString,.tip-container .pdp-details:nth-child(2),.tip-container .product-price,.tip-container .product-quantity-input,.tip-container .product-sharing,.tip-container .reviewSummary,.tip-container .variant-radiobtn-wrapper{display:none!important}#siteWrapper .tip-container .ProductItem-details .product-variants,.tip-container .ProductItem-details,.tip-container .ProductItem-details .sqs-add-to-cart-button-wrapper,.tip-container .pdp-details,.tip-container .pdp-details-excerpt,.tip-container .pdp-details-title,.tip-container .variant-option-title{width:100%!important;text-align:right!important;padding-right:0!important;margin-right:0!important}.tip-container{padding-top:40px;transform:none!important;content:visible!important;transition-property:none!important;content-visibility:visible!important;clip-path:none!important;margin-bottom:20px}.tip-container .pdp-details,.tip-container .product-details{padding-top:20px}.tip-container #productDetails{width:100%!important;text-align:right!important;padding-top:20px;display:inline-block!important}.tip-container .sqs-add-to-cart-button-wrapper{float:right!important;visibility:visible!important}.tip-container .ProductItem-details:not(.ProductItem-details--mobile) h1.ProductItem-details-title{display:block!important}.tip-container .product-details{padding-left:0px!important}/* End Tip and Gratuity Plugin Snazzy View */
 

Control The Dropdown Width
(Optional Version 7.1 Only)

Use the below CSS to change the dropdown width. Simply copy the below CSS into your website's Custom CSS.

At a screen width of 480px or lower the dropdown will revert to full width.

Select A Width

@media (min-width:480px){.tip-container .variant-select-wrapper {max-width: 300px!important;margin-left:auto;margin-right:0px}}

Control The Title Font Size
(Optional)

Use the below CSS to change the title font size. Simply copy the below CSS into your website's Custom CSS.

Select A Font Size

.tip-container .ProductItem-details h1.ProductItem-details-title, .tip-container .pdp-details-title, .tip-container #productDetails .product-title{font-size:14px!important;}

Step 3. Create A Tip

First you will need to create a product that is your tip, this has to be a single product with variants.

Store Page Set-Up

  • We would recommend setting this product up on a new, dedicated store page in the non-linked section of your website.

  • We would recommend setting this page to Hidden under the SEO settings so search engines don’t index your Tips (More Info).

  • Your store page must be enabled under the page settings (More Info).

Tip Product Set-Up

  • You can set the tip up as either a service or physical product. 

  • Set the inventory level to unlimited.

  • The product title and description (optional) will appear on the cart page.

  • You will need to set-up variants for the different amounts that people can tip. For example create a variant called Amount and then assign them different values such as £1, £2, £3…

  • Use a custom Add To Cart button label in order to change the tip button text, otherwise it will appear as add to cart (More Info).

  • The visibility of your tip product must be set to Visible (More Info).

 

Example

Follow the below link to see how we set-up our Tip Product for our demo page.

https://snazzyview.com/tips/p/add-a-tip

Taxes

Your new Tip Product will still be bound by the normal tax rules in Squarespace.

  • If you set the tip up as a physical product, then any taxes that you have set-up in Squarespace will be added to the tip as well.

  • You can exclude taxes from being added to tips by setting them up as a service product instead. Then under you tax settings, uncheck Charge Tax on Service Products option (this will mean that no taxes are applied to ANY service products).

To learn more please see Squarespace’s support documentation.

Discount Codes

Please remember that your new Tip Product will be treated like any other product on Squarespace.

This means if you have a global discount code then the discount will also be applied to your tip product. To avoid this we would recommend setting discount codes to be applied by product category.

Step 4. Enter Your Tip Product URL

For this step you will need to enter the URL of your tip product created in the previous step.

See the more information section below for help locating your tip product URL.

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

Correct URL Format

Version 7.1 of Squarespace

/store-page/p/tip-product

Version 7.0 of Squarespace

/store-page/tip-product

Incorrect URL Format

/store-page
https://yourwebsite.com/store-page/tip-product

Step 5. Plugin Header Code

Next, place the plugin header code in your website's Global Code Injection Header.

Website/Pages > Website Tools > Code Injection

Plugin Header Code

<!-- Tip & Gratuity Plugin Config All Templates © Snazzy View Ltd --><script>window.SnazzyViewTipGratuity={tip_URL:'/store-page/product-page'}</script><!-- End Tip & Gratuity Plugin Config © Snazzy View Ltd -->
 

Installation Complete

You have now completed the installation process. We have a few CSS add-ons listed below which you can also add to your website.

  • Title Font Colour

  • Add To Cart Button Colour

  • Add To Cart Button Hover Colour

  • Control The Checkout Button Width

 

Purchase The Full Plugin