Sections and settings
Sections overview
A guided tour of Vellora's sections, how to add and arrange them, and which one to pick for each job.
Every page in Vellora is built from sections: a hero, a product grid, a story with an image, a list of questions. You add, remove and reorder them in the theme editor, and each one has its own settings. This page helps you pick the right section for each job. For every setting of every section, see the section reference.
Sections and blocks
- A section is a full-width band of the page, such as Image banner or Featured collection.
- A block is a piece inside a section, such as a slide in Slideshow, a question in Collapsible content or the price in Product information. Many sections let you add, remove and reorder their blocks.
To add a section, open the page in the theme editor, select Add section where you want it, and choose from the list. Drag sections and blocks in the sidebar to change their order. To hide one without deleting it, select the eye icon next to its name.
Where sections live
- Header area. Announcement bar and Header appear on every page. Edit them once and the change shows everywhere.
- Footer area. Footer appears on every page, and so does Email popup once you turn it on.
- Template sections. Each page type has a main section that shows its content: Product information on product pages, Product grid on collection pages, Cart on the cart page, and so on. They can't be removed, but you can add other sections above and below them.
- Everything else can be added to any page, as many times as you like.
The cart drawer, quick view and cart recommendations are built-in parts. The theme renders them by itself, and you control them in Theme settings, under Cart and Product cards. The cart drawer also has a color scheme setting of its own.
Choose a section
Open a page
| If you want to… | Use |
|---|---|
| Lead with one large photo and a message | Image banner |
| Rotate between several campaigns | Slideshow |
| Mix a main image, a text panel, a second image and a shoppable product | Hero collage |
| Split the screen between two audiences, such as women and men | Split hero |
| Count down to the end of a real promotion | Promotion countdown |
| Add a moving strip of short phrases | Scrolling text |
| Show a brand or how-to video | Video |
Sell products
| If you want to… | Use |
|---|---|
| Show products from one collection, as a grid or carousel | Featured collection |
| Let shoppers switch between several collections | Collection tabs |
| Sell one product with its buy buttons, anywhere | Featured product |
| Sell a set of products together, such as a routine | Product set |
| Let shoppers buy straight from a styled photo | Shoppable image |
| Let shoppers buy from short vertical videos | Shoppable video |
| Suggest related products | Product recommendations |
| Bring back products a shopper looked at | Recently viewed |
| Point to collections | Collection list |
| Promote gift cards, sales or collections in two or three cards | Promotion cards |
Tell your story
| If you want to… | Use |
|---|---|
| Pair a photo with a story | Image with text |
| Write a short statement or introduction | Rich text |
| List benefits, promises or steps side by side | Multicolumn |
| Explain a process in numbered steps with images | Numbered list |
| Combine two images with a story card, like a lookbook | Image collage |
| Compare a before and after photo | Before and after |
| Share your latest blog posts | Blog posts |
Build trust and answer questions
| If you want to… | Use |
|---|---|
| Quote real customers | Testimonials |
| Show press or partner logos | Logo list |
| Answer common questions | Collapsible content |
| Show a size guide or specifications | Table |
| List your shops with addresses and opening hours | Store locations |
| Collect email signups | Email signup |
| Add a contact form to a page | Contact form |
Go further
| If you want to… | Use |
|---|---|
| Add an app's block to any page | Apps |
| Add your own Liquid, HTML or an embed code | Custom Liquid |
What the presets put on the home page
Each preset starts with a home page that shows its style. You can rebuild any of them with the same sections.
| Preset | Home page sections, top to bottom |
|---|---|
| Vellora | Hero collage, Collection list, Collection tabs, Shoppable image, Numbered list, Promotion cards, Blog posts, Email signup |
| Sorrel | Image banner, Collection list (circles), Featured product, Multicolumn (cards), Before and after, Product set, Video, Testimonials, Collapsible content, Email signup |
| Graphite | Split hero, Featured collection (carousel), Image collage, Collection list, Table, Store locations, Email signup |
All three use Announcement bar and Header at the top, and Footer and Email popup at the bottom.
Tips for building pages
- Start with the job, not the look. Decide what a shopper should do on the page, then pick sections that lead there.
- One hero per page. A single strong opening section loads faster and reads better than several stacked banners.
- Vary the rhythm. Alternate wide image sections with quieter text or product sections, and switch color schemes to separate them. See Layout and spacing.
- Use real content. Sections such as Testimonials, Promotion countdown and Before and after should only show real quotes, real dates and real photos.
- Check on a phone. Use the device switcher at the top of the theme editor to preview every page on mobile.
Section guides
The most used sections have a short guide at the top of their reference page, with best practices and preset tips:
- Header area: Announcement bar, Header, Footer
- Heroes: Slideshow, Image banner, Hero collage, Split hero, Promotion countdown, Scrolling text
- Products: Featured collection, Collection list, Shoppable image, Product set, Recently viewed, Cart recommendations
- Story: Image with text, Before and after, Testimonials
- Templates: Product information, Product grid