Presets

Roster preset

How to set up the Roster preset for a tools and hardware store with a large catalog, SKUs, quick ordering, sub-collections, brands and B2B buyers.

Who Roster is for

Roster is made for tools, hardware and building supply stores with a large catalog and professional or trade buyers. It is light and dense: white sheets, a black button with a yellow label, blue accents and SKUs in a monospaced font, so buyers can scan a long list and order by part number.

The Roster demo store, Boltline, sells hand tools, power tools, fasteners, safety gear and paint: about 50 products.

What the preset sets

Setting Value in Roster
Design style Crisp sheets: small corners, white sheets and a sharp outline on hover
Heading font Chivo
Body font Libre Franklin
Accent font Roboto Mono, used for SKUs, codes and small labels
Image ratio in Product cards Square
Show vendor in Product cards On
Show SKU in Product cards On

You can change any of these in Theme settings. See Theme settings and Typography.

Home page

The home page has these sections, from top to bottom:

  1. Slideshow: four slides, for example a battery platform, fasteners, store pickup and trade accounts.
  2. Collection tiles: your trades or main departments.
  3. Featured collection: your best sellers, four in a row.
  4. Collection list: your departments in a Scrolling row.
  5. Quick order list: one product with many variants, such as screws by size, ordered in one step.
  6. Promo banner: an offer for account holders. No countdown until you add an End date.
  7. Promo banners: three banners for collections or offers.
  8. Before and after: two photos of the same thing, compared with a handle. In the preset, a deck before and after oiling.
  9. Trust badges: shipping, returns, warranty and support.
  10. FAQ: pickup, trade accounts and how you sell fasteners.

Below the home page sections, the footer group has an Email signup section and the Footer. Above them, the header group has an Announcement bar and the Header.

To get started, choose collections in Collection tiles, Featured collection and Collection list, and a Product in Quick order list. Remove Before and after if you have no matching photos.

Images to prepare

Where What to upload Recommended size
Product photos The product on a plain white background, the same for every product Square, 1:1 aspect ratio recommended, for example 2048 x 2048px
Slideshow > Slide > Image Your store, a workshop or a job site 2000 x 1200px recommended
Slideshow > Slide > Mobile image Optional image for phones 1200 x 900px recommended
Before and after > Before image and After image Two photos of the same thing, taken from the same spot Use two images with the same aspect ratio. The preset shows them at 3:2.
Promo banners > Banner > Image A photo for each banner After uploading, check the section on desktop and on mobile.
Collection images One image per collection, for Collection tiles, Collection list and collection pages Set in Products > Collections
Logo Your logo Any shape
Favicon Browser tab icon 32 x 32px .png recommended

Avoid text inside images. Headings, prices and buttons are live text in the theme.

Color schemes

In Theme settings > Colors, Roster has four color schemes. The theme editor lists them as Scheme 1 to Scheme 4.

Scheme Look Used for
Scheme 1 White: light gray background, white sheets, black buttons with a yellow label, blue accent The header and every page section
Scheme 2 Graphite: near-black background, yellow buttons The email signup and the footer
Scheme 3 Safety: yellow background, black buttons The announcement bar
Scheme 4 Blueprint: deep blue background, white text Not used by default. Use it for a section that should stand out.

See Color schemes.

SKU line

Buyers who know the part number look for it first. Roster shows SKUs in three places:

  • Product cards: the SKU of the first available variant shows above the product name, for example "SKU 44-2190". Turn it on or off with Show SKU in Theme settings > Product cards. Products without a SKU show no line.
  • Product page: the first Text block in the Product section has Show set to SKU and vendor. It updates when a customer picks a variant. You can also choose SKU, Vendor or Custom text.
  • Specification sheet: rows such as Model and Standard have Use accent font for value turned on, so codes show in the monospaced accent font. This setting appears when Design style is set to Crisp sheets, which is Roster's style.

