Cart Off Canvas

The Cart Off Canvas element is a way to add the Woocommerce cart into the builders. The element will be available if the Woocommerce plugin is installed.

To add this element, just search Cart Off Canvas and drag it to the canvas.

Toggle Setup

The Cart Toggle is the graphic or text which shows the cart item details when clicked. Depending on the type of the Cart Element it will show an off canvas. Following is the detail of the settings of the cart toggle.

• Base Font Size - Use this option to set the base font of the toggle.
• Width & Height - Use these options to set the width and height of the cart toggle.
• Min Width & Height - Use these options to set the minimum width and height of the cart toggle.
• Background - Use this option to set the background of the toggle in normal and hover mode.

Toggle Design

The Toggle Design section consists of design related settings for the cart toggle.

Content Flex Layout

You can use the Flex Layout principals to change the position and layout of the toggle elements, such as the icon inside the toggle.

• Layout - This option defines the direction of the children meaning they can either be positioned side by side or under each other.
  • Row
  • Column
• Reverse Layout - If you want to reverse the order of the children then make sure to check this option. Basically, imagine this like using a mirror.
• Wrap Children - By default Flexbox will try to keep the elements on a row or column so wrapping children is a good way if you want to prevent this from happening.
• Horizontal - Depending on your Layout settings you can define how the children are orientated.
  • Start - Positions the boxes in the beginning.
  • Center - Positions the boxes centered.
  • End - Positions the boxes at the end.
  • Space Between - Adds space between the boxes.
  • Space Around - Adds space around the boxes.
• Vertical
  • Start - Positions the boxes in the beginning.
  • Center - Positions the boxes centered.
  • End - Positions the boxes at the end.
  • Stretch - Stretched the boxes out evenly.

Margin

Use this option to set the margin of the cart toggle. You can change the settings for all the sides of the toggle or modify them individually.

Padding

Use this option to set the padding of the cart toggle. You can change the settings for all the sides of the toggle or modify them individually.

Border

Use this option to set the border of the cart toggle. You can set the style, width and color of the border on all sides or each side individually.

Border Radius

Use this option to set a border radius for the cart toggle. You can set the curve on all sides or set them individually.

Box Shadow

You can set a shadow over the cart toggle using the box-shadow control group.

• X-Offset - Use this option to set the X offset of the shadow in the cart toggle.
• Y-Offset - Use this option to set the Y offset of the shadow in the cart toggle.
• Blur - Use this option to set the intensity of the blur effect in the cart toggle.
• Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the cart toggle.
• Color - Use this option to set the color of the cart toggle shadow.

Toggle Text Setup

You can have text next to the icon inside the toggle by enabling the Text Setup option.

• Enable - Use this option to enable or disable the text section of the cart toggle.
• Primary Text - Use this option to add the primary text of the toggle which shows with a larger font.
• Secondary Text - Use this option to add the secondary text of the toggle which shows with a smaller font.
• Spacing & Order - Use this option to set the spacing between the primary and secondary text. In the standard mode, primary text is above the secondary text, but if you check the Reverse checkbox the order will be reversed, and secondary text will sit above the primary text.
• Interaction - Use this option to set an animation while hovering over the toggle. The animation options are:
• None
• Slide Top
• Slide Left
• Slide Right
• Slide Bottom
• Scale Up
• Scale Down
• Flip X
• Flip Y
• Overflow - Check the Hidden checkbox if you want to hide the text if it goes beyond the limits of the toggle area.

Text Margin

Use this option to set the margin of the cart toggle text area. You can change the settings for all the sides of the toggle or modify them individually.

Primary Text Format

You can use this control group to set the format of the primary text in the cart toggle.

• Font Family - Use this option to set the font of the cart toggle primary text.
• Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
• Font Size - Use this option to set the size of the font.
• Letter Spacing - Use this option to set the spacing between letters.
• Line Height - Use this option to set the spacing between each line.

Primary Text Style

You can use this control group to set the style of the primary text in the cart toggle.

• Font Style - Use this option to decide if you want to have a normal or italic style.
• Text Align - Use this option to set the alignment of the text. Possible valuse are left, center, right, and justify.
• Text Decoration - Use this option to force an underline or linethrough style.
• Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
• Text Color - Use this option to set the color of the text.

