Getting started with Chisel

Chisel is a Shopify theme for retail tools and hardware stores. This guide covers installation, the first settings to change, and how to arrange the home page. It follows the theme as it is supplied.

Before you begin

1. Install the theme

  1. In the Shopify admin, go to Online Store > Themes.
  2. Select Add theme. Then choose either the Theme Store or Upload zip file.
  3. When the theme appears in your list, select Preview to see it before you publish.
  4. Select Publish only when you are ready for customers to see the store.

2. Pick a preset

Chisel ships with one preset, named Default. The preset sets the starting color schemes. You do not need to choose anything else at install time.

Chisel has only the Default preset. If you want a different starting point, change the colors and fonts by hand as described below.

3. Set the logo and favicon

  1. Open the theme editor. Select Customize on the Chisel theme.
  2. In the theme settings, open Logo and favicon.
  3. Select Logo and choose an image from your files. Use a logo with a transparent background when you can.
  4. Set Logo width to change how wide the logo appears in the header. The default is 120.
  5. Select Favicon and choose a square image. The favicon is the small icon in the browser tab.

If you do not add a logo, the header shows your store name as text.

4. Set the colors

Colors are set in two places. Color schemes control the look of each section. Highlighter and status colors apply across the whole store.

Color schemes

Chisel has four color schemes. Each scheme has eight colors:

  1. Open Colors in the theme settings.
  2. Open a color scheme.
  3. Set Background, Text, Surface background, Surface text, Links and accents, Lines and borders, Button background and Button text.
  4. Choose the scheme for each section in the section's Color scheme setting. This is covered in step 10.

The header uses the scheme set in the header's own Color scheme setting. The footer uses scheme 3 by default.

The highlighter

The highlighter is a bright band behind data that a buyer needs to notice. Chisel uses it in four places only:

It is not used for buttons, filters or labels.

  1. Open Colors.
  2. Set Highlighter color (default: a lime green) and Highlighted text (default: a near-black).
  3. Check that the two colors have enough contrast. Text on the highlighter must be easy to read.

Badges and status messages

The same Colors group also has these settings:

Low stock text is the color of the low-stock line on product pages, cards and rows.

5. Set the fonts

Chisel has three font roles. Open Typography in the theme settings.

  1. Under Headings, choose a Font for headings. Set Size scale to make all headings larger or smaller. The default is 100.
  2. Choose Letter case for headings: none or uppercase.
  3. Under Body, choose the Font for body text. Set its Size scale the same way.
  4. Under Codes and figures, choose the Font for codes, prices, stock lines and table figures. Codes and figures need a font where the digits are easy to tell apart.

Use the same font picker for all three roles if you want a simpler look.

6. Set the layout and shape

Open Layout to set the Page width (75, 85 or 100 rem), the Page margin and the Grid spacing.

Open Corners and borders to set the Button corner radius, Input corner radius, Card corner radius, Image corner radius and Border thickness.

7. Set up the main menu

The header reads the menu you choose in its Menu setting. The default is main-menu.

  1. In the Shopify admin, go to Content > Menus.
  2. Open Main menu, or create a menu and select it in the header's Menu setting.
  3. Add up to three levels of links. Put the top-level links in the first level, categories under them in the second level, and subcategories in the third level.

The top-level links appear as text links in the header. The All departments button opens an index panel. The index panel shows all three levels, with the top-level links on the left and the children of the selected link on the right.

  1. Go to Content > Menus and create or open the footer menu. Its default handle is footer.
  2. In the theme editor, open the footer section.
  3. Select a Menu block and choose your footer menu in its Menu setting. Change the block heading if needed. The default heading is Shop.
  4. Use the Brand block for your logo and a short store description. The footer allows one Brand block. Add a Newsletter block if you want a sign-up form.

The footer also shows the Social media links you add in the theme settings, and it can show payment icons, policy links and country and language selectors. Each of these has its own setting in the footer section.

9. Arrange the home page

The home page uses these sections, in this default order:

  1. Cover
  2. Departments
  3. Quick order band
  4. Lead products
  5. Brand index
  6. Guide
  7. Trade band
  8. Branches
  9. Newsletter

To change the order, open the home page in the theme editor. Drag a section to move it, or select Hide on a section to remove it from the page without deleting its content.

Each section shows the settings that match its job. For example, the Cover section has a headline, text, two buttons, an optional row of facts, and an optional featured product. Fill in only the sections you need. A section with no content shows nothing on the storefront.

10. Find the section style settings

Every section has a group named Section style at the bottom of its settings. Use it to change the look of one section without changing the theme.

Section style settings do not include a separate heading font or a choice of table density.

Next steps