Sorbet — Theme documentation

Sorbet is a Shopify theme built around one idea: everything floats. A single soft gradient sits on the page, the header is transparent glass over it, and the content arrives in bubbles and frosted panels rather than boxes.

This is the merchant guide. It covers what each section does, which setting changes what, and the handful of places where a choice has a consequence that isn’t obvious from its label.

Version 1.0.0 · HAPPYPRELUDE

Before you start
Theme settings
The bubble canvas
The header
Collection pages
Cart
Building blocks
Things worth knowing

Before you start

Two things to do first, because several sections depend on them.

Create a menu for the bubble rail. The collection page can show a row of glass pills — Skin, Lips, Eyes, New — above the grid. These are collections, not filters, so they come from a Shopify menu. Go to Navigation → Add menu, add one link per collection, then point Bubble rail menu at it in the collection section. Until you do, the rail doesn’t appear.

Decide where your gradient comes from. The theme ships three gradients and also accepts an image. See Background below.

Theme settings

Under Theme settings in the editor.

Colours

The whole palette resolves from one stylesheet, so the schemes in theme settings restyle everything at once — bubbles, buttons, pills, panels. There are eleven schemes. Scheme 1 is the default a section gets when nobody chooses.

Scheme 1 is deliberately transparent. Sections that use it paint no background of their own, which is what lets the one page gradient run unbroken from the top of the screen through the header and into the content. If you set a section to another scheme it will paint a band — sometimes that’s what you want, but it will show an edge where it stops.

Typography

One typeface carries the whole theme; hierarchy comes from weight and size rather than a second face. If a layout looks like it needs a second typeface, the spacing is usually the real problem.

Sorbet

Theme-specific options live in their own group at the bottom of theme settings.

The bubble canvas

The signature section, and the one most likely to be on your homepage. It is a cluster of glass spheres, each of which can hold something different.

Section settings

Setting	What it does
Layout	Centred above the bubbles or Beside the bubbles. Beside puts your heading and intro in a column to the left with the cluster to the right.
Eyebrow / Heading / Intro	The copy above or beside the cluster.
Button label / link	Optional call to action under the intro. Leave the label empty to hide it.

Background

Setting	What it does
Background	Plain canvas, or one of three gradients: warm, soft, prism.
Background image	Your own image. Overrides the gradient.
Fade the image	Washes the image toward the canvas colour so text stays readable.
Text over photos	Strong, Balanced or Soft. See below.

Text over photos is the one to understand. A bubble holding a product photograph may need white text, and a white product on a white background makes that unreadable. Strong dims the centre of the photo hard enough that the text always clears contrast; Soft keeps the photo brightest and expects you to have chosen a dark image. If in doubt, leave it on Strong — it is the only setting that is safe with any image.

Cluster and motion

Setting	What it does
Bubble scale	Scales every bubble at once. Individual sizes are set per bubble.
Floating background bubbles	Small drifting spheres behind the cluster.
How many background bubbles	Count of those.
How tightly bubbles pack	Higher values overlap the bubbles into a single cluster.
Cluster drift	Carries the whole cluster slowly side to side.
Drift on scroll	Bubbles move slightly as the page scrolls.
Nudge away from the cursor	Bubbles ease away from the pointer.

Everything here honours reduce motion: a visitor who has asked their system for less motion gets the cluster still, not merely slower.

The bubbles

Eight kinds, added as blocks:

Text · Product · Image · Collection · Stat · Shade · Quote · Signup

Every bubble shares the same six controls:

Setting	What it does
Size	How large the sphere is, in units.
Shape	Circle, blob or pill.
Tone	The surface colour, or glass for clear, or photo to let an image fill it.
Text colour	Auto, or force dark or light.
Drift	Lifts or drops this bubble out of the row.
Speed	How fast this one churns.

On tone and text colour. Photo tone only takes effect on a bubble that actually has an image — a product bubble whose product has no photo, or an empty image bubble, falls back to glass rather than rendering white text on a white surface. If a specific bubble still reads badly, force Text colour rather than changing the section-wide contrast.

At rest the bubbles are translucent, so where two overlap the films compound and you can read through them. Pointing at one closes it up: the fill goes opaque and the bubble lifts clear of the cluster.

The header

Transparent by design. It sits over whatever is behind it — on the homepage that is the bubble canvas artwork, which reaches up behind the header so there is no line between the two.

Setting	What it does
Logo backing	None sits the logo directly on the artwork. White pill or Frosted glass give it a backing.
Category pills	Every page, Every page except the homepage, Browsing pages — not home or product, or Hidden.

Category pills defaults to Browsing pages. The rail is a browsing aid: on a product page the shopper has already chosen, and the rail competes with the buy column for the same glance.

