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.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.