Enhance Squarespace Site with Cart Slide Out Plugin
If you're looking to enhance the shopping experience on your Squarespace website, the Custom Cart Slide Out Plugin is a must-have. This plugin adds a sleek and customizable cart drawer to your site, making it easier for customers to review their cart contents without navigating away from the current page. Supporting both Squarespace 7.0 and 7.1 templates, this plugin is designed to be highly flexible, with multiple settings to tailor it to your needs.
Squarespace slideout cart plugin
Easy Configuration with Visual Editor
To simplify the customization process, we've developed a visual form tool that allows you to edit the plugin's configuration without delving into code. This tool presents all 57 properties in an intuitive interface, so you can easily adjust settings such as position, width, background color, and more.
Here's a step-by-step guide on how to use this tool:
You need to buy a license of the Custom Slide Out Cart plugin to use with your website
Access the Editor: Open the editor by scroll to the bottom of this page. You will have the option to retrieve your current settings on your site or start with the default value.
Adjust Settings: Use the tabs to navigate through different sections such as General, Effects, Header, Product, and Checkout. Each section contains relevant settings for customizing the cart drawer.
Preview and Copy Code: As you make adjustments, the generated code updates in the text box on the right. Once you're satisfied with the settings, click the "COPY" button to copy the generated script.
Integrate with Your Site: Paste the copied script into your Squarespace site’s code injection section. Save your changes, and preview the customized cart drawer on your site.
Notable Properties
position: You can set the drawer to appear on the left or right side of the screen using the
positionproperty. This allows you to align the drawer with your site’s design and user experience preferences.
position: 'right' // options: 'right', 'left'
effect: Choose how the drawer appears with the
effectproperty. Options include a sliding or fading effect, providing a smooth and engaging user experience.
effect: 'slide' // options: 'slide', 'fade'
restrictShowOnUpdateUrls: property lets you define a comma-separated list of URLs where the cart drawer should be restricted from appearing automatically upon cart updates.
In this example, the cart drawer will not automatically appear on the /landings and /promotions pages even if the cart is updated.
restrictShowOnUpdateUrls: '/landings, /promotions',
The
checkoutButtonsettings are a vital part of the Custom Cart Slide Out Plugin, residing in the Checkout group of the Editor. These settings allow you to customize the appearance and text of the checkout button in the cart drawer, ensuring it aligns with your website's design and branding.
