Description:

Cart Items List is a component that shows customers a list of products in their cart. It has an empty state when there are no items in the cart, a success state that shows a list of products (each with the option to edit an item, remove an item, or select quantity for an item), and error states when an item has gone out of stock or reached a max quantity based on available inventory for a variant.

Shopify Prerequisites

• N/A

Shipcode Configuration

• To edit the styling for different states, select the first layer of the component in the structure panel, then navigate to the interactions tab in the right sidebar.
• • Use the toggles to simulate loading and error states
  • • Select one at a time to make edits, then move on to the next
    • When a toggle is ‘true’, you can select other layers in the structure panel to make style changes to the desired elements. When you are done with your changes, navigate back to the first layer of the component and turn the simulate toggle back to the the ‘false’ state 
• In the Cart Item, the edit button allows customers to make changes to the variants they have selected by opening a modal.
• • To configure the edit button so it opens the modal:
  • • First, select the layout you want to use as the modal, then navigate to the structure panel, right click on the layout layer and select ‘Copy ID’ from the context menu
    • Then navigate to the Cart Items component and select the Edit Item layer. With the layer selected, navigate to the Interactions tab in the right sidebar and paste the Layout ID into the Layout ID field. This will connect the button to the modal.
    • You can also add a hex code to the Overlay Hex Color that will appear behind the modal when it is open