Store setup
Collections and filters
Set up collection pages, filters, sorting, promotion tiles and the collections list page.
A collection page in Vellora has two sections: the Collection banner at the top and the Product grid below it. Filters and sorting live in the product grid.
Create a collection
- In your Shopify admin, go to Products > Collections and click Create collection.
- Add a title, a description and a collection image. Vellora shows the image in the banner, so use a wide image, around 1600 x 900px.
- Choose Manual or Smart and add products.
- Click Save.
Set up filters
Vellora shows the filters you set up in Shopify's free Search & Discovery app. The theme itself doesn't decide which filters appear.
- Install Search & Discovery from the Shopify App Store.
- In the app, go to Filters and click Add filter.
- Choose a source, such as Availability, Price, Product type, Vendor, Tag, a product option like Size, or a metafield.
- Save. The filter appears on collection and search pages straight away.
Vellora supports every filter type: lists of values, color swatches and a price range with From and To fields. When a filter is set to show swatches in the app, Vellora shows the swatch next to each value. See Swatches.
How filters behave
- Results update as customers tick filters, without a page reload, and the page address updates so the filtered view can be shared or bookmarked.
- Active filters appear as removable pills above the grid, with a Clear all link.
- Values with no matching products are grayed out.
- The first four filters start open in the sidebar and the drawer.
- Customers without JavaScript get an Apply button instead.
Product grid settings
Select the Product grid section on a collection page in the theme editor.
| Setting | Options | Default |
|---|---|---|
| Products per page | 8 to 36 | 24 |
| Columns on desktop | 2 to 5 | 3 |
| Columns on mobile | 1 column, 2 columns | 2 columns |
| Let customers change the number of columns | On or off | On |
| Pagination | Page numbers, Load more button | Load more button |
| Enable filtering | On or off | On |
| Desktop filter layout | Sidebar, Horizontal, Drawer | Sidebar |
| Enable sorting | On or off | On |
All settings are listed in the Product grid reference.
Filter layouts
| Layout | On desktop |
|---|---|
| Sidebar | Filters sit in a sticky column on the left of the grid. |
| Horizontal | Filters sit in a row above the grid and open as dropdowns, one at a time. |
| Drawer | A Filter button opens the filters in a drawer. |
On screens narrower than 990px, every layout uses the drawer, so mobile customers always get a full-height filter panel with Clear all and Show results buttons.
Column toggle
With Let customers change the number of columns on, customers can switch between your desktop column count and a larger two-column view. The toggle appears on desktop only.
Promotion tiles
Promotion tiles sit inside the product grid, between products. Use them to point to a related collection, a lookbook or an offer.
- Select the Product grid section and click Add block, then Promotion tile.
- Set Show before product to the position in the grid, such as 5.
- Choose a Width of one or two columns.
- Add an image, an eyebrow, a heading, a link label and a link.
You can add up to three promotion tiles. They appear on the first page of results only.
Collection banner settings
| Setting | What it does |
|---|---|
| Layout | Text beside image, Text over image or Centered text. |
| Heading size | Medium, Large or Extra large. |
| Show collection image | Shows the image set on the collection. 1600 x 900px .jpg recommended. |
| Show collection description | Shows the collection description from the admin. |
| Show breadcrumbs | Shows a link path back to the home page. |
| Collection links style | How Collection link blocks look: Pills, Circles with image or Text. |
Link to related collections
Add Collection link blocks to the banner to show shortcuts to related collections, such as sub-categories. Each block takes a collection and an optional label. Without a label, it uses the collection title.
See the Collection banner reference.
Collections list page
The page at /collections lists all your collections with the Collections list page section. You can set the heading, the number of columns on desktop and the image ratio: Portrait, Square or Landscape. It uses each collection's image. See the Collections list page reference.
Tips
- Keep filter lists short. Five to eight filters are easier to scan than fifteen.
- Use the same option names across products, such as always Color rather than a mix of Color and Colour, so they merge into one filter.
- If products sell out often, add an Availability filter so customers can hide sold out items.
- Product cards are set in Theme settings > Product cards: image ratio, hover image, swatches, rating and quick add. See the theme settings reference.