Sections
Chapter 4 of the Littles user guide.
Add a section in the theme editor with Add section. Most sections share a centered section heading: a Doodle above it (None, Cloud, Star, Moon or Heart), a Kicker (a small pastel pill with a star), a Heading, Text under the heading and Heading alignment (Centered or Left); where there's a Link label and Link, they show under the section as a centered outline button. Background is Page or one of the four pastel blocks (or Quiet fill), and a pastel background adds a Scalloped edge (None, Top, or Top and bottom). A section that needs a product or collection shows placeholder cards until you choose one, so choose one before you publish. Sections whose content is empty, such as testimonials with no quotes, take no space on your storefront.
Home page and content sections
| Section | What it's for | Key settings |
|---|---|---|
| Hero | The big opening block (home, page and collection templates) | Layout: Collage (your copy beside three soft shapes, a rounded rectangle, a circle and a smaller rectangle, each holding an image), Split (your copy beside one big rounded shape) or Banner (a wide image in a rounded frame with your copy in a white bubble over its corner; Height: Short, Medium or Tall). Kicker, Heading (italicize one phrase and it gets a hand-drawn squiggle under it, as in "Soft things for little people"), Body, Primary button label and link, Secondary button label and link with a Secondary button icon (None, Ruler, Heart, Gift, Leaf or Star), and Ticks (short reassurances with a check mark, separated by |, such as Organic cotton | Gift wrapping available | Free returns for 30 days). Image 1 to Image 3 (2 and 3 for Collage), Image on mobile (replaces the first image on phones), the Shape colors (a pastel block each; a shape without an image shows its color with a drawing) and Show doodles. |
| Slideshow | Several heroes in turn (home, page and collection templates) | Slideshow name (read out by screen readers), Media position (Left or Right), Show doodles, Rotate slides automatically (off) and Change slides every (7s, 5 to 10), Background and Scalloped edge. Up to six Slide blocks: Image, Shape 1 color, Kicker, Heading, Text and two buttons. Each slide is the hero's Split layout. Shoppers get a pause button, and slides never rotate for visitors who prefer reduced motion. |
| Shop by age | The growth chart of age tiles, or a row of tiles for skills or gift ideas | See chapter 8 |
| Featured collection | A grid of pillow cards | Collection, Products to show (8, 2 to 12), Columns on desktop (3 or 4), Layout (Grid or Carousel), Link label ("Shop all"; the link defaults to the collection), Background and Scalloped edge |
| Featured product | One product with its buy box | Product, the section heading, Enable image zoom, Background and Scalloped edge, and the pre-order settings (chapter 6). Blocks: Title, Product vendor, Price, Inventory, Variant picker, Description (a short teaser here), Buy buttons, Product link, Product metadata, Certifications, Size helper, Age warning, Materials and care, the theme blocks of chapter 5 and app blocks. The preset holds Title, Price, Certifications, Variant picker, Size helper (as a link), Age warning and Buy buttons. With a Size helper in the section, the Size guide link sits in the variant picker's size row, as on the product page. |
| Gift sets | Ready-made hampers you sell as one product each | Section heading and Background. Each Gift set block: Product (the set as one product: its price and stock are what the button adds), Tag (a short note such as "Save 10%"; left empty, a set with a compare-at price shows its saving), Tagline, What's inside (a bulleted list, one line per thing in the set) and Button label ("Add set to bag") |
| Image with text | A story beside an image, such as what your clothes are made of | Image, Image fit (Fill the frame or Show the whole image), Media position (Left or Right), Image frame (White panel or a pastel block), Show doodles, Kicker, Heading, Body, Chips (certifications or promises shown as chips with a check mark, separated by |, such as GOTS certified organic | OEKO-TEX Standard 100), a button (Button label, Link, Button style: Outline or Filled), Background (Pastel block 4 by default) and Scalloped edge. Only list certifications your products really hold. |
| Shop the room | A nursery or flat-lay photo with pins on the things you sell | Image (shown uncropped, so pins stay on what they mark), the section heading, Background. Up to twenty Hotspot blocks: Label (blank uses the product's title), Horizontal position and Vertical position (0 to 100%), Product (its mini card shows the photo, age, price and an add or view button) and Detail (a short line such as "Felt, hand-stitched in Kiama"). Phones list the products under the image, numbered to match the pins. |
| Testimonials | Up to six customer quotes on pastel cards | The section heading, Link label ("Read more reviews") and Link (a page with more reviews). Phones show the first two quotes and the link; with no link, the label is a button on phones that shows the other quotes in place. Each Quote: Quote, Name, Detail (where they're from, or what they bought), Star rating (5, 0 to 5; 0 hides the stars) and Card color (Cycle the pastel blocks, one block, or White panel). The presets ship sample quotes: replace them with real ones. |
| Promises | Up to six short promises with icons in pastel circles | The section heading, Columns on mobile (1 or 2 columns), Background. Each Promise: Icon (None or one of 17, from Truck, Return and Gift to Leaf, Ruler, Sun and Washing), Heading, Text and Link. State only terms your store actually offers. |
| As seen in | Up to twelve press or stockist logos | Logo colors (Monochrome, the default, draws every logo in one soft ink color so brand colors don't fight the pastels; or Original. Use logos with transparent backgrounds), Logo height (36px, 24 to 96), Layout on mobile (Wrap or Scroll). Each Logo needs an Image and a Company name (a logo without a name isn't shown), with an optional Link and Quote. |
| Wish list promo | Explains the wish list with a sample list card | See chapter 10 |
| Rich text | Free text and buttons | Doodle, Alignment (Centered or Left), Background and Scalloped edge. Add Kicker, Heading, Text and Button blocks (chapter 5). |
| Section | An empty section you fill with blocks | Takes any theme block and app blocks |
| FAQ | Questions and answers | The section heading, link, Background and Scalloped edge. Add Collapsible row blocks (chapter 5); the preset has three about sizes, gift wrap and returns. |
| Newsletter | An email sign-up card | Heading ("Little letters, once a month"), Text, Button label ("Sign up"), Subscriber tag ("newsletter", added to every new subscriber in Customers), Show doodles, Background and Scalloped edge |
| Blog posts | Your latest articles | Blog (shows its newest articles and links to it) or Articles (picked by hand, in your order), Articles to show (3, 2 to 12), the section heading and Link label ("Read the journal") |
| Custom Liquid | App snippets or your own code | Liquid |
Product page sections
| Section | What it's for |
|---|---|
| Product | The gallery and the buy box (chapter 6) |
| Size guide and safety | Two panels under the product: the size guide (the size table, the units switch and the size helper on the page) and Safety and materials (every certification, your logos, materials and care). Settings: Show the size guide (on), Show safety and materials (on), Safety and materials heading ("Safety and materials") and Background. Its three blocks are fixed: Size helper (chapter 9), Certifications and Materials and care (chapter 11); select them in the editor to change their settings. A panel with nothing to show is left out, and a product with nothing for either shows no section. |
| Product recommendations | A row of pillow cards. Recommendation type: Related products (similar ones) or Complementary products (ones that pair with this product; you choose them in the Search & Discovery app). Products to show (4, 2 to 10) and the section heading. The presets show "Complete the look" (complementary) and "You might also like" (related). |
| Quick order list | For B2B customers: every variant of a product in a table with quantity fields. Heading ("Quick order"), Variants per page (25, 10 to 50) and Show SKU (on). |
Page sections
- Page: your page's content, with Show breadcrumbs, a Doodle, a Kicker and a facts panel (Facts heading, "At a glance") filled with Fact blocks (a label and a value, such as Fabric: 100% organic cotton).
- Contact form: Show breadcrumbs, Kicker ("We read every message"), Form heading ("Write to us") and Show order number field (on), with Menu column blocks (quick links) and Text blocks (a heading and text, such as your address) beside the form.
- Collections grid (the collections list page): Doodle, Heading, Body, Collections (empty lists every collection), Collections per page (12, 4 to 24) and Count label (the word after each count: "pieces"). Each collection is a pastel tile with its image, name and count.
- Collection and Search: chapter 13. Blog: Show breadcrumbs, Doodle, Body, Show featured entry, Show tags and Articles per page (10, 6 to 30). Article: blocks for breadcrumb, title, byline (Show author), featured image, content, tags and share.
- Wish list: the wish-list page (chapter 10).
- Size guide: your Default size table (Theme settings › Sizing) in a panel with the cm · kg / in · lb switch, for a size guide page (chapter 9). Heading ("Size guide"; the
page.size-guidetemplate says "All sizes" under the page's title) and Note. - 404 page: Heading ("This page has wandered off."), Body and Show the requested address, with a search field and a "Back to the shop" button.
- Password: your "opening soon" page, with a Kicker ("Opening soon"), Heading ("Something little is on its way"; italics get the squiggle), Body, Show newsletter form and up to three images shown in soft shapes beside the heading.
Compare
Turn on Show compare checkbox in Theme settings › Product cards, create a page with the page.compare template and choose it as the Comparison page. Shoppers tick up to three products; a tray at the bottom of the screen shows their thumbnails and a Compare button. The Compare section shows them side by side with price and availability, the age range, certifications and materials (when the products have them; chapter 7), and the rows of its Spec table block. Add Spec row blocks to compare more of your metafields, such as pieces or dimensions for toys (chapter 6).