Primary Text Shadow

The primary text shadow control group contains settings to set a text shadow for the cart toggle primary text.

• X-Offset - Use this option to set the X offset of the text shadow.
• Y-Offset - Use this option to set the Y offset of the text shadow.
• Blur - Use this option to set the intensity of the blur effect in the text shadow.
• Color - Use this option to set the color of the text shadow.

Secondary Text Format

You can use this control group to set the format of the secondary text in the cart toggle.

• Font Family - Use this option to set the font of the cart toggle secondary text.
• Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
• Font Size - Use this option to set the size of the font.
• Letter Spacing - Use this option to set the spacing between letters.
• Line Height - Use this option to set the spacing between each line.

Secondary Text Style

You can use this control group to set the style of the secondary text in the cart toggle.

• Font Style - Use this option to decide if you want to have a normal or italic style.
• Text Align - Use this option to set the alignment of the text. Possible valuse are left, center, right, and justify.
• Text Decoration - Use this option to force an underline or linethrough style.
• Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
• Text Color - Use this option to set the color of the text.

Secondary Text Shadow

The secondary text shadow control group contains settings to set a text shadow for the cart toggle secondary text.

• X-Offset - Use this option to set the X offset of the text shadow.
• Y-Offset - Use this option to set the Y offset of the text shadow.
• Blur - Use this option to set the intensity of the blur effect in the text shadow.
• Color - Use this option to set the color of the text shadow.

Toggle Graphic Setup

The graphics setup control group gives you options to enable and set up the graphic icon of the cart toggle.

• Enable - Use this option to enable or disable the icon of the cart toggle.
• Type - Use this option to decide if the toggle graphic type should be Icon, Image, or Burger. There will be different control groups depending on the graphic type selection.
• Icon & Img Interaction - Use this option to set up an animation for the cart toggle graphic on mouse hover. Available options are:
• None
• Scale Up
• Scale Down
• Flip X
• Flip Y

Graphic Margin

Use this option to set the margin of the cart toggle graphic. You can change the settings for all the sides of the toggle graphic or modify them individually.

Graphic Icon

Use this option to fine-tune the graphics icon of the cart toggle. This option will show if you set the graphics type of the toggle to the icon.

• Font Size & Secondary - Use this option to set the base font for the graphic icon of the cart toggle, and check the Secondary checkbox if you want to change the icon to another one while hovering the mouse over the cart toggle.
• Width & Height - Use these options to set the width and height of the cart toggle graphic icon.
• Primary & Secondary - Use this option to select the primary and secondary icon of the cart toggle graphic. The secondary option will be available if you check the secondary checkbox in the Font Size & Secondary option.
• Color - Use this option to set the color of the cart toggle icon in normal and hover mode.
• Background - Use this option to set the background of the cart toggle icon in normal and hover mode.

Graphic Icon Border

Use this option to set the border of the cart toggle graphic icon. You can set the style, width and color of the border on all sides or each side individually.

Graphic Icon Border Radius

Use this option to set a border radius for the cart toggle graphic icon. You can set the curve on all sides or set them individually.

Graphic Icon Box Shadow

You can set a shadow over the cart toggle graphic icon using the box-shadow control group.

• X-Offset - Use this option to set the X offset of the shadow in the cart toggle.
• Y-Offset - Use this option to set the Y offset of the shadow in the cart toggle.
• Blur - Use this option to set the intensity of the blur effect in the cart toggle.
• Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the cart toggle.
• Color - Use this option to set the color of the cart toggle shadow.

Graphic Icon Text Shadow

The primary text shadow control group contains settings to set a text shadow for the cart toggle graphic icon.

• X-Offset - Use this option to set the X offset of the text shadow.
• Y-Offset - Use this option to set the Y offset of the text shadow.
• Blur - Use this option to set the intensity of the blur effect in the text shadow.
• Color - Use this option to set the color of the text shadow.

Graphic Image

This option will appear if you select the image as the graphic type.

• Max Width - Use this option to set the maximum width of the cart toggle graphic image.

Primary Graphic Image

The Primary Graphic Image control group is to set the image for the cart toggle graphic.

