Getting started

This page takes you from a newly installed theme to a store you can show: which preset to start from, what to set up in the first hour, how to replace placeholder content, which image sizes to prepare, and what the theme needs from your Shopify admin.

The four presets

A preset is a starting point: a set of colors, fonts and shapes, plus the sections each page starts with. Poison has four. They share the same sections, blocks and settings, so anything one preset shows can be built in the others.

Each preset also installs its own pages:

• Poison. Home page: Slideshow, Collection list (as rings), Featured collection, Promotion grid, Image with text, Shoppable image, Product tabs, Columns, Testimonials, Blog posts, Rich text. Collection pages have three columns with filters in a sidebar. Product cards show the product type above the title.
• Foxglove. Home page: Image banner, Columns, Featured collection, Image with text, Before and after, Collection list, Testimonials, Collapsible content, Newsletter. The logo sits in the center of the header. Collection pages have four columns with filters in a horizontal bar. The product page has rows for ingredients and how to use.
• Belladonna. Home page: Image banner, Collection list, Featured product, Scrolling story, Featured collection, Image gallery, Testimonials, Logo list, Rich text. The logo sits in the center and the header is transparent over the banner. Collection pages have three columns, 18 products per page and filters in a drawer. The product page stacks its photos and has rows for materials and sizing. Product cards show no line above the title.
• Antidote. Home page: Slideshow with arrows, Product tabs, Promotion grid, Countdown, Featured collection, Logo list, Collection list, Blog posts, Newsletter. The announcement bar scrolls as a ticker and the header returns when customers scroll up. Collection pages have five columns, 30 products per page and filters in a drawer. The product page shows its photos in a grid and adds a size chart and the SKU. Product cards show the vendor above the title.

Switch to another preset's style

The four presets are also available as styles in the theme editor.

1. Go to Online Store > Themes > Customize.
2. Open Theme settings and choose another theme style.
3. Save.

A style changes theme settings only: the color schemes and the color palette, the fonts, the corner radius, the button shape, the page width and spacing, and the product card settings. Switching replaces the current values of those settings, so switch first and fine-tune colors and fonts afterwards.

A style does not change your pages. The sections on the home page, the blocks on the product page, the logo position, the transparent header and the filter layout come from the preset you installed. To move those toward another preset, change them in the editor: the lists above say what each preset uses.

First-hour checklist

Do these in order. Each step builds on the one before it.

1. Logo and favicon. In Theme settings > Logo and favicon, add your Logo and set Logo width and Logo width on mobile. Until you add a logo, the header shows your store name as text. Add a square Favicon image. If your header is transparent over the first section, also add a light version of the logo as Logo for transparent header, because the header's text turns white there.
2. Colors. In Theme settings > Colors, edit the color schemes. Start with Scheme 1, which colors the page, and Scheme 2, which colors the header, the drawers and the dialogs. See Colors.
3. Fonts. In Theme settings > Typography, choose the Heading font, the Body font and the Accent font. See Typography.
4. Menus. Create your menus in Content > Menus (see Menus below), then choose them in the editor: the Header section's Menu and the footer's Menu block.
5. Home page. Work down the list of sections. In each one, choose images, collections and products, and rewrite the text. Remove the sections you don't need. Replace the announcement bar's default text too. Sections describes every section.
6. Product page. Open a product in the editor. Rewrite the collapsible rows, which start with sample text, choose a page for the size chart if your preset has one, and remove the blocks you don't use. See Product page.
7. Collection filters. Choose your filters in the Search & Discovery app, then open a collection in the editor and set Desktop filter layout in the Product grid section. See Collection pages and search.
8. Cart. In Theme settings > Cart, choose the Cart type. If your shipping becomes free from a certain order value, turn on Show free shipping goal and set Free shipping threshold to that value. The goal is off until you turn it on. See Cart.
9. Footer. In the Footer group, edit the Email signup and Menu blocks. Add your accounts in Theme settings > Social media: the fields start empty, and the footer shows an icon for each one you fill in. See Header and footer.
10. Policies. Write your policies in Settings > Policies. The footer links to every policy you have, as long as Show policy links is on.

