To open theme settings, click the Theme settings icon in the left sidebar of the theme editor.
Logo and favicon
| Setting | What it does |
|---|---|
| Logo | Your logo. |
| Logo on dark backgrounds | Used in the header and footer when they use a dark color scheme. |
| Logo width | 80 to 320px. Default: 200px. |
| Favicon | The small icon in the browser tab. 32 x 32px .png recommended. |
Colors
Datum uses color schemes. Each section has a Color scheme setting, so you can pick a scheme per section. Each style comes with four schemes: a white scheme, a light gray scheme, a dark scheme, and a scheme in the accent color. You can edit them or add more.
Each color scheme has these colors:
| Group | Setting | What it does |
|---|---|---|
| Background | Background | The section background. |
| Background | Panel background | Image wells, finder panel and table rows. |
| Text | Text | Main text. |
| Text | Secondary text | Less important text, like notes and counts. |
| Text | Highlighted text | Eyebrows and highlighted words in headings. |
| Lines | Dividers | Lines between items. |
| Lines | Input borders | Borders of fields and dropdowns. |
| Primary button | Background | The main button color. |
| Primary button | Background on hover | The main button color when a shopper points at it. |
| Primary button | Label | The text on the main button. |
| Focus | Keyboard focus outline | The outline shown when shoppers move through the page with a keyboard. |
Fit colors (fits, check fit and does not fit) are fixed so shoppers can trust them on every page. Keep enough contrast between text and background so everyone can read your store.
Typography
| Setting | What it does |
|---|---|
| Heading font | Used for headings, prices, buttons and fit bars. Condensed fonts fit best. |
| Use uppercase headings | Shows headings in capital letters. |
| Body font | Used for body text. |
| Data font | Used for part numbers, spec labels and counts. |
Layout
| Setting | What it does |
|---|---|
| Page width | 1080 to 1680px. Default: 1360px. |
| Show section entrance animation | Sections fade in as shoppers scroll. Turned off automatically for shoppers who prefer reduced motion. |
Vehicle fitment
See Vehicle fitment for how to set these up.
| Setting | What it does |
|---|---|
| Enable vehicle fitment | Shows the vehicle finder, My garage and fit badges. |
| Fitment data source | Product metafield, or Product tags. |
| Fitment metafield | Namespace and key of a list of single line text, for example custom.fitment. Each entry is one vehicle, like 2019 Honda Civic. |
| Fitment tag prefix | The start of each fitment tag. Default: fit:. |
| Universal fit tag | Products with this tag fit every vehicle. Default: universal. |
| Vehicle list menu | A menu with makes, then models, then years. The vehicle finder reads its options from here. |
| First step label | Label of the first finder step. Default: Year. |
| Second step label | Label of the second finder step. Default: Make. |
| Third step label | Label of the third finder step. Default: Model. |
| Show fit check in cart | Warns shoppers about parts that do not fit their vehicle, without blocking checkout. |
| Tire size metafield | Namespace and key of a list of single line text with sizes like 315/70R17. Add it as a filter in Search & Discovery. Leave it empty to use store search instead. See Tire size search. |
Quantity
How shoppers pick a quantity on product pages and in quick add: a plus and minus stepper, or preset buttons such as 1, 2, 4 (Set) and 5 (With spare) for tires and wheels. See Quantity selector for every setting.
Product images
One shape for every product photo, so a product looks the same on cards, the product page, quick add, compare, the cart and search suggestions. On the product page, shoppers can click a photo to see all of it.
| Setting | What it does |
|---|---|
| Image shape | Square (default), Portrait (4:5) or Landscape (4:3). |
| Image fit | Crop to fill (default, no empty bars), or Show the whole image (keeps every edge; suits parts shot on white). |
Product cards
See Collections and search for details.
| Setting | What it does |
|---|---|
| Show second image on hover | Shows the second product image on hover. |
| Show vendor | Shows the vendor. |
| Show part number | Shows the SKU. |
| Show product rating | Uses the standard product rating metafield from review apps. |
| Show spec row | Shows the first 3 specs from the product specs metafield. |
| Specs metafield | Namespace and key of a multi-line text metafield. One spec per line as Label: Value, for example Lift height: 2.5 in. |
| Show swatches | Shows option swatches. |
| Enable quick add | Adds a buy button to each card. |
| Enable compare | Adds a compare checkbox to each card. |
| Show stock status | Shows In stock on products with stock. |
| Restock request page | Sold out products link here with an Ask about restock button. Use a page with the contact form template. |
Cart
| Setting | What it does |
|---|---|
| Cart type | Drawer opens the cart in a side panel. Page opens the cart page. |
| Show order note | Lets shoppers add a note to their order. |
| Order note label | The label of the note field. Default: Note for our parts team. |
Search
| Setting | What it does |
|---|---|
| Enable search suggestions | Shows suggestions as shoppers type in the header search. |
| Search field placeholder | The hint text in the empty search field. |
Currency format
| Setting | What it does |
|---|---|
| Show currency codes | Shows codes like USD next to prices. Cart and checkout prices always show currency codes. |
Social media
Add the full link to each of your social profiles, for example https://www.instagram.com/yourstore. Icons show in the footer when Show social media icons is on in the Brand information block.
| Setting | What it does |
|---|---|
| Facebook, Instagram, YouTube, TikTok, X (Twitter), Pinterest, Snapchat, Tumblr, Vimeo | Links to your profiles. Leave a field empty to hide that icon. |