• Retina & Dimensions - Retina support is enabled out the box. Click the Eye to disable the Retina support. Also supports options to set the width and height of the image.
• Source - The image to be used. Click to select an image from the WordPress media library or upload a new one.
• Alt Text - The alternative text for your image. Make sure to set this for screen readers!

Secondary Graphic Image

The Secondary Graphic Image control group is to set the image for the cart toggle graphic on hover. The control group has the same options as the Primary Graphic Image except the enable/ or disable checkbox.

Graphic Toggle

This control group will show if you select the Burger option as the graphic type of the cart toggle. The control group will have different options depending on which burger type you choose. Available types are:

• Burger
• Grid
• More Horizontal
• More Vertical

Burger Type

• Burger Size - Use this option to set the size of the burger.
• Burger Spacing - Use this option to set the spacing between each burger line.
• Burger Width - Use this option to set the width of the burger.
• Color - Use this option to set the color of the burger in normal and hover mode.

Grid Type

• Grid Size - Use this option to set the size of the grid.
• Grid Spacing - Use this option to set the spacing between each grid dot.
• Color - Use this option to set the color of the grid in normal and hover mode.

More Horizontal Type

• More Size - Use this option to set the size of the more.
• More Spacing - Use this option to set the spacing between each more dot horizontally.
• Color - Use this option to set the color of the more in normal and hover mode.

More Vertical Type

• More Size - Use this option to set the size of the more.
• More Spacing - Use this option to set the spacing between each more dot vertically.
• Color - Use this option to set the color of the more in normal and hover mode.

Toggle Particles

Particles are set of controls under a group which gives you the tool to create accent behavior styles while interacting with different elements, such as the toggle of the cart element.

Particle Setup

Particle setup group contains the controls to the initial setup of the interaction effects. Following is the detailed information for each setting:

• Enable - Use this option to enable the interaction particle.
• Location - Use this option to set the position of the particle in respect with the element that it is applied to. Available options are:
• Center
• Top
• Left
• Right
• Bottom
• Top Left
• Top Right
• Bottom Left
• Bottom Right
• Placement - Use this option to decide if you want to have the particles overlap with the element or limited inside the element.
• Scale - The scale option will determine how the particle will expand or shrink in transition. The available options are:
• None - Use this option if you do not want the particle to scale in transition.
• Scale All - Use this option to scale the particle both vertically and horizontally in transition.
• Scale X - Use this option to scale the particle horizontally in transition.
• Scale Y - Use this option to scale the particle vertically in transition.
• Delay - The delay option will determine how long will it take the transition to complete. The value of this option in seconds or milliseconds depends on the selection of the value unit.
• Transform Starts From - Use this option to set where the transition of the particle should start. Available options are:
• Center
• Top
• Left
• Right
• Bottom
• Top Left
• Top Right
• Bottom Left
• Bottom Right

Particle Style

Particle style group contains the controls to fine tune the interaction effects. Following is the detailed information for each setting:

• Width & Height - Use this option to set the width and the height of the particle. The value unit can be Calc, PX, REM, EM, and %.
• Radius - Use this option to set the radius of the particle. The same units can be used for this option values as the width/height options.
• Color - Use this option to set the color of the particle.
• Inline CSS - Use this option to add custom CSS which will be applied to the article. This option is for the advanced users that want an extra layer of customization which they can not find in the styling options of the particles.

Primary and Secondary Particles

The same setup and style options which we described are available for primary and secondary particles. You basically have two sets of particle options to get innovative and create stylish interactions.

Off Canvas Setup

The Off Canvas options are a set of control groups used to fine tune the off-canvas feature of elements such as the Navigation Collapse. We are going to delve into details and explain each option functionality.

• Base Font Size - Use this option to set the base font size for the off canvas.
• Location - Use this option to set the location of the off canvas. The options are Left or Right.
• Close Size & Dimensions - Use this option to set the size and dimension of the off canvas.
• Content Max Width - Use this option to set the maximum width of the off canvas.

Off Canvas Colors

• Overlay Background - Use this option to set the overlay color outside of the off-canvas box covering the rest of the screen.
• Close Button - Use this option to set the color of the close button in the off canvas.
• Content Background - Use this option to set the background color of the off canvas.

