Getting started

Install Touchmark, set up your menus, connect your product data and images, and check the store in the first hour. Each step names the setting or admin page as you'll see it.

Install the theme

1. In your Shopify admin, go to Online Store > Themes.
2. Add Touchmark to your theme library: from the Shopify Theme Store, or with Add theme > Upload zip file if you have the theme's zip file.
3. On the theme in your library, click Customize to open the theme editor. Work on it there and preview it before you publish.
4. When you're ready, publish the theme. Your previous theme stays in the library.

Touchmark 1.0.0 ships in English. Shopify's Translate & Adapt app translates the theme's text and your content into other languages.

The Touchmark preset

The theme ships one preset, Touchmark: a light, clinical look with six color schemes, three fonts (display, body, and one for numbers and labels), and numbered section headings that line up with the content under them. Its home page has these sections, in order: Image banner, Shop by goal (headed "Shop by collection" until you choose goals in Theme settings > Goals), Featured collection, Ingredient trace, Subscription steps, Lab results and Blog posts. To end Shop by goal with a row that leads to your quiz, fill in its Closing link; the row shows once it has a link.

Ingredient trace, Subscription steps and Lab results stay off your storefront until the store has what they show: a product with a subscription plan, a Lab batch entry, a product with Ingredient entries. In the theme editor they show their layout with a notice that says what they are waiting for.

Change the look under Theme settings in the editor: Colors for the schemes, Typography for the fonts, Layout for the page width, section numbering and line weight. Every setting is listed on Theme settings.

Templates the theme adds

Besides the standard templates, Touchmark ships page and product templates for its own features. Assign one with the Theme template menu on a page or product in your Shopify admin.

Menus

Create menus in your Shopify admin under Content > Menus, then choose them in the theme editor.

1. Main menu. The Header section's Menu setting uses the Main menu by default. With Menu style set to Mega menu, second-level links show as columns. Add Menu image or Menu promo blocks to the header to place an image or a promotion beside a menu item's columns. Below 990px the menu opens as a drawer.
2. Account menu. The Header's Customer account menu holds the links in the account menu. The account icon shows when customer accounts are turned on.
3. Footer menus. In the Footer section, each Menu block shows one menu as a column. The preset uses the Footer menu.
4. Goals. List your goal collections, such as Sleep, Focus and Energy, in Theme settings > Goals > Goal collections. They feed Shop by goal, the goal navigation above the product grid, search, the 404 page and the empty cart, collection and search pages.
5. Country and language. The Header's Show country/region selector and Show language selector are on from the start, and the Footer shows both selectors in its bottom row. They appear once your store sells in more than one country or region, or has more than one language, under Settings > Markets and Settings > Languages. From 750px wide each selector opens its list next to its button, with a search field when the list is long; on phones the list opens from the bottom of the screen. Each country shows its currency, such as "Canada (CAD $)", and each language its own name, such as Français.

Product data, in order

Touchmark's product chapters, such as the Supplement Facts label, read product data. Product data setup has every step and field; this is the order to follow.

1. Minimum setup, about 10 minutes. Set the product's category to Vitamins & Supplements, create a Supplement Facts text field and a Serving size field in the Shopify admin, connect them to the Supplement Facts block in the theme editor, and type each product's label rows. Nothing to install.
2. The other chapters, the same way. Ingredient notes, directions, a results timeline, a certificate link and product questions, each from a product field you create and connect.
3. Full setup with metaobjects, when you want everything: category attributes, product disclosures, subscriptions from a subscription app, and the theme's definitions for key actives, labels per variant, lab batches with the batch lookup, and shared questions.

Product images and variants

When sizes or flavors look different, such as a 20-serving pouch and a 40-serving tub, give each variant its own image. Shopify allows one image per variant.

1. In Products, open the product and add all its images under Media.
2. In the Variants section, click the image icon next to a variant, select its image (or Add image to upload one) and click Done. Repeat for each variant, then click Save.
3. Write each image's alt text so it names what it shows, including the variant: "Collagen Peptides pouch, 20 servings". With Show figure captions on in Product information, the theme uses the alt text as the image's caption.

What the product page does with them:

• The variant's image comes first. When a shopper picks a variant, the stacked gallery moves its image to the top and keeps the others in the product's order, so going back to a variant restores the order it had. The thumbnails layout and the phone carousel move to the variant's image instead. A variant without its own image leaves the gallery as it is.
• Captions follow the selection. A caption that names an option value, such as "20 servings", hides while the shopper has another value of that option selected, so the 40-serving tub never sits under a 20-serving caption.
• Elsewhere. Quick add and the cart show the selected variant's image. Product cards show the product's first image.

First-hour checklist

1. Upload your logo, inverse logo and favicon in Theme settings > Logo and favicon.
2. Pick your fonts in Theme settings > Typography and adjust the six schemes in Theme settings > Colors.
3. Replace the announcement bar's "Welcome to our store" text, or remove the block.
4. Choose your goal collections in Theme settings > Goals, and give each collection an Accent color.
5. Check the statement in Theme settings > Compliance > Disclaimer. It starts as the standard Food and Drug Administration statement, and claims marked with an asterisk link to it. Show in the footer is off on a new store.
6. Do the minimum setup for one product: set its category, connect Supplement Facts text and Serving size, and type its label rows. Open it in the editor and read the Product data notice.
7. On products whose variants look different, give each variant its own image.
8. Add a certificate: paste its link into the product's Certificate link, or create a Lab batch entry and search for its code on the storefront.
9. In Theme settings > Cart, choose Drawer or Page for Cart type, and turn on Show free shipping progress with your Free shipping minimum if you offer free shipping.
10. If you sell subscriptions, set Theme settings > Subscriptions > Subscription management link to your app's customer portal.
11. Create the quiz, routine and questions pages with the page.quiz, page.routine-builder and page.faq templates, and link them from your main menu.
12. Preview on a phone with the editor's mobile view, then publish.