Mini Cart

Content Controls

Content

These controls allow you to customize what’s displayed in the Mini Cart Element, offering options for visibility,
attributes, and specific configurations for links and carts.

• Link – Adjust how the mini cart link behaves and what it displays.
  • Hide Count – Toggle to hide the item count in the mini cart.
  • Hide Count When Empty – Option to hide the item count when the cart is empty. Note: This control is available only when ‘Hide Count’ is not activated.
  • Hide Subtotal – Choose to hide the subtotal amount in the mini cart.
  • Hide Subtotal When Empty – Option to hide the subtotal when the cart is empty. Note: This control is available only when ‘Hide Subtotal’ is not activated.
  • Attributes – Add custom attributes to the mini cart link.
    • Name – Specify the name for the custom attribute.
    • Value – Set the value for the custom attribute.
• Cart – Customize the appearance and features of the actual cart window.
  • Top Bar – Modify the top bar of the cart window.
  • Primary Button – Style the primary button in the cart.
  • Continue Shopping Link – Configure the ‘Continue Shopping’ link’s behavior and destination.
  • URL – Set a custom URL for ‘Continue Shopping’. This is available only when ‘Continue Shopping Link’ is set to ‘custom’.
  • Open Cart On Add – Choose whether the cart window opens when a user adds an item.
  • Hide Quantity Input – Decide if you want to hide the input field for item quantities in the cart.
• After Title Bar – Choose a global block to display after the title bar.
• After Footer – Choose a global block to display after the footer.

Design Controls

Link

These controls allow you to refine the design of your mini cart link, from container padding and borders to the style of icons and quantity indicators.

• Container – Adjust the outer appearance of the mini cart link.
  • Padding – Define the spacing inside the link container.
    • Padding – Set the specific padding amounts.
  • Borders – Customize the link container’s borders.
    • Radius – Round the corners of your link container.
    • Styling – Define the border style, width, and color.
  • Borders Hover – Set the border color when hovering over the link container.
  • Background – Choose a background color for the link container.
  • Shadow – Add a shadow effect to the link container.
• Icon – Style the shopping cart icon.
  • Color – Pick a color for your shopping cart icon.
  • Size – Adjust the size of the icon.
  • Icon – Select the specific icon for your cart.
• Subtotal – Manage the appearance of the subtotal information.
  • Typography – Control the font settings for the subtotal text.
  • Space After – Specify the amount of space after the subtotal section.
• Quantity – Modify how the item quantity is displayed.
  • Overlap Icon – Choose if the quantity indicator should overlap the cart icon.
  • Color – Select a color for the quantity text.
  • Background – Pick a background color for the quantity indicator.

Cart

This section provides customization options for the shopping cart, allowing users to alter its style, layout, and components to enhance the shopper’s experience. From the cart’s overall style and positioning to the intricate details of contents, every aspect is customizable. Each control is designed to make the shopping cart visually appealing and user-friendly, ultimately encouraging purchases.

• Style – Alter the overall layout style of the cart.
• Dropdown Position – Adjust the position of the dropdown cart.
• Sidebar Position – Set the position of the sidebar-style cart.
• Full Screen At – Choose the breakpoint at which the cart becomes full screen.
• Full Screen Position – Modify the position of the full-screen cart.
• Container
  • Width – Define the width of the cart container.
  • Background – Customize the background color of the cart container.
  • Borders
    • Radius – Set the border radius for the cart container.
    • Styling – Provide additional styling options for the cart borders.
    • Shadow – Add or adjust the shadow effect of the cart container.
  • Padding
    • Padding – Adjust the padding around the cart container’s edges.
• Top Bar
  • Typography – Customize the font attributes of the cart’s top bar.
  • Close Button
    • Size – Adjust the size of the close button.
    • Color – Change the color of the close button.
    • Position – Set the position of the close button within the top bar.
• Contents
  • Max Height – Set the maximum height for the cart contents area.
  • Rows
    • Spacing – Adjust the space between product rows within the cart.
    • Separator Color – Change the color of the separator between rows.
    • Separator Height – Modify the height of the row separators.
  • Thumbnails
    • Size – Define the size of the product thumbnails.
    • Opacity – Adjust the opacity level of the product thumbnails.
    • Borders
      • Radius – Set the border radius for the product thumbnails.
      • Styling – Customize additional border styling for the thumbnails.
      • Shadow – Add or adjust the shadow effect for the product thumbnails.
  • Remove Icon
    • Size – Adjust the size of the ‘remove’ icon for cart items.
    • Color – Change the color of the ‘remove’ icon.
  • Product Title – Customize the display of the product title in the cart.
  • Attributes
    • Name – Adjust the styling for the product attribute names.
    • Value – Customize the styling for the product attribute values.
  • Quantity – Modify the display of the quantity selector for cart items.
  • Price – Customize the display of the product price in the cart.
• Subtotal
  • Label – Adjust the styling for the subtotal label.
  • Amount – Customize the display of the subtotal amount.
• Actions – Customize the behavior and style of the cart’s action buttons.
  • Button – Modify the cart’s primary action button.
    • Size – Choose a predefined or custom size for the action button.
      • Size – Select the button size.
      • Padding – Available only when size is set to “custom”. Adjust the padding around the button text.
      • Override Width – Optionally override the set width for the button.
      • Full Width At – Specify the breakpoint for the button to become full width.
    • Background – Change the button’s background color.
    • Outline – Choose whether the button has an outline style.
    • Color – Available only when the outline is set. Customize the color of the button text.
    • Width – Available only when the outline is set. Define the button’s width.
    • No Fill On Hover – Available only when the outline is set. Decide if the button has no fill when hovered over.
    • Typography – Adjust the font styling of the button text.
    • Corners – Set the button’s corner style.
    • Corner Radius – Available only when corners are set to “custom”. Adjust the radius of the button’s corners.
    • Effects – Add visual effects to the button.
      • Transition Duration – Set the duration of effect transitions.
      • Scale On Hover – Define how much the button scales when hovered over.
      • Shadow – Add or adjust the button’s shadow effect.
    • Icon – Customize the button’s icon.
      • Icon – Choose the button’s icon.
      • Position – Set the icon’s position relative to the button text.
      • Size – Define the icon’s size.
      • Color – Customize the icon’s color.
      • Space Before – Add space before the icon.
      • Space After – Add space after the icon.
      • Hover Transform – Adjust the icon’s transformation during hover.
  • Continue Shopping – Modify the “Continue Shopping” prompt.
    • Typography – Adjust the font styling of the “Continue Shopping” text.
    • Icon – Choose an icon for the “Continue Shopping” prompt.
• Spacing – Adjust the spacing in various parts of the cart.
  • After Top Bar – Set the space below the top bar.
  • After Contents – Set the space below the cart contents.
  • After Subtotal – Set the space below the subtotal section.
  • After Button – Set the space below the action button.

Spacing

Control the space that surrounds your content to improve readability and layout flow. The “Margin Top” and “Margin Bottom” options allow you to fine-tune the vertical spacing, ensuring your content doesn’t feel cramped or overly spread out. Perfect your page’s layout by adjusting these settings to suit your design needs.

• Margin Top – Increase or decrease the space above your content, providing breathing room and enhancing visual separation.
• Margin Bottom – Adjust the space below your content to balance the page’s look and improve its overall readability.