Off Canvas Content Border

Use this option to set the border of the off-canvas. You can set the style, width and color of the border on all sides or each side individually.

Off Canvas Content Box Shadow

• X-Offset - Use this option to set the X offset of the shadow in the off canvas.
• Y-Offset - Use this option to set the Y offset of the shadow in the off canvas.
• Blur - Use this option to set the intensity of the blur effect in the off-canvas shadow.
• Spread & Position - Use this option to set the spread amount of the off-canvas shadow and decide if you want the shadow to sit inside or outside of the box.
• Color - Use this option to set the color of the off-canvas shadow.

Cart Setup

The Cart Setup control group contains settings to set up the primary functionality of the cart.

• Title - Use this option to set the main title of the cart which shows inside the modal.
• Items Placement - Use this option to decide where to put the list of items added to the cart.
• Total Placement - Use this option to determine where to put the total price calculated section.
• Buttons Placement - Use this option to decide where to put the checkout and other buttons.

Cart Title Setup

The Cart title contains a series of control groups to fine-tune the title section of the cart element.

Title Text Format

• Font Family - Use this option to set the font of the cart title section.
• Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
• Font Size - Use this option to set the size of the font.
• Letter Spacing - Use this option to set the spacing between letters.
• Line Height - Use this option to set the spacing between each line.

Title Text Style

• Font Style - Use this option to decide if you want to have a normal or italic style.
• Text Align - Use this option to set the alignment of the text. Possible valuse are left, center, right, and justify.
• Text Decoration - Use this option to force an underline or linethrough style.
• Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
• Text Color - Use this option to set the color of the text.

Title Text Shadow

The title text shadow control group contains settings to set a text shadow for the cart title.

• X-Offset - Use this option to set the X offset of the text shadow.
• Y-Offset - Use this option to set the Y offset of the text shadow.
• Blur - Use this option to set the intensity of the blur effect in the text shadow.
• Color - Use this option to set the color of the text shadow.

Title Margin

Use this option to set the margin of the title. You can change the settings for all the sides of the title or modify them individually.

Cart Item Setup

The Cart item contains a series of control groups to fine-tune the items listing section of the cart element.

• Remove Button - Use this option to decide if you want to show the remove button or not in the car items section.
• Content Spacing - Use this option to set the spacing between the items section and other parts of the cart element.
• Background - Use this option to set the background of items section in normal and interaction mode. The mouse hover can be considered as interaction in this case.

Items Margin

Use this option to set the margin of the items. You can change the settings for all the sides of the item or modify them individually.

Items Padding

Use this option to set the padding of the items. You can change the settings for all the sides of the item or modify them individually.

Items Border

Use this option to set the border of the items section. You can set the style, width and color of the border on all sides or each side individually.

Items Border Radius

Use this option to set a border radius for the items section. You can set the curve on all sides or set them individually.

Items Box Shadow

• X-Offset - Use this option to set the X offset of the shadow in the items section.
• Y-Offset - Use this option to set the Y offset of the shadow in the items section.
• Blur - Use this option to set the intensity of the blur effect in the items section.
• Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the section.
• Color - Use this option to set the color of the items section shadow.

Items Thumbnail Setup

Each item consists of the thumbnail which is the small image of the product which is added to the cart and the name of the product. Use this option to set the width of the thumbnail.

Items Thumbnail Border Radius

Use this option to set a border radius for the thumbnail of the item. You can set the curve on all sides or set them individually.

Items Thumbnail Box Shadow

• X-Offset - Use this option to set the X offset of the shadow in the thumbnail of the item.
• Y-Offset - Use this option to set the Y offset of the shadow in the thumbnail of the item.
• Blur - Use this option to set the intensity of the blur effect in the thumbnail of the item.
• Spread & Position - Use this option to set the spread amount of the items thumbnail shadow and decide if you want the shadow to sit inside or outside of the thumbnail.
• Color - Use this option to set the color of the items thumbnail shadow.

Items Link Text Format

• Font Family - Use this option to set the font of the cart items link.
• Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
• Font Size - Use this option to set the size of the font.
• Letter Spacing - Use this option to set the spacing between letters.
• Line Height - Use this option to set the spacing between each line.