Before you publish, open the home page, a collection, a product and the cart on a phone, and check that no placeholder is left.

Placeholder content

A new theme has no content of yours yet, so sections show placeholders:

• Gray illustrations where you haven't chosen an image.
• Sample products ("Example product title" with a sample price), sample collections ("Collection title") and sample blog posts where you haven't chosen a collection, a product or a blog.
• Default text in headings, text and buttons, such as "Tell your story" or "Shop now". Most of it reads as an instruction for you, not as copy for your customers.

Customers see placeholders too, so replace or remove each one before you publish.

To replace a placeholder, click it in the editor preview. The sidebar opens the section or block it belongs to:

• For an image, select one in the image picker and fill in its alt text.
• For sample products or collections, choose a collection or a product in the section or in each of its blocks.
• For text, type your own. Emptying a heading, a text or a button label removes that element from the page.
• A button without a link looks faded and can't be clicked. Add the link or remove the button.

If you don't need a section or a block, remove it or hide it instead of leaving it empty.

Most default text you haven't edited is shown in each customer's language. Text you type yourself is not translated automatically: see Languages and markets.

Image sizes and shapes

Photos are cropped to fill their frame, around the focal point you set for the image in Shopify. A Mobile image is cropped around its own focal point. Upload large images: the theme delivers a smaller copy to each screen and never requests more than 2400 px in width. Don't put words in an image, because they can't be translated or read by screen readers. Use the section's heading, chip and button for text.

Where a frame changes shape between screens, or a tile can be tall or wide, keep the subject in the center of the photo.

Product cards use one shape for the whole store, set by Image ratio in Theme settings > Product cards. Shoot or crop your product photos to that shape so nothing important is cut off. With Natural, each card takes the shape of its own photo instead.

What to set up in the Shopify admin

Some things the theme shows are not created in the theme editor.

Menus

Create menus in Content > Menus.

• Main menu. The header shows it. Links nested under a top-level link open as a dropdown or a mega menu: see Header and footer.
• Footer menu. The footer's Menu block shows it. Add a Menu block for each column of links.
• Popular searches. A short menu whose links show as chips in the search panel before the customer types. Choose it in Theme settings > Search behavior, under Popular searches menu.
• Sub-collection links. The Collection banner section can show a menu as a row of links under the banner.

Search & Discovery app

Shopify's free Search & Discovery app controls three things the theme displays:

• Filters on collection pages and in search results. The theme shows the filters you choose in the app, in the order you set there.
• Product recommendations: the "You may also like" section on the product page and the product suggestions in the cart. Shopify picks related products by itself; in the app you can choose them for a product yourself.
• Complementary products: the Complementary products block on the product page stays hidden until you choose complementary products for that product in the app.

Markets and languages

The country and language selectors appear once your store sells to more than one country or region (Settings > Markets) or has more than one published language (Settings > Languages). See Languages and markets.

Store settings the theme reads

• Policies (Settings > Policies): linked in the footer.
• Customer accounts: the account button in the header shows only when customer accounts are on.
• Payment methods: the footer shows an icon for each payment method your store accepts.
• Inventory tracking: the stock message on the product page needs inventory tracked by Shopify for that product.
• Local pickup: the Pickup availability block shows only when a location offers pickup.
• Pages: the size chart, the terms checkbox in the cart and the product page's collapsible rows can each show a page you write in the Shopify admin.

Metafields the theme reads

The theme needs no custom metafields or metaobjects. It reads two standard product metafields, which a product review app fills in:

A product with no rating shows no Rating block. You don't create these metafields yourself: the review app writes them. Metafields are listed in Settings > Custom data.

Color swatches don't use a theme metafield either. The theme reads the color or image that Shopify stores with an option value when the option is connected to a category metafield such as Color. The variant picker, the color dots on product cards and the filters all use it. Option values without that data show as text. See Product page.