Skip to main content
Use the Cart screen to set how your shopping cart appears to customers.

​
Where to find it

In the admin, click the Settings gear in the top bar. In the Settings sidebar, under Commerce, select Cart. Your role needs these permissions, named as they appear on the Roles screen:
  • Access advanced cart configuration and Edit cart behavior settings, under Cart Settings in the Settings category. The first one lets you see Cart in the sidebar and open the screen.
  • View popup campaigns and Edit popup content and triggers, under Popups in the Content & Website category.
  • The switch that starts with View global company configuration, under Company Settings in the Settings category, to use your brand colors.

​
What’s on the screen

On a wide screen, the Preview is on the left and the settings panel is on the right. The panel has two sections, Configure Cart and Colors. Both start collapsed. Click a section’s title to open it. Opening one section closes the other. Save is at the top of the screen.

​
Preview

Click Desktop or Mobile to switch between a desktop view and a phone view. The preview shows your drawer position and primary color as you change them, before you save. The preview uses your own store’s details:
  • The top of the cart shows Your cart from and your company name.
  • The cart item and the three You May Also Like items are active products from your catalog. If you have fewer than four active products, or your role can’t view Products, placeholder items fill the empty spots.
  • The bottom of the cart shows Shopping with and your name.
The total on the checkout button adds sample tax and shipping amounts to the item’s price, so it won’t match a real order.

​
Configure Cart

  • Cart Drawer Position: choose Left or Right for the side of the screen the cart drawer opens on. Right is the default.

​
Colors

  • Use Brand Settings: a checkbox, off by default. When it’s checked, the cart uses the Primary Color and Secondary Color from your Brand Guidelines screen. This screen then hides its color fields.
  • Manage brand guidelines →: a link that opens the Brand Guidelines screen.
  • Shuffle Brand Colors: reapplies your brand’s primary and secondary colors. It appears when Use Brand Settings is checked, with undo and redo arrows next to it.
  • Random Palette: sets both colors to random colors. It appears when Use Brand Settings is off.
  • Primary Color and Secondary Color: each has a swatch that opens a color picker, and a text field for a six-digit hex value that starts with #. They appear when Use Brand Settings is off. If no colors have been saved yet, they start at #0C111D (primary) and #5C8CFF (secondary).

​
Tasks

​
Change the cart drawer position

1

Open Configure Cart

In the settings panel, click Configure Cart.
2

Choose a side

Under Cart Drawer Position, click Left or Right. Check the Desktop preview to see the result.
3

Save

Click Save at the top of the screen. A confirmation message appears after you save.
Saving the Floating Action Buttons screen also sets Cart Drawer Position to match the cart button’s Position on that screen, so check this screen after you save there. Saving this screen doesn’t move the cart button.

​
Use your brand colors

1

Open Colors

In the settings panel, click Colors.
2

Turn on brand settings

Select the Use Brand Settings checkbox. The checkout button in the preview changes to your brand’s primary color. If it doesn’t, ask an admin to confirm your role has the permissions under Where to find it before you save.
3

Save

Click Save.

​
Set your own colors

1

Open Colors

In the settings panel, click Colors.
2

Turn off brand settings

Clear Use Brand Settings so the color fields appear.
3

Pick the colors

For Primary Color and Secondary Color, click the swatch and choose a color, or type a six-digit hex value, including the # (for example #0C111D), in the text field. To start from a random pair, click Random Palette.
4

Save

Click Save.

​
FAQ

Save is unavailable while the screen is loading or saving. After that, match what you see:
  • Save isn’t there, and the settings sections don’t open: your role doesn’t have Edit cart behavior settings. You can still see the preview and switch between Desktop and Mobile.
  • Save stays grayed out after the screen loads: the screen couldn’t load your saved cart settings, so the preview and fields show defaults.
  • An error message appears when you click Save: your changes weren’t saved.
To fix any of these, ask an admin who manages roles to make sure your role has every permission listed under Where to find it. They add permissions on the Roles screen. If your role has them and you still can’t save, contact support.
Email Fluid support at help@fluid.app. The Getting help page lists what to include in your request.
The preview shows only the primary color, on the checkout button and the + quantity button. The secondary color is still saved with your cart settings.
In the mobile preview, the cart drawer rises from the bottom and spans the full width of the phone, so Left and Right look the same there. Use the Desktop preview to check the drawer position.
Yes, if your cart settings were saved with Use Brand Settings checked. When someone saves new colors on the Brand Guidelines screen, your cart’s colors update to match. If Use Brand Settings is off, brand color changes don’t affect your cart.If the cart kept its old colors, open this screen and click Colors. When the preview shows your new brand color, click Save.
Yes. The cart button on the Floating Action Buttons screen uses the same saved colors as this screen. Its Use brand settings checkbox shares the saved choice with Use Brand Settings here. A save on either screen changes them for both.If neither screen has saved that choice yet, the two screens show it differently. This screen starts with Use Brand Settings cleared. Floating Action Buttons starts with its Use brand settings checkbox checked.Saving Floating Action Buttons also changes Cart Drawer Position on this screen. See the note under Change the cart drawer position.