Items Link Text Style

• Font Style - Use this option to decide if you want to have a normal or italic style.
• Text Align - Use this option to set the alignment of the text. Possible valuse are left, center, right, and justify.
• Text Decoration - Use this option to force an underline or linethrough style.
• Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
• Text Color - Use this option to set the color of the text.

Items Link Text Shadow

The items Link text shadow control group contains settings to set a text shadow for the cart items link text.

• X-Offset - Use this option to set the X offset of the text shadow.
• Y-Offset - Use this option to set the Y offset of the text shadow.
• Blur - Use this option to set the intensity of the blur effect in the text shadow.
• Color - Use this option to set the color of the text shadow.

Items Quantity Text Format

The cart items list contains the quantity section which shows how many of the same product are added to the cart.

• Font Family - Use this option to set the font of the cart items quantity.
• Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
• Font Size - Use this option to set the size of the font.
• Letter Spacing - Use this option to set the spacing between letters.
• Line Height - Use this option to set the spacing between each line.

Items Quantity Text Style

• Font Style - Use this option to decide if you want to have a normal or italic style.
• Text Align - Use this option to set the alignment of the text. Possible values are left, center, right, and justify.
• Text Decoration - Use this option to force an underline or linethrough style.
• Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
• Text Color - Use this option to set the color of the text.

Items Quantity Text Shadow

The items quantity text shadow control group contains settings to set a text shadow for the cart items quantity text.

• X-Offset - Use this option to set the X offset of the text shadow.
• Y-Offset - Use this option to set the Y offset of the text shadow.
• Blur - Use this option to set the intensity of the blur effect in the text shadow.
• Color - Use this option to set the color of the text shadow.

Cart Total Setup

The Cart Total contains a series of control groups to fine-tune the total information of the cart element. The total information includes the sum of the cart item prices and other details.

Use this option to set the background color of the total section in the cart element.

Total Text Format

• Font Family - Use this option to set the font of the cart total section.
• Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
• Font Size - Use this option to set the size of the font.
• Letter Spacing - Use this option to set the spacing between letters.
• Line Height - Use this option to set the spacing between each line.

Total Text Style

• Font Style - Use this option to decide if you want to have a normal or italic style.
• Text Align - Use this option to set the alignment of the text. Possible valuse are left, center, right, and justify.
• Text Decoration - Use this option to force an underline or linethrough style.
• Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
• Text Color - Use this option to set the color of the text.

Total Text Shadow

The title text shadow control group contains settings to set a text shadow for the cart total section.

• X-Offset - Use this option to set the X offset of the text shadow.
• Y-Offset - Use this option to set the Y offset of the text shadow.
• Blur - Use this option to set the intensity of the blur effect in the text shadow.
• Color - Use this option to set the color of the text shadow.

Total Margin

Use this option to set the margin of the total section. You can change the settings for all the sides of the total section or modify them individually.

Total Padding

Use this option to set the padding of the total section. You can change the settings for all the sides of the total section, or modify them individually.

Total Border

Use this option to set the border of the total section. You can set the style, width and color of the border on all sides or each side individually.

Total Border Radius

Use this option to set a border radius for the total section. You can set the curve on all sides or set them individually.

Total Box Shadow

• X-Offset - Use this option to set the X offset of the shadow in the cart total section.
• Y-Offset - Use this option to set the Y offset of the shadow in the cart total section.
• Blur - Use this option to set the intensity of the blur effect in the cart total section.
• Spread & Position - Use this option to set the spread amount of the cart total section shadow and decide if you want the shadow to sit inside or outside of the section.
• Color - Use this option to set the color of the cart total section shadow.

Cart Buttons Container Setup

This is a series of control groups to fine-tune the buttons section container of the cart.

• Horizontal Alignment - Use this option to set the buttons container alignment of the cart element. Available options are:
• Start
• Center
• End
• Spread
• Justify
• Background - Use this option to set the background color of the buttons container of the cart.

Buttons Container Margin

Use this option to set the margin of the buttons container of the cart. You can change the settings for all the sides of the buttons container or modify them individually.

