Getting started
Theme editor basics
Find your way around the Shopify theme editor and learn how Vellora's sections, blocks and theme settings fit together.
You customize Vellora in the Shopify theme editor. You don't need to edit code for anything in these docs.
Open the theme editor
- In your Shopify admin, go to Online Store > Themes.
- Next to Vellora, click Customize.
The editor opens on the home page. Use the page menu at the top of the editor to switch to a product, a collection, the cart or any other template.
Sections and blocks
Each page is a stack of sections. Many sections contain blocks, the smaller pieces inside them, such as a heading, a button or a single slide.
- Add a section: click Add section in the sidebar and choose one. Vellora's sections are listed in the section reference.
- Add a block: expand a section and click Add block.
- Reorder: drag a section or a block by its handle.
- Hide: click the eye icon. Hidden sections keep their settings but don't appear on the store.
- Remove: select the section or block and click Remove at the bottom of its settings.
Header and footer groups
The sections at the top and bottom of the sidebar appear on every page.
| Group | Vellora sections |
|---|---|
| Header | Announcement bar and Header |
| Footer | Footer and Email popup |
You can add other sections to these groups too, such as a Scrolling text banner below the header.
Templates
Each kind of page uses a template. Changes you make on one product apply to every product that uses the same template.
Vellora includes these templates:
| Template | Used for |
|---|---|
| Home page | Your store's front page |
| Product | Product pages |
| Collection | Collection pages |
| Collections list | The /collections page |
| Search | Search results |
| Cart | The cart page |
| Blog and Blog post | Your blog and its posts |
| Page | Standard pages |
| Page: about, contact, faq | Ready-made layouts for an about page, a contact page and an FAQ page. See About, contact and FAQ pages. |
| Password | The page visitors see while your store is password protected |
| 404 | The page not found screen |
| Gift card | The gift card page customers receive by email |
To give some products or collections a different layout, create an alternate template: open the page menu, choose a template type, click Create template and base it on the default. Then assign it to products or collections in the Shopify admin.
Theme settings
Theme settings apply to the whole store. Click the Theme settings icon in the editor's left bar to open them.
| Group | What it controls |
|---|---|
| Logo and favicon | Logo image, logo width, favicon |
| Colors | Color schemes used by every section |
| Typography | Heading and body fonts, size, letter case and spacing |
| Layout | Page width, page margin and grid gap |
| Buttons and inputs | Corner radius of buttons and form fields |
| Product cards | Image ratio, corner radius, vendor, rating, swatches, hover image, quick add |
| Media | Corner radius of images in sections |
| Animations | Reveal on scroll, drawer and cart animations, image zoom on hover |
| Badges | Sale and sold out badge colors and corner radius |
| Drawers and popups | Drawers attached to the edge or floating |
| Cart | Cart type and every cart feature |
| Search | Search suggestions |
| Currency format | Currency codes next to prices |
| Social media | Links to your social accounts |
Every setting is listed with its default value in the theme settings reference.
App embeds
Some apps add features to the whole store, such as a chat button or a reviews widget. Turn them on under App embeds in the editor's left bar. Apps that add a block to a page, such as a reviews block on the product page, appear under Add block in the Product information and Featured product sections. To place an app block anywhere else, add the Apps section.
Preview on mobile
Use the device toggle at the top of the editor to switch between desktop and mobile. Check both before you save, especially section padding and image crops.
Save and undo
Click Save to keep your changes. Until you save, you can undo changes with the undo button or Ctrl+Z (Cmd+Z on a Mac). Saved changes on the published theme go live straight away.