Customize Cart

cart-options.jpg
 
 
There are many options to customize the Cart Panel’s appearance. The best place to put the Cart button is on the master page so that it is applied to every page in your shop.
 
You can pick and choose what you want to display in the Cart by checking and unchecking the boxes at the top.
 

1 - General

cart-1-general.jpg
 
 
Transition Type: Choose how your Cart opens. The options are
    • Scale/Hide | Center
    • Full-height | Right
    • Sliding | Top-Right
    • Move in | Top
 
Customized Scroll Bar: Choose the size and color.
 
Top and Bottom Sections Separator: Change the color of the line that separates the top and bottom sections.
 
Shadow Intensity: Change the intensity of the Cart’s shadow. 1 is 100% shadow opacity. 0 is 0% shadow opacity.
 
 

2 - Name, Variation, and Price

 
cart-2.jpg
 
Customize the font size, letter-spacing, font color, and font weight. For font weight, you can choose between thin, normal, and bold. 
 
You can change the font by selecting the cart and changing the font through the Text panel.
 
 

3 - Image

 
cart-3-image.jpg
 
Specify the size of the product images as well as any rounded corners.
 
 

4 - Quantity Box

cart-4-quantityBox.jpg
 
Customize the width and height of the quantity box.
 
Choose the font size and add rounded corners.
 
Signs Thickness: Choose how thick you want the - and + signs to be.
 
Specify background, border, font, and sign colors.
 
For signs color, you can choose black, white, or gray.
 
 

5 - Subtotal

 
cart-5-subtotal.jpg
 
 
Subtotal Text: Enter your own text to show up beside the subtotal. Customize the font size, letter-spacing, font color, and weight (thin, normal, bold).
 
Subtotal Price: Specify the font size, letter-spacing, font color, and font weight (thin, normal, or bold).
 
 
 

6 - Notice

 
cart-6-notice.jpg
 
In-Cart Notice: Appears inside the cart. Enter your own text.
 
Empty-Cart Notice: Appears when the cart is empty. Enter your own text.
 
Customize the font-size, letter-spacing, font color, and font weight (thin, normal, bold)
 
 
 

7 - Checkout Button

 
cart-7-checkout-button.jpg
 
Customize the text that will show up on your checkout button.
 
Specify the width, height, rounded corners, and border thickness.
 
Style the background, border, font, font-size, letter-spacing, and font weight (thin, normal, bold) of the checkout button. 
 
On Hover: customize the button background color and font color for the checkout button on hover.
 
 
 

8 - Close Button

 
cart-8-close-button.jpg
 
Customize the close button size, add rounded corners, change the sign thickness (close button thickness), background color, sign color, and border color.
 
 
 

9 - Additional Tips

To change the fill color of the Cart simply select the cart and change the fill color.
 
You can also add a stroke and a corner radius.
 
Change the font by selecting the cart and changing the font through the Text Panel.
 
Have more questions? Submit a request