Cart Drawer for BigCommerce

The Cart Drawer from Your Store Wizards enhances the checkout experience by making it easy for shoppers to view and edit their cart with a quick slide-out on desktop or a full-screen view on mobile. It provides a clear order summary and options to proceed to checkout or continue shopping. Additionally, it supports customizable promotions, like free shipping countdowns or discounts based on order totals, encouraging higher average order values. These promotions can be toggled on or off, making them ideal for both temporary and ongoing offers, ultimately boosting the bottom line.

Granting Your Store Wizards Access to Your Store

Log into your BigCommerce control panel, and go to Account Settings > Users:

 

 

Click on Create a User Account:

 

 

Enter the following information for Your Store Wizards to have access to your store:

  • Email: support@yourstorewizards.com
  • Status: Active
  • Preferred language: English
  • User Role: Custom
  • Under System Admin Permissions, check the following boxes:
    • Manage Settings
    • Store Design
    • Design Mode
    • Use Script Manager

 

Click Save.

Once the new user is created, please email us at support@yourstorewizards.com to let us know access has been granted so we can begin the installation of the Cart Drawer.

 

Setting Up or Editing Cart Drawer Settings

To set up the the Cart Drawer, you will first need to launch the Page Builder, where settings are located and controlled.

To do this, log into your BigCommerce control panel and:

  • If you do not have multi storefront, go to Storefront > Themes and click on Customize.
  • If you have multi storefront, go to Channel Manager and choose the storefront the Cart Drawer is installed on and click on Edit Theme.

 

The Page Builder will then load:

 

From the Page Builder navigation bar, click on the painter's pallet icon, which will open up the Theme Styles menu:

 

 

Click on YSW Cart Drawer to open the settings for the Cart Drawer:

To turn on the Cart Drawer, click the Enable Cart Drawer checkbox then set the following settings:

  • Secure Checkout Button Background Color - the hex code for the background color of the Secure Checkout button shoppers can click on to proceed to the checkout.
  • Secure Checkout Button Text Color - the hex code for the color of the "Secure Checkout" text on the Secure Checkout button.
  • Continue Shopping Button Border Color - the hex code for the border of the Continue Shopping button.
  • Continue Shopping Button Text Color - the hex code for the "Continue Shopping" text on the Continue Shopping Button.
  • Accent Text Color - the hex color for the color of the selling price of the item added to the cart and the Grand Total amount.
  • Transparency - allows you to set the transparency level of the current page in the background.  Enter a number from 0 (lightest) to 100 (darkest).  We recommend setting this at 75.

 

If you're going to use the Cart Drawer with promotions, you must first have the promotion set up as an Automatic Promotion in your BigCommerce Store.  The Cart Drawer itself does not control promotions or automatically apply coupon codes to orders, that is done via the Promotions Manager.

Once your promotion is set up in the store, the following settings in Cart Drawer can be set:

 

  • Enable Promotion - check this box to enable the promotion.
  • Enable Default Amount - check this box to enable a default amount to be reached in order for the promotion to be applied based off your store's default currency.  Additional currency values can be set in other options below.
  • Banner Background Color - the hex color for the background of the banner area containing the progress bar.
  • Banner Background Color Success - the hex color for the background of the banner area once the progress bar reaches 100%.
  • Banner Text Color - the hex color of the text displayed on the progress bar.
  • Banner Text Color Success - the hex color of the text displayed on the progress bar once the progress bar reaches 100%.
  • Banner Bar Color - the hex color of the progress bar's progression indicator.
  • Banner Bar Color Success - the hex color of the progress bar's progression indicator when it reaches 100%.
  • Default Amount - the order total, in your store's default currency, the customer must reach in order to take advantage of the promotion.
  • Currency 1 through 5 - If your store accepts orders in additional currencies, you can set up an additional 5 on top of your default currency.  The value entered here should be in a format such as USD = United States Dollar, EUR = Euro, CAD = Candaian Dollar, etc.
  • Amount 1 through 5 - the order total the customer must reach in order to take advantage of the promotion convered to the Currency corresponding number.
  • Fixed Amount - the number of decimal places to display AFTER the Default Amount.  It's important to note that if you leave this field blank, and your Default Amount is $34.99, it will round up to display $35.  By adding the number 2 as a Fixed Amount value, it will stay as $34.99. 
  • Text Before the Amount - if your promotional text is "Only $X away from free shipping!" the word "Only" would be entered here.
  • Text After the Amount - if your promotional text is "Only $X away from free shipping!" the words "away from free shipping!" would be entered here.
  • Amount Reached Bold Text - the text displayed in bold once the amount has been reached.  If your message is "Congratulations!  You have a discount!" the word "Congratulations!" would be entered here.
  • Amount Reached Text - the text displayed once the amount has been reached.  If your message is "Congratulations!  You have a discount!" the words "You have a discount!" would be entered here.

 

 

Did you find an error or need additional support? Contact us at support@yourstorewizards.com to let us know!