This path takes a new Checkmate theme to a published store. Follow the parts in order. Each one ends with something you can see, and links to the article with the steps.
1. Add Checkmate in a style
Add Checkmate from the Shopify Theme Store in one of its three styles, Checkmate, Lair or Fang. A style sets the fonts, colors and sections you start with. Theme styles compares them, and Install a theme on your store has the steps.
Open the theme in the editor. Your store's name shows in the header in place of a logo, and many photos and product lists are empty. Make your store look like the demo lists everything a new theme leaves empty. How sections and blocks work in Checkmate explains the parts of the editor this guide names.
In the editor, the icons at the top of the sidebar switch between the page's sections and Theme settings. Below them, the sidebar lists the page's sections in the Header, Template and Footer groups.
1234
Header
Template
Footer
Preview
The preview now shows the home page of the style you picked.
Checkmate has a dark version of every color. With Color mode on Auto, the default, each customer first sees the version their device asks for. A button in the header lets them switch, and Light/dark mode toggle in the Header section shows or hides it. The Fang style starts with that button hidden. Choose light, dark or automatic color mode explains the choice.
Your logo is now in the header, and your colors are on every page.
3. Set up your menus
The header shows your store's main menu and the footer shows its footer menu. Build both in your Shopify admin as Shopify's guide to menus describes, then follow Set up your store menus. To show products and photos under a menu link, see Add a mega menu.
The links in the header now open your own pages.
4. Replace the demo's offers
The style you picked comes with the demo's own messages, such as a discount code in the Announcement bar at the top of every page, and a signup offer in a popup that opens by itself. Change these to your own offers, or remove them, as Make your store look like the demo describes.
The Announcement bar and the popup now show only offers your store gives.
5. Fill in the home page
Sections only show products you have in your store. If you have none yet, add products and create collections in your Shopify admin first.
Then go down the home page one section at a time. Choose your photos, your collections and your button links, and replace the demo's headings and text. Image sizes lists the photo sizes that look sharp. Remove the sections you do not need, and add others from Choose a section for your page.
The home page now shows your photos and your products.
6. Set up product pages
At the top of the editor, select Products, then Default product. Every product uses this template unless you give it another one.
First make your size and color choices show. The Product information section, the first section on a product page, has Variant option blocks, and each one shows the choices for one option, found by its name. My product page doesn't show size or color choices shows how to match the names your products use. To show colors as round swatches, see Show color swatches for variants.
Then add each product's details, such as its origin or its ratings. You enter them on the product's page in your Shopify admin, in metafields. Sections such as Facts, Specifications and Highlights stay hidden until a product has them, as How each product gets its own content explains.
A product page now shows the product's choices and its details.
7. Set up the cart
Choose a cart drawer or a cart page, and what happens when a customer adds a product, in Cart settings.
The Checkmate style turns on a free shipping progress bar at 50, and Fang at 40, in your store's default currency. The bar does not change your shipping rates. Match the amount to a free shipping rate you set up in your Shopify admin, or turn the bar off, as Show a free shipping progress bar describes.
Adding a product now opens the cart the way you chose.
8. Finish the footer
Enter your social media profiles in Theme settings under Social media, as Social media settings describes. The footer and every Social links block show icons for them. Then check the footer's menu and layout in the Footer section.
The footer now shows your menu and your social media icons.
9. Publish your store
Buy Checkmate and publish it, as Install a theme on your store describes. Customers who visit your store now see Checkmate with your content.
This path takes a new Checkmate theme to a published store. Follow the parts in order. Each one ends with something you can see, and links to the article with the steps.
1. Add Checkmate in a style
Add Checkmate from the Shopify Theme Store in one of its three styles, Checkmate, Lair or Fang. A style sets the fonts, colors and sections you start with. Theme styles compares them, and Install a theme on your store has the steps.
Open the theme in the editor. Your store's name shows in the header in place of a logo, and many photos and product lists are empty. Make your store look like the demo lists everything a new theme leaves empty. How sections and blocks work in Checkmate explains the parts of the editor this guide names.
In the editor, the icons at the top of the sidebar switch between the page's sections and Theme settings. Below them, the sidebar lists the page's sections in the Header, Template and Footer groups.
The preview now shows the home page of the style you picked.
2. Add your logo and colors
Add your logo in Theme settings under Logo, as Logo settings describes. Then set your brand's colors in Colors and its fonts in Typography, as Change your theme colors and Typography settings describe.
Checkmate has a dark version of every color. With Color mode on Auto, the default, each customer first sees the version their device asks for. A button in the header lets them switch, and Light/dark mode toggle in the Header section shows or hides it. The Fang style starts with that button hidden. Choose light, dark or automatic color mode explains the choice.
Your logo is now in the header, and your colors are on every page.
3. Set up your menus
The header shows your store's main menu and the footer shows its footer menu. Build both in your Shopify admin as Shopify's guide to menus describes, then follow Set up your store menus. To show products and photos under a menu link, see Add a mega menu.
The links in the header now open your own pages.
4. Replace the demo's offers
The style you picked comes with the demo's own messages, such as a discount code in the Announcement bar at the top of every page, and a signup offer in a popup that opens by itself. Change these to your own offers, or remove them, as Make your store look like the demo describes.
The Announcement bar and the popup now show only offers your store gives.
5. Fill in the home page
Sections only show products you have in your store. If you have none yet, add products and create collections in your Shopify admin first.
Then go down the home page one section at a time. Choose your photos, your collections and your button links, and replace the demo's headings and text. Image sizes lists the photo sizes that look sharp. Remove the sections you do not need, and add others from Choose a section for your page.
The home page now shows your photos and your products.
6. Set up product pages
At the top of the editor, select Products, then Default product. Every product uses this template unless you give it another one.
First make your size and color choices show. The Product information section, the first section on a product page, has Variant option blocks, and each one shows the choices for one option, found by its name. My product page doesn't show size or color choices shows how to match the names your products use. To show colors as round swatches, see Show color swatches for variants.
Then add each product's details, such as its origin or its ratings. You enter them on the product's page in your Shopify admin, in metafields. Sections such as Facts, Specifications and Highlights stay hidden until a product has them, as How each product gets its own content explains.
A product page now shows the product's choices and its details.
7. Set up the cart
Choose a cart drawer or a cart page, and what happens when a customer adds a product, in Cart settings.
The Checkmate style turns on a free shipping progress bar at 50, and Fang at 40, in your store's default currency. The bar does not change your shipping rates. Match the amount to a free shipping rate you set up in your Shopify admin, or turn the bar off, as Show a free shipping progress bar describes.
Adding a product now opens the cart the way you chose.
8. Finish the footer
Enter your social media profiles in Theme settings under Social media, as Social media settings describes. The footer and every Social links block show icons for them. Then check the footer's menu and layout in the Footer section.
The footer now shows your menu and your social media icons.
9. Publish your store
Buy Checkmate and publish it, as Install a theme on your store describes. Customers who visit your store now see Checkmate with your content.