Design
Making the drawer look like it came with your theme, from the button to the fonts.
Design is store-wide and on every plan, including Free: the button, the drawer’s layout, colors, fonts, shape, spacing and position. What a paid plan adds is giving one drawer a look of its own.
Find it under Design in the app. Every change shows in the preview beside the controls as you make it, and the preview is the real drawer.
Start from a look
Four starting looks sit above the tabs: Clean, Soft, Bold and Sharp. Applying one fills in the controls in one click. It doesn’t lock anything: change whatever you like afterward, and Discard puts it back.
Button and layout
The drawer’s layout, one of three:
- Header: a titled bar with a card count and arrows. The default.
- Minimal: a grab handle and the cards, nothing else.
- Floating: a compact panel beside its button that doesn’t cover the page. Header and Minimal dim the page behind them and hold keyboard focus while open; Floating leaves your store usable underneath.
The button, in six styles: outline, solid, elevated, counter, icon and tab. Solid puts your accent color on the button itself, or give the button its own colors (below). If you choose the icon style, give the button an accessible label, since it’s the one style with no visible words.
Let shoppers hide the button adds a small X beside it. A shopper who taps it won’t see that drawer for 30 days, and the next drawer that fits the page takes its place. It’s off unless you turn it on.
Card buttons are full width or fit to their words, with an optional arrow or chevron on buttons that link somewhere. A white button over a photo has a soft shadow so it stands off the picture; turn off Shadow on buttons over images for a flatter look.
Colors and fonts
Colors: card background, text, accent and border, set once for every drawer, and a drawer background if you want the drawer itself in another color. Muted text and the focus ring are worked out from those, and so is the text on your accent unless you choose a Button text color, so button text stays readable and the focus ring stays visible whatever you pick. Contrast is checked as you choose and warns when text would be hard to read. It’s a warning, never a block.
Drawer button colors: a background, a text and icon color, and a border for the button, on every button style. Left empty, each follows the style: a Solid button uses your accent.
Cards can set their own colors on top; see Card types.
Fonts: the drawer uses your theme’s fonts by default, for headings and body text alike, which is most of why it looks like part of your store. Or choose from 50 fonts, separately for headings and body. A chosen font is served from Shopify’s own servers along with the app, only on stores that chose it, and a shopper’s browser never contacts Google for it.
You also set one size multiplier and the heading and body weights. One multiplier rather than a size per element keeps headings larger than body text at every setting.
Shape and spacing
Corner radius for the drawer, the cards and the button; border width; the drawer’s padding, the cards’ padding and the gap between them; shadows; how dark the page dims behind the drawer; and how fast it opens. Motion can be turned down to nothing, and the drawer always respects a shopper’s own reduced-motion setting.
Every value has a range that keeps the drawer working. You can’t set a gap that hides the next card, because that peek is what tells a shopper the drawer scrolls.
Text alignment, left, center or right, applies to every card’s words and can be changed per drawer or per card.
Position
Where the button sits: bottom left, bottom center, bottom right, middle left or middle right, with fine offsets. Set phones separately, so a button that sits bottom center on a desktop can move out of the way of a phone’s own bottom bar.
A button on the middle of either side opens a side drawer: one card wide, flush to its edge, scrolling up and down. Opens from lets you separate the two, so a side button can open a drawer from the bottom, or the other way around.
Layering decides what the drawer sits above: the default, below most page elements, above chat widgets, or above everything. It’s the fix when the drawer and a chat bubble land in the same corner, and like position it’s on every plan.
Custom CSS
On Basic and Pro, and last on the page on purpose: every supported control comes first.
Every color, size and spacing value the drawer uses is published as a --pd-* custom property, and
overriding those is safe across updates. Targeting the drawer’s internal class names is not.
They can change between releases, and CSS written against them may stop working without warning.
Your CSS applies inside the drawer only. It can’t reach the rest of your theme, and your theme can’t reach into it. It’s capped at 5KB, because it’s sent with every page view.
Giving one drawer its own look
Everything above sets the store’s design, and every drawer follows it, which keeps a store with several drawers looking like one store.
On Basic and Pro, a drawer’s Design tab can switch any section from Store default to Custom: take the store’s colors but its own button, for example. A section left on Store default keeps following the store as you change it.
Custom CSS is one of those sections. Switched to Custom, it starts from your store’s CSS and is then used instead of it on that drawer only: useful when a few of many drawers need something the others don’t. Same rules as the store’s, 5KB each and 20KB for all of your Custom CSS together.
What stays fixed
Card size. Every card is 264 by 208 pixels, which is why ten card types read as one set. The layouts are how a card changes shape.
The carousel. Cards scroll the way they scroll; that’s behavior, not style.
The focus ring is always visible. Its color is yours; whether it shows is not.
Drawer colliding with a chat widget, or looking different from the preview? See Troubleshooting.