Set up your home page in Platter

Platter’s home page is built from product fields: one product per full-width band, in the product’s own color, with its facts beside a working Add to bag button. Between the fields sit a range table, a subscription, a recipe, questions and your story. This guide walks through each section. You don’t need code for any step.

1. Open the home page in the editor

Click Customize on Platter. The editor opens on the home page. The left panel lists the sections from top to bottom. A new Platter home page has these sections:

• Product field, using the Feature composition
• Range index
• Six more product fields in different compositions
• Subscription
• Recipe
• Product field, using the Wide photo composition, for a gift box or bundle
• FAQ
• Story

Remove what you don’t need. Add a section with Add section at the bottom of the list.

2. Product fields

Each Product field section shows one product. Pick it with the Product setting. The rest of the settings are optional.

• Composition decides the layout. See the next step.
• Field color overrides the color for this section only. Leave it empty to use the product’s field color metafield, then the theme’s Default field color.
• Image overrides the photo. Leave it empty to use the product’s first image. If the product’s first media is a video or 3D model, that leads the field instead.
• Text replaces the batch line under the name. It shows in the Feature composition and wherever the photo bleeds off the page edge. In the Wide photo composition it replaces the product description.
• Show batch line (platter.batch) shows the product’s batch metafield under the name. It shows in the Feature composition and wherever the photo bleeds off the page edge. On phones the Feature composition hides it.
• Show size next to price moves the size from the facts list to beside the price.
• Show kitchen note adds your kitchen note under the facts.
• Show ingredients puts the ingredients in front of the kitchen note. It needs Show kitchen note to be on.
• Wipe in on scroll lets the field color wipe in as the shopper scrolls. See step 8.

The first section on the page becomes the page’s main heading and loads its photo first. Keep a product field with the Feature composition at the top.

3. Compositions

Mix compositions down the page so a run of fields does not read as a grid.

• Feature: photo bleeds from the edge. A tall first screen. Use it for the first section only.
• Photo first, large. The tallest field, with the packshot on the start side.
• Photo last, small. A smaller packshot on the end side.
• Band: short, square photo. A short field for small items. With Show ingredients on, the ingredients sit under the name. In this composition they don’t need Show kitchen note.
• Photo bleeds off the end. The photo runs off the end edge of the page for the full height of the field.
• Wide photo: gift boxes and bundles. A wide photo across the field. Below it are the text or description, notes, allergens and the buy block. It does not show the measure.

The theme’s Field form recasts “Photo first, large” and “Photo last, small”. With Bleed, their photos run off the page edge. With Shelf, both become shelf layouts, with the name across the top. With Split, they stay as described above. See Choose a preset and set your style in Platter.

4. Range index

The range index lists your products as one table, so a small range reads as a set. Each row has the product’s color chip, origin, measure and price.

• Heading and Text sit beside the table.
• Collection picks the products. Leave it empty to list every product.
• Products to show sets the number of rows, from 3 to 50.
• Show link to the collection adds a View all link. It needs a collection.

The measure column takes its heading from Theme settings → Food facts → Measure label. On phones the origin column is hidden.

5. Subscription

The Subscription section features one product sold on a selling plan, such as a monthly box. It shows the plan price with a suffix such as “a month”, and the saving against buying once.

• Subscription product must have a selling plan from your subscription app.
• Heading defaults to Bar Club. Price suffix defaults to “a month”. Button label defaults to Join Bar Club. Change all three to match your plan.

See Subscriptions in Platter for how plans and savings show.

6. Recipe

The Recipe section features one recipe article. It shows the article’s photo, title, time, the products it uses, and one button that adds them all to the bag.

• Recipe article picks the article. Its products and time come from article metafields.
• Image overrides the article image.
• Text overrides the article’s excerpt.

See Recipes and Add all to bag to set up recipe articles.

7. FAQ and Story

FAQ shows questions that open in place. Add a Question block for each question and fill in Question and Answer. Turn on Open the first question if you want the first answer showing. Platter also gives search engines the questions and answers as FAQ data.

Story is your maker’s note beside a photo. Fill in Heading, Text and Image. Signature, Link, Link label and Image caption are optional. Turn on Show image first to put the photo on the start side.

8. The color wipe and reduced motion

Product fields can wipe in, in their own color, as the shopper scrolls. Go to Theme settings → Motion → Motion to choose how much motion your store uses:

• Full: fields wipe in.
• Subtle: content rises gently.
• Off.

The wipe never runs on the first section or on the Feature composition. Turn it off for a single field with Wipe in on scroll. Browsers that can’t run the effect show every field complete.

Shoppers who ask their device for reduced motion always get the still version, whatever you choose here.

9. Sections you can add

These sections are not on the home page by default, but you can add them anywhere:

• Stockists lists the shops that carry your range. Add a Stockist block for each shop, with City, Shop name, Address and Link.
• Build a box lets shoppers fill a box from a collection. See Build a box.

Platter also has page templates for both. To make a Stockists page, go to Online Store → Pages → Add page, choose the template stockists, and save. Then fill in the section in the editor.