The header scrolls with the page and pins to the top. Once pinned, whatever passes behind it frosts.

Collection pages

Setting	What it does
Collection head	Card puts the title in a glass panel. Plain sets it large on the page with the sort control beside it.
Head eyebrow	The small line above the title.
Card style	Standard shows details under the photo. Lens holds the card to its photograph and reveals name, price and quick add on hover.
Quick add on cards	Adds a + to each card.
Bubble rail menu	The menu of collections shown as pills above the grid.
Float the sort control	Lifts sort out of the toolbar — sticky on desktop, a floating pill at the bottom on mobile.
Columns on desktop	2 to 5.
Products per page	Server-side, so it cannot differ per device.
Products shown on mobile	Hides the overflow behind a show more control.

Quick add adds single-variant products straight from the grid without leaving the page. A product with real options opens its page instead — adding an arbitrary first variant, a random shade or size, is the wrong outcome. The + never appears on a sold-out product.

Filters open in a drawer from the right, not a permanent column, so the grid gets the full width. The button carries a count when filters are on.

Cart

The cart updates in place: change a quantity or remove a line and the page does not reload. A free-shipping meter shows progress toward your threshold.

On phones each line becomes two rows — image and details above, stepper, bin and price below — rather than squeezing four columns into 375px.

Building blocks

Sections you can add to any page.

Carousel

A run of product cards with the neighbours visible, rather than one slide at a time.

Setting	What it does
Eyebrow / Heading	Leave the heading empty to use the collection’s own name.
Collection / Products	What to show and how many.
Card height	This is what decides how many cards are in view. Card width follows height at 3:4, so a taller card is a wider card and fewer fit.
Bring the middle card forward	Centres the active card, scales the neighbours back and runs the set in a circle.
Advance on its own / Seconds between cards	Autoplay. It pauses on hover, on keyboard focus, when the tab is hidden and when it scrolls off screen, and stops for good once someone uses the arrows.
Hint under the track	A line of text below, e.g. Drag or use the arrows.

Autoplay pausing on hover makes a wide carousel look frozen when the cursor happens to rest on it. That is correct behaviour, but it surprises people.

Collapsible content

An FAQ, care notes, a size guide. Opens and closes without JavaScript.

Setting	What it does
Layout	Heading above the rows, or beside them.
Only one open at a time	Opening one closes the rest.
Start with the first open	Useful for a single important notice, less so for an FAQ.
Publish as FAQ structured data	Off by default.

Only turn on FAQ structured data if every row really is a question and an answer. Search engines penalise FAQ markup that doesn’t match the page, and care instructions are not an FAQ.

Each row takes a heading, rich text or a page to pull content from, and an optional icon (delivery, returns, ingredients, guarantee, care, sizing).

Rich text

A statement between two heavier sections. Eyebrow, heading, text and buttons are blocks, so you choose the order.

Hold to a narrow column keeps the line length readable — prose set across a full-width sheet is hard to read however handsome the sheet is. Set on a glass panel lifts it onto a frosted card.

Multicolumn

Benefits, steps, a set of links.

Setting	What it does
Columns on desktop	2 to 5.
Image shape	Circle matches the theme’s own shape. Also blob, rounded, wide.
Swipe sideways on mobile	On, the row becomes a swipe rail. Off, it stacks — which suits numbered steps.

Each column takes an image or an icon, a heading, text and an optional link.

Full-width image with copy positioned over it. Copy below the image on mobile moves the text out of the photograph on small screens, because a caption laid over an image at 390px is the first thing to become unreadable.

Contact form · Collections list · Blog post · Page · 404 · Apps

Standard pages, styled to match. The contact page shows your shop’s email, phone and address beside the form — all pulled from your Shopify settings.

On a page whose section already carries a heading, turn off Show the page title so you don’t get two headings stacked.

Things worth knowing

The gradient is one layer. It lives on the page, not on the sections. Anything that paints its own background will show an edge where it stops.

Images beat image pickers for anything that must travel. A background chosen with an image picker is tied to your store — export the theme and import it elsewhere and it is gone. Files in the theme’s own assets survive.

A favicon must be a square transparent PNG. JPEG has no transparency, so it renders as a solid rectangle.

While your store is password-protected, Shopify serves noindex on every page. Nothing in the theme causes it and nothing in the theme fixes it — but if a crawl happens during that window, the pages stay in Search Console’s Excluded by noindex report until they are re-crawled.

The theme editor preview is narrower than your real site. Below 1099px the product page stacks to one column, so the editor can look wrong while the live site is right. Check with the preview open in its own tab.

Need a hand? Sorbet support