Shopping Cart

Shopping cart widget represents a cart icon to use on your online store. Cart icon is usually used on website headers to help users navigate to shopping cart.

View Live Demo

Content Tab

Content

  • Choose Icon: Select the icon for the shopping cart. You can choose from different styles and sizes.
  • Default Skin: Select the skin for the shopping cart. Options typically include 'Light' or 'Dark' themes.
  • Cart Quick View: Toggle to 'Yes' to enable a quick view feature, allowing users to see a summary of their cart without leaving the current page.
  • Enable Ajax: Set to 'Yes' to enable Ajax functionality, which allows the cart to update dynamically without needing to reload the page.
  • Thumbnail: Choose 'Show' to display product thumbnails within the cart quick view.
  • View Cart Button: Select 'Show' to include a button that takes users to the cart page.

Custom Texts

  • View Cart Button: Here, you can customize the text that appears on the 'View Cart' button.
  • Quick View Heading: Customize the heading text that appears on the cart quick view.

Style Tab

Icon

  • Icon Size: Adjust the size of the shopping cart icon.
  • Padding: Set the padding around the icon to increase or decrease the space between the icon and its container.
  • Alignment: Choose the alignment of the icon within its space.
  • Color: Select a color for the icon.
  • Background Color: Choose a background color for the icon area.
  • Border:
    • Border Type: Select the type of border around the icon, like solid, dashed, etc.
    • Border Radius: Adjust the roundness of the icon's border corners.
    • Box Shadow: Optionally add a shadow to the icon.

Number

  • Typography: Customize the font properties of the number indicating how many items are in the cart.
  • Color: Set the color for the number.
  • Background Color: Choose a background color for the number indicator.
  • Width: Adjust the width of the number box.
  • Height: Adjust the height of the number box.
  • Spacing: Set the margin around the number box.
  • Padding: Configure the padding inside the number box.
  • Border Radius: Modify the roundness of the corners of the number box.

Quick View Container

  • Alignment: Set the alignment of the quick view container.
  • Width: Define the width of the container.
  • Background Color: Choose a color for the background of the container.
  • Padding: Adjust the padding inside the container.
  • Border Size: Set the thickness of the container's border.
  • Border Color: Select a color for the border.

Quick View Content

  • Heading: Customize the color and typography of the quick view heading.
  • Close Button: Adjust the size and color for the close button.
  • Dividers: Set the color, weight, and gap for the dividers between items in the quick view.
  • Texts: Customize the color and typography for the text inside the quick view.
  • Links: Adjust the typography for any links inside the quick view.

Content Effect

  • Blur Content: Toggle this to blur the background content when the quick view is active.
  • Content Overlay: Choose to apply an overlay to the content behind the quick view, which can help in focusing attention on the cart details.
Shopping Cart - JupiterX Help Center