Theme settings
Chapter 2 of the Littles user guide.
Open the theme editor and click the gear icon (Theme settings). The groups below appear in this order.
Colors
Color palette sets the storefront's sixteen colors at once:
| Palette | Page | Buttons and links | Hearts and doodles | Pastel blocks | Feels like |
|---|---|---|---|---|---|
| Bunny (default) | Cream #fbf6ef | Dusty blue #3d5d87 | Rose #b0405c | Blush, sky, butter, mint | Baby and kids' clothing |
| Sorbet | Apricot cream #fff6ef | Blackcurrant #6d3a8c | Terracotta #b2452c | Peach, lilac, lemon, seafoam | Gift shops, party and girls' wear |
| Oat | Oatmeal #f6f1e8 | Deep sage #4a6650 | Clay #9d5236 | Sage, oat, clay pink, mist | Organic and nursery brands |
| Crayon | Warm white #fffcf6 | Cobalt #2448b8 | Crayon red #cc3b2a | Sunshine, sky, coral, grass | Toy shops |
Buttons and links (the accent) fills primary buttons and colors the focus ring, selected chips and size tiles, count bubbles, rating stars, check marks and the free-shipping bar. Hearts and doodles colors saved hearts, doodle outlines, the wavy underline under links and the hero's squiggle; it is never used for text. The four pastel blocks are the tiles products stand on, the age tiles, the hero shapes, the colored bands, the announcement bar (block 1), the footer (block 2), the age warning (block 3) and the certification chips (block 4). All four palettes are light, and every one meets WCAG AA contrast for text (4.5:1) and controls (3:1) on the backgrounds the theme uses.
Below the palette, each color can be set on its own. A color you set overrides the palette until you clear it (the field then reads "From palette"):
| Group | Colors |
|---|---|
| Page and text | Page background; Body text; Headings and prices; Secondary text; Quiet text (compare-at prices, placeholders, sold-out sizes) |
| Panels and controls | Panels, cards and fields (the header capsule, drawers, menus, badges, hearts and fields); Quiet fills (disabled buttons, segmented controls and close buttons); Control borders (fields, chips, size tiles, checkboxes and steppers: keep it at 3:1 or more against the page, panels and pastel blocks) |
| Accents | Buttons and links; Text on buttons (keep the buttons color dark enough for it); Hearts and doodles; Sale and alerts (sale prices and badges, low stock, errors) |
| Pastel blocks | Pastel block 1 to Pastel block 4. Keep them light: text sits on them |
Overriding a color can lower contrast. Check text on your new color with a contrast checker before you publish.
Typography
| Setting | Default | Notes |
|---|---|---|
| Heading font | Fredoka (600) | Headings, product titles, buttons and big numbers such as prices and ages. The theme loads the weight you pick and one step lighter for card titles and drawer lines. |
| Body font | Muli | Body copy, navigation, labels and prices. The theme loads regular, semibold (600), bold (700), extra bold (800) and italic. |
| Base text size | 16px (14 to 18) | Scales all text |
The presets use Fredoka (Littles), Grandstander (Playroom) and Quicksand (Sprout) for headings, all with Muli. Any font in Shopify's font library works; a rounded, friendly heading font suits the theme best. Littles never fakes a bold or italic the font doesn't have, and all text is in sentence case: the theme never turns text into capitals.
Layout
| Setting | Default | What it does |
|---|---|---|
| Page width | Medium | Narrow, Medium or Wide |
| Page margin | 40px (20 to 56) | The space either side of the page on large screens. Phones always use 20px. |
| Show doodles | On | The hand-drawn cloud, star, moon, squiggle and heart over section headings, in the hero and in the footer. Off removes the decorative doodles. The ones that are part of a feature stay: the age badge's small cloud, the drawings on age tiles without an image, the size helper's cloud, the star on the free-shipping track and the drawings on empty pages and empty bags. |
Navigation, Brand and Motion
- Show back-to-top button (on): a round button that appears after shoppers scroll down one screen. Position: Left (default) or Right; the presets use Right. Pick the side opposite your chat button. It is mirrored for right-to-left languages.
- Brand: Use a custom logo (off: the shop name shows as a text logo in the heading font), Logo, Logo width (120px, 60 to 320, with a custom logo), Star doodle beside the shop name (on, text logo only), Line under the logo (a short line such as your town; empty hides it) and Favicon (32 × 32px recommended). A long shop name wraps between words and, on narrow phones, moves onto its own row above the icons.
- Motion: Fade sections in as they scroll into view (on: section headings, cards and tiles fade up once) and Let doodles drift once on load (on: the hero and footer doodles drift for a few seconds, then rest; Sprout turns it off). Cards lift and the heart pops whatever these say. Every effect is off for visitors who ask their device for reduced motion.
Commerce
| Setting | Default | What it does |
|---|---|---|
| Free shipping over | 0 | Your real free-shipping threshold, in your store's currency. Above 0, the product page's price adds "Free shipping over $75." after the tax note, and the cart drawer and cart page show "$18.00 away from free shipping" over a progress track, then "Free shipping unlocked". They only show to customers shopping in your store's currency. The presets set a demo value (75, 99 or 120): change it. Perk lines and announcements are text you write, so change the amount in them too. |
| Show currency code | Off | Prints the currency code beside every price |
Product cards
Every product card is a pillow card: the product stands on a pastel tile with big rounded corners, badges sit top-left, the heart top-right and the age badge ("Fits 3–6 m") bottom-left. Under the tile come the title, the price with up to four swatches, the certification chip and the action row: size chips that add that size, or a pill. On phones the action row gives way to the sizes as text ("0–3 m · 3–6 m · 6–12 m") and a round + on the tile.
| Setting | Default | What it does |
|---|---|---|
| Tile shape | Portrait (4:5) | Square, Portrait (4:5) or Tall (3:4). Playroom uses Square. |
| Image fit | Contain | Contain suits cut-outs and studio shots on plain backgrounds; Fill covers the tile, for lifestyle photos |
| Tile colour | Cycle | Cycle walks the four pastel blocks along each row; or one fixed Pastel block, or Quiet fill |
| Show age badge | On | "Fits 3–6 m" from the product's age range or its size option (chapter 8) |
| Show size chips | On | For products whose only option is a size (an option named in Theme settings › Sizing › Size option names) with 8 variants or fewer: up to five chips, each adding that size to the bag, with "+3" linking to the product for the rest. Sold-out sizes are struck through and can't be pressed. Playroom turns it off. |
| Show certification chip | On | A small chip with a leaf, such as "Organic", on products whose custom.certifications holds the Highlighted certification ("GOTS certified organic"; compared without regard to capitals). Chip label ("Organic") is the short text on the chip; blank shows the certification itself. Playroom uses "Non-toxic finish" and "Non-toxic". |
| New badge for | 30d (0 to 90) | Days after a product is published. 0 turns the date rule off; products tagged new always show it. |
| Bestseller tag | bestseller | Products with this tag get the Bestseller badge |
| Low stock badge at | 5 (0 to 20) | Shows "Only 3 left" when tracked stock is at or under this number. 0 turns it off. |
| Sale badge | Save 20% | Or "Save $8": the amount saved |
| Show quick view button | Off | Opens the product's media, options and buy buttons in a panel without leaving the page |
| Show quick add button | On | Products without options go straight to the bag with Add to bag. Products with options, a required subscription plan or a gift card recipient show Choose options, which opens quick view. Sold-out products show "Tell me when it's back", which opens quick view with the back-in-stock form. |
| Show swatches | Off | Shows the values of the first option that has swatches, such as Color. Swatches before "+" count: 4 (2 to 8). The presets turn swatches on. |
| Show second image on hover | Off | On devices with a mouse |
| Show compare checkbox | Off | Shoppers tick up to 3 products and see them side by side. Stays hidden until you choose a Comparison page: a page using the page.compare template (chapter 4). |
A card shows at most two badges, in this order: Sold out, Sale, low stock ("Only 3 left", only when every variant still on sale is tracked and stops selling at zero), New and Bestseller.
Shop by age, Sizing, Safety, Wish list and Gifting
The settings behind the signature features, each explained in its chapter:
- Shop by age: Age filter metafield (
custom.age_range) and Age menu (chapter 8). - Sizing: Size option names, Default size table, Default units, Suggest sizing up near the top of a size and Detail under size tiles (chapter 9).
- Safety: Default age warning (empty), the warning for products without their own (chapter 11).
- Wish list: Show wish list, Wish list page and Most things in a list (chapter 10).
- Gifting: the gift wrap product and its words, and the gift note's label, placeholder and length (chapter 12).
Customer accounts and Social media
- Customer account menu: the links in the header's account panel. Leave it empty to use the menu Shopify creates for customer accounts.
- Social media: Instagram, YouTube, Facebook, X, TikTok, LinkedIn, Pinterest and Threads. Each link you add shows as an icon in the footer.