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
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
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
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.
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.
Correct URL Format
Version 7.1 of Squarespace
Version 7.0 of Squarespace
Incorrect URL Format
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
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