Getting started with Index
Install Index, choose one of its three presets and get your store ready for launch. Every setting in these docs uses the same name you see in the theme editor.
What Index is
Index is a calm catalog theme for stores with a broad range of products: homeware, kitchen, office, tech accessories, gifts, clothing, beauty and general stores. It is built to be easy to scan and quick to filter, so the products and their photos carry the color and the theme keeps everything tidy around them.
Index comes with three presets. Each is a complete look with its own fonts, colors, header layout, product cards and home page:
| Preset | Made for | Look |
|---|---|---|
| Index | Home and general stores | One clean sans-serif (Instrument Sans), white page, ink buttons and a quiet green accent. Logo left with the search bar in the middle. |
| Poster | Clothing | Heavy uppercase Archivo headings, square corners, 2 px lines, framed product cards and the Coral palette. Logo centered with the menu on its own row. |
| Petal | Beauty and wellness | Cormorant headings with Work Sans text, rounded corners, portrait photos and the warm Sand palette. Menu left with the logo centered. |
You can preview each one in its demo store: Index (opens an external site), Poster (opens an external site) and Petal (opens an external site).
Install the theme
- In your Shopify admin, go to Online Store › Themes and open the Theme Store. Find Index and choose the preset you want: Index, Poster or Petal.
- Select Try theme to add it to your theme library for free, or buy it right away. You can try a paid theme for as long as you like; you only pay when you publish it.
- The theme appears in your theme library as an unpublished theme. Select Customize to open it in the theme editor.
- When you are ready, select Publish. The theme you used before stays in your library, so you can switch back at any time.
Find your way around the editor
Everything in Index is set up in the theme editor (Online Store › Themes › Customize). There are three places to look:
- Sections and blocks on the left: each page template is a list of sections, and most sections contain blocks. Select a section to see its settings; drag sections and blocks to reorder them. Use the page selector at the top of the editor to switch between the home page, product pages, collections, the cart and other templates.
- Theme settings (the brush icon): settings that apply to the whole store, such as colors, fonts, product cards and the cart. See Theme settings Its first group, Help and documentation, links back to these docs and to support.
- Section groups: the Header group (announcement bar and header) at the top, the Footer group at the bottom and the Popups group for popups and age verification. They are shared by every page.
Switching presets
Theme settings › Change theme style switches between the Index, Poster and Petal looks after installation. A style changes type, shapes, spacing, product cards, motion and the color palette in one step.
- Switching a style resets these theme settings, so pick the style first and fine-tune colors and fonts after.
- The style does not move sections. A store installed as Poster or Petal from the Theme Store starts with that preset's own home page, header and footer; switching the style later keeps your current sections.
- If you want a preset's sections as well, add it to your theme library as a separate theme from the Theme Store and compare the two.
First steps
Work through these in order and you will have a store that looks like yours in an afternoon.
- Logo and favicon. Upload your logo in Theme settings › Logo and favicon. Without an image, the store name shows as a text logo. Add a second logo for dark mode if your logo is dark. See Logo and favicon.
- Colors. Pick a palette in Theme settings › Colors › Color palette, or choose Custom to use your own six color schemes. Decide whether shoppers can switch to dark mode. See Colors and dark mode.
- Fonts. Choose the heading and body fonts in Theme settings › Typography. See Typography.
- Menus. Build your main menu in Online Store › Navigation and pick it in the Header section. Links with two levels open the full-width shop panel. See Header and footer.
- Product cards. Set the image ratio, quick add and what shows on each card in Theme settings › Product cards.
- Home page. Replace the demo text and images in each section, pick your own collections and remove the sections you do not need.
- Product and collection pages. Open a product and a collection in the editor and check the gallery, the buy buttons, the filters and the product grid. See Product page and Collections and search.
- Cart. Set the free shipping threshold and the add-ons in Theme settings › Cart. See Cart.
- Before launch. Go through the launch checklist to replace every piece of demo content.
Apps that work with Index
Index works with the free apps made by Shopify, and many features depend on them:
| App | What it adds in Index |
|---|---|
| Search & Discovery | Filters on collection and search pages, complementary products on the product page and in the cart, and better related products. |
| Translate & Adapt | Translations of your content into the languages you add in Settings › Languages. |
| Shopify Forms | Signup forms you can add anywhere with an app block. |
| A reviews app | Star ratings on product cards and the product page, for apps that fill the standard product rating metafield (reviews.rating). |
Apps that add app blocks can be placed inside most Index sections, and full-width app sections go in the Apps section. See Apps and app blocks.
Updating Index
When a new version of Index is released, Shopify shows an update notice next to the theme in Online Store › Themes.
- Updating adds the new version to your theme library as a copy with your settings and content from the theme editor. Your live theme is not touched until you publish the copy.
- Changes made in the code editor are not carried over. If you edited the theme code, note your changes before updating and apply them again to the new version.
- Check the copy in the editor and preview, then publish it.
You can see the version you are running in Theme settings › Theme information (or in the theme library under the theme name).
Browser support
Index supports the latest two versions of Safari, Chrome, Firefox, Edge and Samsung Internet on desktop and mobile, plus the in-app browsers of Instagram, Facebook and Pinterest. Some extras, such as page transitions and instant navigation, only run in browsers that support them; other browsers simply change pages as usual.