Cart Contents

Design Controls

Cart Contents

The controls in this section allow you to customize the look and feel of the cart content element, including its borders, row properties, and typography settings.

  • Wrapper – Define the outer appearance of the cart content area.
    • Border Color – Choose the color for the border of the cart content area.
    • Border Width – Adjust how thick or thin you want the border to appear.
    • Border Radius – Modify the rounded corners of the cart content area’s border.
  • Rows – Customize the design of individual rows in the cart content.
    • Spacing – Set the space between rows to ensure they are distinct.
    • Separator – Toggle to decide if you want a line between each row or not.
    • Separator Color – Define the color of the separator line. Note: This control is only available when the separator is enabled.
    • Separator Height – Adjust the height/thickness of the separator. Note: This control is only available when the separator is enabled.
  • Remove Icon – Customize the icon used to remove items from the cart.
    • Size – Determine the size of the remove icon.
    • Color – Pick a color for the remove icon.
  • Thumbnails – Adjust the appearance of product images in the cart.
    • Size – Set the dimensions for the product images.
    • Opacity – Change how transparent or opaque the product images appear.
    • Borders – Customize borders around the product images.
      • Radius – Add rounded corners to the image borders.
      • Styling – Define the type and color of the borders.
      • Shadow – Apply a shadow effect to give depth to the images.
  • Typography – Modify the text appearance within the cart content.
    • Table Heading – Adjust the typography for the headings in the cart table.
    • Product Title – Customize the font and style for product names.
    • Prices – Change the typography settings for product prices.
    • Attributes – Tweak the appearance of product attributes, such as size or color labels.
    • Attribute Value – Modify how the values of the attributes are displayed.
  • Hide Coupon & Actions Row – Toggle this to hide or show the row where users can input coupons and take cart actions.


These controls are geared towards adjusting the spacing around the cart content element, ensuring it fits well within your webpage layout.

  • Margin Top – Set the space above the cart content element.
  • Margin Bottom – Define the space below the cart content element.