FOURCORE.DOCS
Esses docs menu

Cart drawer#

Set the layout and content of the cart that opens over the page.

Add this section#

Open the Overlays group in the theme editor, then select Cart drawer.

Settings#

The settings below follow the same order as the theme editor.

General settings#

Shown when Theme settings > Cart > Cart type is set to Drawer. Set the order note and free shipping gauge in Theme settings > Cart.

  • Color scheme: Choose a color scheme from Theme settings > Colors.

Drawer#

  • Style: Choose Floating or Edge to edge. Floating keeps a margin around the drawer and rounds its corners; edge to edge runs it the full height of the screen against its side.
  • Position: Choose End or Start. Mirrored in right-to-left languages.
  • Width: Use the slider from 380 to 600 px.
  • Page behind the drawer: Choose Dim, Dim and blur, or Unchanged.

Content#

  • Show vendor and SKU: Turn this on or off.
  • Show "View cart" link: Turn this on or off.

Recommendations#

  • Show recommendations: Turn this on or off. Products that go with the first item in the cart, from Shopify's product recommendations.
  • Heading: Enter the text to show.
  • Products: Choose Related or Complementary. Choose complementary products in the Search and Discovery app.
  • Products to show: Use the slider from 1 to 6.

Empty cart#

  • Empty cart visual: Choose None or Image.
  • Image: Choose an image from your library. For a clear result, use an image around 600 x 600px.
  • Image shape: Choose Circle, Rounded, or Adapt to image.
  • Image size: Use the slider from 96 to 320 px.
  • Heading: Enter the text to show. Leave empty for "Your cart is empty" in the store's language.
  • Text: Enter and format the text.
  • Button label: Enter the text to show. Leave empty for "Continue shopping".
  • Link: Choose the page or address to open.
  • Collections heading: Enter the text to show.
  • Collections: Choose one or more collections.

Mobile layout#

  • Style: Choose Full screen with margin, Full screen, edge to edge, Slide in from the side, or Bottom sheet. Slide in from the side comes from the drawer's position (start or end) and leaves a sliver of the page in view.
  • Use compact lines: Turn this on or off. Leaves out the vendor, SKU and option names on phones.

Blocks#

This section does not use blocks.

Tips#

  • Add your real content before fine-tuning spacing and colors.
  • Check the section at both computer and phone widths. Use Mobile layout for the phone-specific choices.