Chassis theme documentation

Getting started with Chassis

This page covers installing Chassis, setting up the first things a shopper sees, and what each global setting does. Work through the first 30 minutes in order. Then return to the settings table when you need a specific control.

Install the theme

  1. In the Shopify admin, go to Online Store > Themes.
  2. Click Add theme, then install Chassis from the Shopify Theme Store, or upload the theme zip file.
  3. On the theme card, open Actions > Duplicate. Keep the duplicate as a backup. Work on the copy you publish.
  4. Click Customize on the copy to open the theme editor.
  5. When the store is ready, click Publish on the copy. Publishing replaces the live theme, so test first.

The first 30 minutes

  1. Logo. In the theme editor, open Theme settings > Logo and favicon. Upload the logo under Logo. Set Logo width to fit the header, then check the logo on a phone.
  2. Colors. Open Theme settings > Colors. The color schemes control the background, text, links and accents, buttons, and lines in each part of the page. Set the Badge colors for sale and sold out tags, and check the Success message text and Error message text colors on a white background.
  3. Fonts. Open Theme settings > Typography. Pick a Font for headings and a Font for body text. Set Data to a monospace font. Part numbers use this font, so pick one that makes numbers easy to read.
  4. Menus. Go to Online Store > Navigation. Build the menu named main-menu. This is the header navigation. Build the menu named footer. This feeds the footer menu block. Both names are used by the theme, so do not rename them.
  5. Home page sections, in order. Open the home page in the editor. The default order is:
  6. Vehicle selector (the hero with "What do you drive?")
  7. Service facts (short facts such as the dispatch time)
  8. Category index ("Shop by category")
  9. Featured collection ("Featured products" for a shopper with a vehicle, "Popular parts" for a shopper without one)
  10. Parts diagram ("Front brake assembly")
  11. Vehicle directory ("Shop by make")
  12. Blog posts ("From the blog")
  13. Newsletter

Move, hide or delete sections with the arrows and eye icons. Keep the vehicle selector first if your store sells by vehicle.

The vehicle selector has a Layout setting with three options: Bar, Hero and Split (a photograph beside the form). 6. Vehicle data. The selector stays empty until you load vehicles. Follow Vehicle fitment before you publish. 7. Test. Choose a vehicle, open a product that fits it, add it to the cart, and place a test order in Shopify's test mode.

Where each global setting lives

All global settings are in the theme editor under Theme settings. Each group below lists the settings in the order the editor shows them.

Logo and favicon

Setting What it does
"Logo" The logo for the header and the footer brand block. Upload an SVG or a PNG with a transparent background.
"Logo width" The width of the logo in pixels.
"Favicon" The small icon in the browser tab. The editor displays it at 32 x 32 px.

Colors

The Colors group holds the color schemes and the status colors.

Setting What it does
Color schemes Each scheme has six colors: "Background", "Text", "Links and accents", "Lines and borders", "Button background" and "Button text". Sections use one scheme each, chosen in their "Color scheme" setting.
"Sale badge background" and "Sale badge text" The colors of the sale tag on cards and product pages.
"Sold out badge background" and "Sold out badge text" The colors of the sold out tag.
"Success message text" The color of confirmation messages, such as an item added to the cart.
"Error message text" The color of error messages, such as an out of stock message.
"Fit color" The color of a "Fits" line.
"Check color" The color of a "Check" line, which means the part fits but a note applies.
"No fit color" The color of a "Does not fit" line.

Typography

Setting What it does
"Font" under Headings The font for headings.
"Size scale" under Headings Makes all headings larger or smaller. 100 is the default.
"Letter case" under Headings "Default" keeps the case you type. "Uppercase" shows headings in capitals.
"Font" under Body The font for text.
"Size scale" under Body Makes all body text larger or smaller.
"Font" under Data A monospace font for part numbers, SKUs and specification values.

Layout

Setting What it does
"Page width" "Narrow", "Medium" or "Wide". Sets the maximum width of the content.
"Page margin" The space at the left and right edges of the page, on phones and desktops.
"Grid spacing" The space between cards and columns.
"Photo treatment" "Black and white" shows photographs without color. "None" shows them in full color. Black and white is the default.

Corners and borders

Setting What it does
"Button corner radius" The rounding of buttons. 0 is square.
"Input corner radius" The rounding of fields and selects.
"Card corner radius" The rounding of product cards.
"Image corner radius" The rounding of images.
"Border thickness" The width of lines and outlines.

Product cards

Setting What it does
"Image ratio" "Adapt to image", "Square", "Portrait" or "Landscape".
"Image fit" "Fit" shows the whole image. "Fill" crops it to the frame.
"Blend product photos into the tile" Product photos with a white background take the card color on light color schemes. On by default.
"Show second image on hover" Shows the second product image when the shopper hovers over the card.
"Show vendor" Shows the brand name on the card. Off by default.
"Show SKU" Shows the variant SKU as the part number on the card. On by default.
"Show product rating" Shows the rating. Needs a product review app.
"Show swatches" Shows color or option swatches on the card.
"Show quick add" Shows an add button on the card.
"Show badges" Shows the sale and sold out tags.

Vehicle fitment

Setting What it does
"Show vehicle fitment" Turns the fitment features on or off. When off, the selector and fit lines are hidden.
"Vehicle selector order" "Make first" or "Year first". The order of the selector steps.
"Vehicle selector steps" "3 steps" or "4 steps". The number of selector steps.
"All parts collection" The collection where "Show parts" lands when a shopper has chosen a vehicle. Leave it blank to use all products.
"Show fit on product cards" Shows the fit line on cards once a vehicle is chosen.
"Show fit in cart" Shows the fit line on each cart line.
"Fitment documentation link" A link to this documentation, shown in the editor help text.

For the full process, see Vehicle fitment.

Part numbers

Setting What it does
"OEM tag prefix" The prefix for OEM numbers written as product tags. The default is oem:. See Part numbers and search.

Prices

Setting What it does
"Show currency codes" Adds the currency code, such as USD, next to prices.
"Show tax and shipping note" Shows a short note under the price about tax and shipping.

Cart

Setting What it does
"Cart type" "Drawer" opens the cart in a side panel. "Page" opens the cart page.
"Show order note" Shows the order note field in the cart.
"Show vendor" Shows the brand name for each cart line.
Setting What it does
"Enable search suggestions" Shows product suggestions while the shopper types.
"Show vendor" Shows the brand in the suggestions.
"Show price" Shows the price in the suggestions.

Social media

Enter the full web address of each account: "Facebook", "Instagram", "YouTube", "TikTok", "X (Twitter)", "Pinterest", "LinkedIn" and "WhatsApp". Only filled-in links appear in the footer.

Trade tools

Setting What it does
"Compare page" The page that uses the Compare template. Create the page first, then select it here.
"Quick order page" The page that uses the Quick order template. Create the page first, then select it here.
"Shop by make page" The page that uses the Vehicles template, which holds the vehicle directory. Create the page first, then select it here.

The header and footer are sections in section groups. Edit them in the theme editor. Their settings are listed in Sections reference.

Check before you publish