Sections
Every section in Celestine, what it's for, and the settings they share.
Add a section with Add section in the sidebar. Most sections share the same basics: heading size and alignment, top and bottom spacing, a color scheme, and for boxed or media sections a width (full, contained or inset).
Media and storytelling
| Section | What it does |
|---|---|
| Slideshow | Crossfading or swiping slides with images or video, text and buttons. Autoplay pauses on hover and can be paused by visitors |
| Hero | One large image or video with text and buttons |
| Image with text | Media beside text blocks |
| Image collage | Several images in an editorial layout |
| Bento grid | Tiles of different sizes with images, video and links |
| Image reveal | An image that opens up as the visitor scrolls |
| Video | A featured video from Shopify, YouTube or Vimeo |
| Video stories | Short vertical videos that open full screen, each with a product |
| Scroll story | Chapters of text beside a sticky image that changes with each chapter |
| Statement | One large line of text |
| Marquee | A scrolling band of short phrases |
| Before and after | A slider between two photos |
Products and collections
| Section | What it does |
|---|---|
| Product row | A carousel or grid from a collection or hand-picked products, optionally with collection tabs |
| Product spotlight | One product with its buy box, anywhere on the site |
| Shoppable image | Hotspots on a photo that open product cards |
| Collection tiles | Collections as image tiles |
| Product comparison | Up to four products side by side |
| Comparison chart | Your product against the alternatives, row by row |
| Bundle builder | Customers pick items and add them all to the cart at once |
| Product finder quiz | Questions that lead to a recommended collection. See Skin quiz |
| Recently viewed | Products the visitor looked at, stored in their browser |
| Product recommendations | Related or complementary products on the product page |
Trust and content
| Section | What it does |
|---|---|
| Testimonials | Customer quotes as a rail, masonry or spotlight |
| Press quotes | Quotes from publications with their logos |
| Logo wall | Stockists, partners or press logos |
| Stats | Numbers that count up when they come into view |
| Trust bar | Short icon-and-text promises (shipping, returns, cruelty-free) |
| Ingredients | Key ingredients with images and descriptions |
| Ritual steps | A step-by-step routine with linked products |
| Timeline | Milestones in your brand story |
| Columns | Text and images in two to four columns |
| Content tabs | Tabbed text panels |
| FAQ | Questions and answers; adds FAQ structured data for search engines |
| Blog posts | Latest articles from a blog |
| Customer gallery | Customer photos, each linked to a product |
| Store locations | Addresses and opening hours |
| Countdown | A countdown to a date you choose |
| Contact form | A contact form with optional extra fields |
| Newsletter | Email signup connected to Shopify customers |
| Text, Divider, Custom Liquid, Apps | Utility sections for anything else |
Theme blocks
Text-based sections (Text, Hero, Image with text, Image collage and more) accept theme blocks: heading, text, buttons, photo, group, spacer, divider and custom Liquid. Groups can hold other blocks, so you can compose layouts without code.
Italic words in a heading (set with the I button in the editor) render in the heading font's italic. It's a simple way to add emphasis without another color.