Add a section
- In the theme editor, open the page you want to change.
- Click Add section where you want it.
- Choose a section from the list.
- Fill in its settings and blocks, then click Save.
Most sections have a Color scheme setting and Top padding and Bottom padding settings. They are left out of the lists below.
Hero and finder
Hero with vehicle finder
The top of your home page: a heading, an image, and a finder panel with tabs.
| Setting | What it does |
|---|---|
| Eyebrow, Heading, Text | Your message. In the heading, use italic to highlight words in the accent color. |
| Image | 1500 x 1500px recommended. Drag the focal point to keep the subject in view. |
| Finder color scheme | The colors of the finder panel. |
| Show vehicle tab | The Year, Make, Model finder. Needs vehicle fitment and a vehicle list menu in theme settings. |
| Show part number tab | A search field for part numbers and OEM numbers. |
| Show tire size tab | The tire size finder. See Tire size search. |
| Tab shown first | Vehicle, Part number or Tire size. |
| Finder button label | The vehicle finder button. Default: Find parts that fit. |
Blocks:
| Block | What it does |
|---|---|
| Hotspot (up to 4) | A labeled point on the image that links to a product. Set the Product (or a Link), a Label, a Note, the Horizontal position and Vertical position, and the Label position. |
| Featured build (1) | A small card that links to a build, with an Eyebrow, Heading, Button label and Link. |
The featured card and the hotspots describe what is in the hero image. When you change the image, update them to match: point the hotspots at the parts shown, and link the card to the build, collection or product in the photo. Delete a block to hide it.
My garage
A full page where shoppers add vehicles and manage their saved vehicles. Add it to a page template, for example one you create for a “My garage” page.
| Setting | What it does |
|---|---|
| Finder color scheme | The colors of the add vehicle panel. |
| Heading, Text | The page heading and intro text. |
- In the theme editor, choose Pages from the page list, then Create template. Name it “garage”.
- Add the My garage section to the template and save.
- In your admin, create a page called “My garage” and choose the garage theme template.
- Add the page to a menu.
Tire size decoder
Explains each part of a tire size. Add a Size part block (up to 8) with a Code, Label and Meaning. See Tire size decoder section.
Product sections
Featured collection
A row of products from one or more collections. With two or more collections, shoppers switch between them with tabs.
| Setting | What it does |
|---|---|
| Eyebrow, Heading | The section heading. |
| Products per tab | 2 to 24. |
| Columns on desktop | 2 to 5. |
| Show View all button | Links to the collection when it has more products than the row shows. |
| Collection tab (block, up to 4) | Choose a Collection. Tab label is optional; leave it empty to use the collection title. |
Featured product
One product with its media and buy buttons, on any page. Choose the Product. It has the same media settings as the product page, and most of the same blocks: Vendor and part number, Title, Product rating, Price, Fit status, Variant picker, Subscription options, Quantity selector, Buy buttons, Pickup availability, Inventory status, Icons with text, Specifications, Description, Text, Custom Liquid and app blocks. See Product pages.
Collection list
A grid of collections, for example your main categories.
| Setting | What it does |
|---|---|
| Eyebrow, Heading | The section heading. |
| Link label | A link to your page of all collections. Default: All categories. |
| Columns on desktop | 3 to 6. |
| Show product count | Shows the number of products in each collection. |
| Collection (block, up to 18) | Choose a Collection. Heading and Image are optional. Image: 600 x 600px recommended. |
Product details
Specs, vehicle fitment table and install information on the product page. See Product pages. Works on product templates only.
Related products
Products related to the one on the page, set in the Search & Discovery app. Works on product templates only. Settings: Heading, Maximum products and Columns on desktop.
Content sections
Ticker band
A moving band of short messages, for example “Free shipping over $99”.
| Setting | What it does |
|---|---|
| Time for one loop | 20 to 80 seconds. A higher number moves slower. |
| Message (block, up to 12) | A Text and an optional Link. |
The band has a pause button, and stops moving for shoppers who prefer reduced motion.
Image banner
A full-width image with text and up to two buttons.
| Setting | What it does |
|---|---|
| Image | 2400 x 1000px recommended. |
| Image overlay opacity | Darkens the image so text is easy to read. 0 to 90%. |
| Eyebrow, Heading, Text | Your message. |
| First button label, First button link | The main button. |
| Second button label, Second button link | An optional second button. |
Image with text
An image beside text. Settings: Image (1500 x 1125px recommended), Image position (Left or Right) and Image ratio (Landscape, Square or Portrait). Blocks: Eyebrow, Heading, Text, Button (up to 2, with Use outline style), Custom Liquid and app blocks.
Rich text
Text on its own, for a message or a promise. Setting: Alignment (Left or Center). Blocks: Eyebrow, Heading, Text, and Buttons (up to two buttons).
Multicolumn
Columns with an icon or image, a heading, text and a link. Good for store benefits.
| Setting | What it does |
|---|---|
| Eyebrow, Heading, Link label, Link | The section heading and an optional link. |
| Columns on desktop | 2 to 4. |
| Column (block, up to 12) | Icon, or an Image that replaces the icon (160 x 160px recommended), Heading, Text, Link label and Link. |
Promotion banner
A banner for a sale or offer.
| Setting | What it does |
|---|---|
| Banner color scheme | The colors of the banner itself. |
| Eyebrow, Heading, Text | Your offer. |
| Button label, Link | The button. |
| Show hazard stripes | Adds a striped edge to the banner. |
Logo list
Logos of the brands you stock. Add a Logo block (up to 12) with the Logo image (400 x 160px .png recommended), the Brand name (used as alternative text) and an optional Link.
Testimonials
Customer quotes. Add a Testimonial block (up to 9) with a Star rating (0 hides the stars), Quote, Name and Detail, for example the customer's vehicle.
Blog posts
Recent posts from one blog.
| Setting | What it does |
|---|---|
| Eyebrow, Heading, Link label | The section heading and a link to the blog. |
| Blog | The blog to show. |
| Posts to show | 2 to 6. |
| Columns on desktop | 2 or 3. |
| Show excerpt | Shows a short summary of each post. |
Parts used in a blog post
The blog post page has a Parts used block: a list of the products in a build, each with its fit status and an Add button, and one Add all to cart button at the top.
- Different parts for each post: in Shopify admin, go to Settings > Custom data > Blog posts and add a definition with namespace and key
custom.parts_used, type Product, list of products. Then pick the parts on each post. Posts without their own list use the products chosen in the block. - Link straight to the list: add
#partsto the end of the post URL, for example in a "Shop this build" button.
Video
A video that plays when the shopper clicks it.
| Setting | What it does |
|---|---|
| Eyebrow, Heading | The section heading. |
| Video | An uploaded video. Replaces the URL below. |
| YouTube or Vimeo URL | A link to a YouTube or Vimeo video. |
| Cover image | Shown before the video plays. 1600 x 900px recommended. |
| Video description | Describes the video for screen readers. |
| Ratio | Widescreen or Cinema. |
FAQ
Questions and answers that open and close.
| Setting | What it does |
|---|---|
| Heading, Heading size, Body text | The section heading and intro. |
| Show topic links | Links to each topic, shown when there are two or more topic headings. |
| Add FAQ data for search engines | Adds FAQ data search engines can read. Use it on one FAQ section per page. |
| Call to action | A box with a Heading, Body text, Button label, Button link and Call to action color scheme. |
| Topic heading (block) | Groups the questions below it. |
| Question (block) | Question, Answer, and Open by default. |
Newsletter
An email signup form. See Newsletter.
Apps and custom code
App blocks
Many apps add blocks you can place in the theme editor, with no code. Datum accepts app blocks in these sections: Product information, Featured product, Product details, Image with text, Blog post, Contact form, Footer, Apps, and the main sections of the collection, search, cart, blog and page templates.
To add one, click Add block inside the section and choose the app block from the Apps list.
Apps section
A section that only holds app blocks. Use it to place an app anywhere on a page. Make section margins the same as the theme keeps the app in line with the rest of the page.
Custom Liquid
The Custom Liquid section lets you add app snippets or other Liquid code. Product information, Featured product and Image with text also have a Custom Liquid block.
Code you add in Custom Liquid is not covered by our support. See Updates and custom code.
Header and footer
The Header, Footer and Newsletter sections are covered on Header and footer.