Add SKUs to your variants in your Shopify admin. With Show vendor on, product cards show the brand at the bottom of the card.

Quick order list

The Quick order list section lists every variant of one product in a table. Buyers set a quantity for each size or type, then add them all to the cart at once.

  1. Click Quick order list and choose a Product. It works best for products with many variants, such as screws by length or sandpaper by grit.
  2. Write a Heading and Text that say what the list is for.

Roster has a Quick order list on the home page and on the cart page. You can add the section to any page, including the product page.

Sub-collection menu

On a collection page, a sub-collection menu links to smaller collections, for example from Power tools to Drills, Saws and Sanders. It is a menu that you make in your Shopify admin.

  1. In your Shopify admin, go to Content > Menus and click Add menu.
  2. Name it, for example "Power tools", and add a link to each smaller collection.
  3. In the theme editor, open a collection page and click the Collection page section.
  4. Under Sub-collections, choose the menu in Sub-collection menu.
  5. Change the Heading if you like. The default is "Shop by type".
  6. Turn on Show images to show each collection's image as a tile.

The menu shows on every collection that uses this template. To give each department its own menu:

  1. In the theme editor, open the template menu at the top, go to Collections and create a new template, for example "power-tools".
  2. Choose that department's menu in Sub-collection menu in the new template.
  3. In your Shopify admin, open the collection and choose the new template under Theme template.

Without images, long menus show the first 12 items and a button to show the rest.

Brands A–Z

The Brands A–Z section lists your brands in alphabetical order, with a letter index to jump through them.

  1. In your Shopify admin, go to Online Store > Pages and add a page, for example "Brands".
  2. In the theme editor, open the template menu at the top, go to Pages and create a new template, for example "brands".
  3. Click Add section and choose Brands A–Z.
  4. Set Show to Vendors to list the vendors of your products, or to Collections to list collections.
  5. With Collections, choose them in Collections, or leave it empty to list up to 250 collections that have products.
  6. In your Shopify admin, open the Brands page and choose the "brands" template under Theme template.
  7. Add the page to your main menu or footer menu.

Quantity rules and B2B

Roster is ready for trade buyers who order in set quantities. These rules come from B2B on Shopify: you set them in your Shopify admin, in the catalogs for your company customers, and the theme shows them.

  • Quantity rules. When a variant has a minimum, a maximum or an increment, the product page says so, for example "Minimum of 10" or "Increments of 5". The quantity selector starts at the minimum and steps by the increment. The cart and the Quick order list follow the same rules.
  • Volume pricing. When a variant has lower prices for larger quantities, the product page shows a Volume pricing table under the quantity selector. The Quick order list shows the price for the quantity entered.

Buyers see their rules and prices after they sign in to a company account. Other customers see your regular prices. Check your Shopify plan to see whether it includes B2B.

Product page and cart

The Roster product page has these sections:

  1. Product: the SKU and vendor line, a short summary line, the price, variants, a Size chart, stock, quantity, buy buttons, pickup and Complementary products. Below the product, tabs for Details, Shipping and delivery and Usage.
  2. Specification sheet: model, voltage, torque, speed, chuck, weight and standard. Connect each Value to a product metafield to fill it from each product. Rows with no value are hidden.
  3. Video, Product recommendations, Recently viewed, Trust badges and FAQ.

The cart page has the Cart section, a Quick order list and a Featured collection for the tools and supplies buyers often add.

See Product page and Cart.

Tips

  • The collection page uses Infinite scroll with 24 products per page. Change it in the Collection page section with Pagination type and Products per page.
  • Set up filters such as brand, voltage and size in the Search and Discovery app. See Collections and search.
  • In the Header, the Contents button opens every level of your main menu, in columns on desktop, so a catalog with many departments needs no extra menu.
  • The FAQ link label is "Contact the trade desk". Set its Link to your contact page.
  • Promo banner shows a countdown only when you add an End date. See Honest promotions.