How to use Shopify cart item element?

The Cart Items element displays all products currently added to the customer’s cart. It shows essential cart information such as product details, pricing, quantity, and totals, helping customers review their order before checkout.

This element is commonly used on Cart pages, Slide carts, or Checkout preview sections to provide a clear and user-friendly shopping experience.

I. Cart Item Element - Content Settings

Cart Item Style

Choose how cart items are displayed:

• List: Shows cart items in a vertical list layout, ideal for traditional cart pages

This helps control the visual structure of your cart.

Settings Content

Select which product information is shown for each cart item:

• Product: Displays product image and title

• Price: Shows the product price

• Quantity: Allows customers to adjust item quantity

• Total: Displays the total price per item

You can reorder or remove items to customize the cart layout.

Advanced Options

Enhance the cart display with additional pricing details:

• Show compare at price: Displays the original price when a product is on sale

• Show unit price: Shows price per unit (when available)

• Show cart item properties: Displays custom product properties (e.g. size, color)

These options improve pricing transparency for customers.

Remove Button

Control the appearance and behavior of the remove item button:

• Content: Customize the button label (e.g. “Remove”)

• Icon: Choose and style the remove icon

This allows customers to easily remove items from the cart.

Empty State

Preview and customize how the cart looks when it’s empty:

• Preview empty state: Toggle to view the empty cart layout

This helps you design a consistent experience even when no items are added.

II. Cart Item Element - Basic Settings

The Basic tab lets you control the layout and structure of the Cart Items element:

• Element ID: Unique identifier for custom styling or scripts

• Alignment: Align the cart items within the container

• Width & Height: Adjust the overall size of the cart section

• Layout settings: Configure spacing and arrangement of cart items

• Item settings: Customize individual cart item layout

• Remove button: Fine-tune remove button positioning and style

These settings give you full flexibility to match the cart design with your store layout.

III. Cart Item Element – Advanced Settings

The Advanced tab allows you to control interactions, device visibility, animations, and custom styling for your text element.

Display on

Control where the text will be visible:

• Desktop – show/hide text on desktop devices.
• Mobile – show/hide text on mobile devices.

This helps you optimize the layout for different screens (responsive design).

Animation

Bring your text to life with animation effects.

• Type: Choose an animation style (e.g., fade, slide, bounce).
• Loop: Set how many times the animation repeats.
• Duration: Adjust how long the animation lasts (in seconds).
• Delay: Add a delay before the animation starts.

Custom CSS

• Turn this on to apply your own CSS code for advanced styling.
• This is especially useful for developers or advanced users who want unique effects beyond the built-in options.

=> The Advanced tab gives users more control, interactivity, and professional effects, making the text stand out and adapt perfectly to any device.

Thanks for reading! If you have any questions, please contact us via email: support@shopone.io