Buttons Container Padding

Use this option to set the padding of the buttons container of the cart. You can change the settings for all the sides of the buttons container or modify them individually.

Buttons Container Border

Use this option to set the border of the buttons container of the cart. You can set the style, width and color of the border on all sides or each side individually.

Buttons Container Border Radius

Use this option to set a border radius for the buttons container of the cart. You can set the curve on all sides or set them individually.

Buttons Container Box Shadow

• X-Offset - Use this option to set the X offset of the shadow in the buttons container of the cart.
• Y-Offset - Use this option to set the Y offset of the shadow in the buttons container of the cart.
• Blur - Use this option to set the intensity of the blur effect in the buttons container of the cart.
• Spread & Position - Use this option to set the spread amount of the buttons container shadow and decide if you want the shadow to sit inside or outside of the section.
• Color - Use this option to set the color of the buttons container shadow.

Cart Buttons Setup

The Cart Buttons section is the area of the cart element that the View Cart and Checkout buttons reside.

• Base Font Size - Use this option to set the base font of the cart buttons.
• Width & Height - Use these options to set the width and height of the cart buttons.
• Min Width & Height - Use these options to set the minimum width and height of the cart buttons.
• Background - Use this option to set the background of the buttons in normal and hover mode.

Buttons Margin

Use this option to set the margin of the cart buttons. You can change the settings for all the sides of the buttons or modify them individually.

Buttons Padding

Use this option to set the padding of the cart buttons. You can change the settings for all the sides of the buttons or modify them individually.

Buttons Border

Use this option to set the border of the cart buttons. You can set the style, width and color of the border on all sides or each side individually.

Buttons Border Radius

Use this option to set a border radius for the cart buttons. You can set the curve on all sides or set them individually.

Buttons Box Shadow

• X-Offset - Use this option to set the X offset of the shadow in the cart buttons.
• Y-Offset - Use this option to set the Y offset of the shadow in the cart buttons.
• Blur - Use this option to set the intensity of the blur effect in the cart buttons.
• Spread & Position - Use this option to set the spread amount of the cart buttons shadow and decide if you want the shadow to sit inside or outside of the section.
• Color - Use this option to set the color of the cart buttons shadow.

Cart Buttons Text Options

Following is the series of controls to fine-tune the cart buttons text.

Text Margin

Use this option to set the margin of the cart buttons text. You can change the settings for all the sides of the button's text or modify them individually.

Primary Text Format

You can use this control group to set the format of the primary text of the cart buttons.

• Font Family - Use this option to set the font of the cart buttons primary text.
• Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
• Font Size - Use this option to set the size of the font.
• Letter Spacing - Use this option to set the spacing between letters.
• Line Height - Use this option to set the spacing between each line.

Primary Text Style

You can use this control group to set the style of the primary text of the cart buttons.

• Font Style - Use this option to decide if you want to have a normal or italic style.
• Text Align - Use this option to set the alignment of the text. Possible valuse are left, center, right, and justify.
• Text Decoration - Use this option to force an underline or linethrough style.
• Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
• Text Color - Use this option to set the color of the text.

Primary Text Shadow

The primary text shadow control group contains settings to set a text shadow for the cart buttons primary text.

• X-Offset - Use this option to set the X offset of the text shadow.
• Y-Offset - Use this option to set the Y offset of the text shadow.
• Blur - Use this option to set the intensity of the blur effect in the text shadow.
• Color - Use this option to set the color of the text shadow.

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

• Toggle Hash - Use this option to add a custom hash to the toggle section of the cart element. Whatever you add here will be added as the value of data-x-toggle-hash HTML attribute. You can use this as a base point for your Javascript custom code.
• ID - Use this option to set an HTML ID for the cart element. The ID should be unique on the page.
• Class - Use this option to set an HTML Class for the cart element. You can use the class for your custom CSS code.
• Element CSS - Use this option to have better control over the cart element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
• Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
• Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.

Demo

To see a live demo of the Cart Off Canvas Element click here.

Summary

Let's recap. We've discussed how to add the Cart Off Canvas Element. Then we've gone through its toggle, off canvas, cart, cart buttons, and customize settings to make it look the way you want it to look.