Sections and blocks
Every section and block in Anvil, with the same names you see in the theme editor. To open the editor, go to Online Store > Themes and click Customize.
Home page
Hero
The first section on the home page. Use Text on image for a full-width photo, or Text next to image for a split layout. Turn on Show search bar so customers can search by SKU right from the banner.
| Setting | Type | Details |
|---|---|---|
| Layout | Menu | Options: Text on image, Text next to image Default: Text on image |
| Image | Image | 2400 x 1200px .jpg recommended |
| Image on small screens | Image | Optional. 3:4 aspect ratio recommended |
| Section height | Menu | Options: Small, Medium, Large Default: Medium |
| Image overlay opacity | Slider | From 0% to 80% Default: 20% |
| Content position | Menu | Options: Left, Center, Right Default: Left |
| Color scheme | Color scheme | |
| Content | ||
| Subheading | Text | Default: Subheading |
| Heading | Text | Default: Image banner |
| Heading size | Menu | Options: Medium, Large, Extra large Default: Extra large |
| Text | Rich text | |
| Show search bar | Checkbox | Default: On |
| Search placeholder | Text | Default: Search by product, SKU, or part number |
| Buttons | ||
| First button label | Text | Default: Button label |
| First button link | Link | |
| Second button label | Text | |
| Second button link | Link | |
Service highlights
A row of short promises such as delivery, pickup, or trade accounts. Each highlight can link to a page.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Top padding | Slider | From 0px to 120px Default: 0px |
| Bottom padding | Slider | From 0px to 120px Default: 0px |
Highlight block
| Setting | Type | Details |
|---|---|---|
| Icon | Menu | Options: Delivery, Store, Clock, Phone, Tag, Shield, Wrench, Box, Ruler, Bolt Default: Delivery |
| Heading | Text | Default: Highlight a service |
| Text | Text | Default: Add a short detail |
| Link | Link |
Collection list
Department cards for your main collections. Add one Collection block per department.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Subheading | Text | |
| Heading | Text | Default: Shop by department |
| Text | Rich text | |
| Link label | Text | Default: View all |
| Columns on large screens | Slider | From 3 to 6 Default: 6 |
| Columns on small screens | Menu | Options: 1, 2 Default: 2 |
| Image fit | Menu | Options: Show full image, Fill frame Default: Show full image |
| Show product count | Checkbox | Default: On |
| Top padding | Slider | From 0px to 120px Default: 32px |
| Bottom padding | Slider | From 0px to 120px Default: 32px |
Collection block
| Setting | Type | Details |
|---|---|---|
| Collection | Collection | |
| Custom title | Text | Leave blank to use the collection title |
| Custom image | Image | Leave blank to use the collection image |
Featured collection
Shows products from one collection. Choose List layout to show specification metafields next to each product.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Collection | Collection | |
| Subheading | Text | |
| Heading | Text | Default: Featured collection |
| Text | Rich text | |
| Link label | Text | Default: View all |
| Product count | Slider | From 2 to 24 Default: 8 |
| Columns on large screens | Slider | From 2 to 6 Default: 4 |
| Layout | Menu | Options: Grid, List Default: Grid |
| Specification metafields | Text | Shown in list layout. Enter up to 3 product metafield keys separated by commas, for example custom.material, custom.size |
| Top padding | Slider | From 0px to 120px Default: 32px |
| Bottom padding | Slider | From 0px to 120px Default: 32px |
Shop by project
Groups products by job, for example "Bathroom refit" or "Fence repair". Each project can show up to 6 quick links from a menu.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Subheading | Text | |
| Heading | Text | Default: Shop by project |
| Text | Rich text | |
| Columns on large screens | Slider | From 2 to 4 Default: 3 |
| Top padding | Slider | From 0px to 120px Default: 48px |
| Bottom padding | Slider | From 0px to 120px Default: 48px |
Project block
| Setting | Type | Details |
|---|---|---|
| Image | Image | 4:3 aspect ratio recommended |
| Heading | Text | Default: Project name |
| Text | Rich text | |
| Quick links | Menu picker | Shows up to 6 links as tags |
| Link label | Text | Default: Shop the project |
| Link | Link |
Multicolumn
Columns of icons, headings, and text. Useful for explaining services or trade benefits.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Layout | Menu | Options: Heading next to columns, Heading above columns Default: Heading next to columns |
| Subheading | Text | Default: Subheading |
| Heading | Text | Default: Multicolumn |
| Text | Rich text | |
| Button label | Text | Default: Button label |
| Button link | Link | |
| Top padding | Slider | From 0px to 120px Default: 64px |
| Bottom padding | Slider | From 0px to 120px Default: 64px |
Column block
| Setting | Type | Details |
|---|---|---|
| Icon | Menu | Options: Tag, Delivery, Store, Clock, Phone, Shield, Wrench, Box, Ruler, Bolt, Document Default: Tag |
| Heading | Text | Default: Column |
| Text | Rich text |
Image with text
An image beside a heading, text, and button.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Image | Image | |
| Image ratio | Menu | Options: Square, Landscape, Portrait Default: Landscape |
| Image position on large screens | Menu | Options: Left, Right Default: Left |
| Subheading | Text | |
| Heading | Text | Default: Image with text |
| Text | Rich text | |
| Button label | Text | Default: Button label |
| Button link | Link | |
| Button style | Menu | Options: Primary, Secondary Default: Primary |
| Top padding | Slider | From 0px to 120px Default: 48px |
| Bottom padding | Slider | From 0px to 120px Default: 48px |
Logo list
Brand logos with optional links to their collections.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Subheading | Text | |
| Heading | Text | Default: Brands we stock |
| Columns on large screens | Slider | From 3 to 8 Default: 6 |
| Show logos in grayscale | Checkbox | Default: On |
| Top padding | Slider | From 0px to 120px Default: 32px |
| Bottom padding | Slider | From 0px to 120px Default: 32px |
Logo block
| Setting | Type | Details |
|---|---|---|
| Logo | Image | 320 x 120px .png recommended |
| Brand name | Text | Used as alternative text |
| Link | Link |
Rich text
Headings, text, and buttons on a plain background.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Alignment | Menu | Options: Left, Center Default: Center |
| Top padding | Slider | From 0px to 120px Default: 48px |
| Bottom padding | Slider | From 0px to 120px Default: 48px |
Heading block
| Setting | Type | Details |
|---|---|---|
| Heading | Text | Default: Talk about your brand |
| Heading size | Menu | Options: Small, Medium, Large Default: Medium |
Text block
| Setting | Type | Details |
|---|---|---|
| Text | Rich text |
Button block
| Setting | Type | Details |
|---|---|---|
| Button label | Text | Default: Button label |
| Button link | Link | |
| Button style | Menu | Options: Primary, Secondary, Outline Default: Primary |
Email signup
An email signup form. Subscribers are added to your customer list with email marketing consent.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Heading | Text | Default: Subscribe to our emails |
| Text | Rich text | |
| Button label | Text | Default: Subscribe |
| Top padding | Slider | From 0px to 120px Default: 48px |
| Bottom padding | Slider | From 0px to 120px Default: 48px |
Custom Liquid
Adds your own Liquid, HTML, or app snippets. Code in this section isn't covered by theme support.
| Setting | Type | Details |
|---|---|---|
| Liquid code | Liquid | Add app snippets or other code to create advanced customizations |
| Color scheme | Color scheme | |
| Top padding | Slider | From 0px to 120px Default: 32px |
| Bottom padding | Slider | From 0px to 120px Default: 32px |
Custom section
A flexible container for theme blocks and app blocks.
| Setting | Type | Details |
|---|---|---|
| Background image | Image |
Theme blocks
Add Group and Text blocks, or blocks from apps.
Header and footer
Top bar
The thin bar above the header. Add messages such as delivery cut-off times and a secondary menu.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Secondary menu | Menu picker | Shown on large screens |
Message block
| Setting | Type | Details |
|---|---|---|
| Icon | Menu | Options: None, Delivery, Store, Clock, Phone, Tag, Shield, Wrench Default: Delivery |
| Text | Text | Default: Share store hours, delivery, or pickup details |
| Link | Link |
Header
Logo, search, account, and cart. Main menu items that have second-level links with their own links open as a mega menu.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Main menu | Menu picker | Second-level links with their own links appear as a mega menu |
| Customer account menu | Menu picker | |
| Search placeholder | Text | Default: Search by product, SKU, or part number |
| Keep header visible when scrolling | Checkbox | Default: On |
Menu promotion block
| Setting | Type | Details |
|---|---|---|
| Main menu item | Text | Enter the exact name of a main menu item with a dropdown |
| Image | Image | 4:3 aspect ratio recommended |
| Heading | Text | Default: Featured promotion |
| Text | Text | Default: Add a short description |
| Link | Link |
Footer
Brand information, menus, text, and an email signup, plus a bottom bar with country, language, payment icons, and policies.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Bottom bar | ||
| Show country/region selector | Checkbox | Add countries or regions in your market settings Default: On |
| Show language selector | Checkbox | Add languages in your language settings Default: On |
| Show Follow on Shop | Checkbox | Customers need the Shop app installed to follow your store Default: On |
| Show payment icons | Checkbox | Default: On |
| Show policy links | Checkbox | Default: On |
| Show Powered by Shopify | Checkbox | Default: Off |
Brand information block
| Setting | Type | Details |
|---|---|---|
| Show logo | Checkbox | Default: On |
| Text | Rich text | |
| Show social media icons | Checkbox | Add links in theme settings Default: On |
Menu block
| Setting | Type | Details |
|---|---|---|
| Heading | Text | Default: Quick links |
| Footer menu | Menu picker |
Text block
| Setting | Type | Details |
|---|---|---|
| Heading | Text | Default: Heading |
| Text | Rich text |
Email signup block
| Setting | Type | Details |
|---|---|---|
| Heading | Text | Default: Subscribe to our emails |
| Text | Rich text |
Product
Product information
The product page. Blocks with a Placement on large screens setting can sit next to the media or below it.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Media ratio | Menu | Options: Square, Portrait, Landscape Default: Square |
| Media fit | Menu | Options: Show full image, Fill frame Default: Show full image |
| Keep product information visible when scrolling | Checkbox | Default: On |
| Update the page URL when a variant is selected | Checkbox | Default: On |
| Top padding | Slider | From 0px to 120px Default: 24px |
| Bottom padding | Slider | From 0px to 120px Default: 48px |
App blocks
Apps that support theme app extensions can add blocks here.
Text block
| Setting | Type | Details |
|---|---|---|
| Text | Rich text | |
| Text style | Menu | Options: Body text, Subtle Default: Body text |
Vendor block
This has no settings of its own.
Title block
| Setting | Type | Details |
|---|---|---|
| Heading size | Menu | Options: Small, Medium, Large Default: Medium |
SKU and codes block
| Setting | Type | Details |
|---|---|---|
| Show barcode | Checkbox | Default: Off |
| Show product type | Checkbox | Default: Off |
Price block
This has no settings of its own.
Stock status block
| Setting | Type | Details |
|---|---|---|
| Shows real inventory levels. Set the low stock threshold in theme settings. | ||
Variant picker block
| Setting | Type | Details |
|---|---|---|
| Style | Menu | Options: Buttons, Dropdown Default: Buttons |
Volume pricing block
| Setting | Type | Details |
|---|---|---|
| Heading | Text | Default: Volume pricing |
| Shows quantity rules and price breaks from B2B catalogs. | ||
Buy buttons block
| Setting | Type | Details |
|---|---|---|
| Show quantity selector | Checkbox | Default: On |
| Show dynamic checkout buttons | Checkbox | Customers see their preferred payment option, like PayPal or Apple Pay Default: On |
| Show recipient form for gift cards | Checkbox | Default: On |
Bulk order table block
| Setting | Type | Details |
|---|---|---|
| Heading | Text | Default: Order multiple sizes |
| Collapse by default | Checkbox | Default: Off |
| Lists up to 50 variants with a quantity field for each. | ||
Description block
| Setting | Type | Details |
|---|---|---|
| Placement on large screens | Menu | Options: Next to media, Below media Default: Below media |
| Heading | Text | Default: Overview |
Specifications block
| Setting | Type | Details |
|---|---|---|
| Placement on large screens | Menu | Options: Next to media, Below media Default: Below media |
| Heading | Text | Default: Specifications |
| Product metafields | Multi-line text | One per line, as Label: namespace.key. For example Material: custom.material |
| Show vendor | Checkbox | Default: On |
| Show product type | Checkbox | Default: On |
| Show weight | Checkbox | Default: On |
| Show barcode | Checkbox | Default: Off |
Downloads block
| Setting | Type | Details |
|---|---|---|
| Placement on large screens | Menu | Options: Next to media, Below media Default: Below media |
| Heading | Text | Default: Manuals and data sheets |
| File metafield | Text | A file or list of files metafield, for example custom.documents |
| Extra link label | Text | |
| Extra link | Link |
Collapsible row block
| Setting | Type | Details |
|---|---|---|
| Placement on large screens | Menu | Options: Next to media, Below media Default: Next to media |
| Icon | Menu | Options: None, Delivery, Shield, Box, Ruler, Wrench, Information Default: Delivery |
| Heading | Text | Default: Collapsible row |
| Row content | Rich text | |
| Row content from page | Page |
Complementary products block
| Setting | Type | Details |
|---|---|---|
| Select complementary products in the Search and Discovery app. | ||
| Heading | Text | Default: Pairs well with |
| Maximum products | Slider | From 1 to 6 Default: 3 |
Share block
This has no settings of its own.
Custom Liquid block
| Setting | Type | Details |
|---|---|---|
| Liquid code | Liquid | Add app snippets or other code to create advanced customizations |
Related products
Related products below the product information.
| Setting | Type | Details |
|---|---|---|
| Recommendations update automatically over time. You can also set related products in the Search and Discovery app. | ||
| Color scheme | Color scheme | |
| Heading | Text | Default: You may also need |
| Maximum products | Slider | From 2 to 10 Default: 4 |
| Columns on large screens | Slider | From 2 to 5 Default: 4 |
| Top padding | Slider | From 0px to 120px Default: 32px |
| Bottom padding | Slider | From 0px to 120px Default: 48px |
Collection and search
Product grid
The collection page product grid with filters, sorting, and the grid and list switch.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Collection banner | ||
| Show collection description | Checkbox | Default: On |
| Show collection image | Checkbox | Default: On |
| Products | ||
| Products per page | Slider | From 8 to 48 Default: 24 |
| Columns on large screens | Slider | From 2 to 5 Default: 4 |
| Columns on small screens | Menu | Options: 1, 2 Default: 2 |
| Default layout | Menu | Options: Grid, List Default: Grid |
| Let customers switch between grid and list | Checkbox | Default: On |
| Specification metafields | Text | Shown in list layout. Enter up to 3 product metafield keys separated by commas, for example custom.material, custom.size |
| Filtering and sorting | ||
| Enable filtering | Checkbox | Customize filters with the Search and Discovery app Default: On |
| Enable sorting | Checkbox | Default: On |
Collections list page
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Collections per page | Slider | From 12 to 48 Default: 24 |
| Columns on large screens | Slider | From 3 to 6 Default: 5 |
| Top padding | Slider | From 0px to 120px Default: 48px |
| Bottom padding | Slider | From 0px to 120px Default: 64px |
Search results
The search results page. It uses the same filters and list layout as collections.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Results per page | Slider | From 8 to 48 Default: 24 |
| Columns on large screens | Slider | From 2 to 5 Default: 4 |
| Columns on small screens | Menu | Options: 1, 2 Default: 2 |
| Default layout | Menu | Options: Grid, List Default: List |
| Let customers switch between grid and list | Checkbox | Default: On |
| Specification metafields | Text | Shown in list layout. Enter up to 3 product metafield keys separated by commas, for example custom.material, custom.size |
| Enable filtering | Checkbox | Customize filters with the Search and Discovery app Default: On |
| Enable sorting | Checkbox | Default: On |
Cart
Cart
The cart page.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Top padding | Slider | From 0px to 120px Default: 32px |
| Bottom padding | Slider | From 0px to 120px Default: 64px |
Cart drawer
The slide-out cart used when Cart type is set to Drawer.
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme |
Other pages
Page
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Top padding | Slider | From 0px to 120px Default: 48px |
| Bottom padding | Slider | From 0px to 120px Default: 48px |
Contact form
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Heading | Text | Default: Contact form |
| Top padding | Slider | From 0px to 120px Default: 0px |
| Bottom padding | Slider | From 0px to 120px Default: 64px |
Blog posts
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Articles per page | Slider | From 3 to 24 Default: 9 |
| Top padding | Slider | From 0px to 120px Default: 48px |
| Bottom padding | Slider | From 0px to 120px Default: 64px |
Blog post
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Show author | Checkbox | Default: On |
| Top padding | Slider | From 0px to 120px Default: 48px |
| Bottom padding | Slider | From 0px to 120px Default: 64px |
Page not found
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme |
Password
| Setting | Type | Details |
|---|---|---|
| Color scheme | Color scheme | |
| Heading | Text | Default: Opening soon |
| Show email signup | Checkbox | Default: On |