Product page

To edit the product page, open the theme editor and choose Products > Default product from the page menu at the top. Changes apply to every product that uses this template. To give some products a different layout, create another product template (Create template in the same menu) and assign it to those products in the Shopify admin.

The page has a gallery on one side and an information column on the other. Every part of the information column is a block: move it, remove it or add another. Every setting with its full range is listed in Product page sections.

Layout and gallery

In the Product information section:

Media stage

With Gallery style set to Color field stage, each product photo stands on a pale color field, like an object on a gallery plinth. When the shopper chooses another color, the field changes to match. Select the Media stage block (always present in the section) to set it up.

Color field

• Default field color: used for photos that belong to no color variant. Leave it blank to use the product's custom.field_colour metafield, then the palette's washi color.
• Color words and fields: one line per color, written word: color, for example:

  indigo: #DCE5F6
  moss: #E3ECD9
  vermilion: #F8DED6

  A variant whose option value contains the word puts its photo on that color. Option swatches and the variant metafield custom.field_colour work too, so you may not need any lines at all.

• Photos: Blend white into the field (for photos taken on a white background: the white takes the field color and the shadow stays) or Normal (for scene photos).

Chips on the photo

Small labels on the photo's corner: Chip 1 and Chip 2 (short text; connect a product metafield to vary them per product), Product type as a chip and Badges as chips (sale, new, low stock and tag badges).

Sizes (turn on Adjust sizes and motion)

The stage can also hold a Seal block (a round stamp with words around its rim) and has a vertical size ruler standing on the edge of the photo (see below).

Figure

With Gallery style set to Figure: product name under the floor line, tabs, the gallery is drawn as one exhibition plate. A single pale field holds the object, which stands on a thin floor line, with the size ruler in its own column beside it. Under the floor line sit the product name (the page's only main heading) and the maker line (vendor and the custom.made_in metafield), with the photo chips opposite. The thumbnails become a row of tabs under the field, each with a small picture and a word, such as the color of that photo. On phones the figure runs edge to edge and the tabs scroll sideways.

The figure uses the field colors and chips of the Media stage block, plus Show made in, maker and material as chips. Its sizes are in the same block, under Adjust sizes and motion:

Size ruler

The size ruler shows how big the chosen size is and moves when the shopper picks another size. It is useful for items whose size is hard to judge from a photo, such as bowls, vases or figures.

It appears in two places:

• On the media stage: a vertical ruler beside the photo (a fixed part of the stage).
• In the information column: add a Size ruler block for a horizontal scale with a read-out such as "Size 18 cm".

Settings

• Size option names: the product option that holds the size, for example Size, サイズ. A product without that option, or with one size only, shows no ruler.
• Numbers per value: one line per size, written Value: number, for example Medium: 18.
• Unit: the unit printed after the numbers, such as cm.
• Show the chosen size as text: the read-out above the scale.

Kyoto finds each size's number in this order: the variant metafield custom.height, a line in Numbers per value, then the number the value starts with ("18 cm"). If a size has no number at all, the ruler shows the sizes as evenly spaced steps labeled with their names (Small, Medium, Large).

Sizes (turn on Adjust sizes and motion)

Museum label

The Museum label block describes the product the way a gallery labels an object: a second name, then rows for Made in, Maker, Material and Note.

Each line comes from the block setting; leave a setting blank and Kyoto reads the product metafield instead:

Rows without a value are left out, so the same block works for every product. See Metafields to create the metafields.

Sizes (turn on Adjust sizes and motion): Second name size (Small, Medium, Large, Extra large), Second name color (Pop, Text color, Muted), Text size (Small, Medium, Large), Row name column width (Small, Medium, Large), Top rule (Ink, Hairline, None) and Motion (None, Subtle).

Icons with text

The Icons with text block shows short promises with icons, such as delivery, returns or care. Add an Icon with text block inside it for each line.

Each Icon with text has an Icon (Truck, Returns, Leaf, Ruler, Care, Info, Lock, Gift, Warning, or None), or your own Image, a heading, text and a link. Its own Icon size (Use theme setting, Small, Medium, Large, Extra large) overrides the group's size for that one line.

Variant picker

Variant cards

With Style set to Cards, every option value is a card. Cards help shoppers compare sizes or sets at a glance.

• Card layout: Inline (side by side) or Stacked (one per row).
• Size option names: options whose values get a dot that grows with the size, for example Size, サイズ.
• Small hint under the name: the variant metafield custom.size_label (for example "18 cm"), or the price when prices differ.
• Card size: Small, Medium, Large. Dot and swatch size: Small, Medium, Large.

Sold out values follow Sold out variant style in Theme settings > Inputs and variants.

Title, price and description sizes

Gift wrap on the product page

1. Create a product for gift wrapping (for example "Gift wrap", with its own price) and choose it in Theme settings > Cart > Gift wrap product.
2. In the information column, add a Group block, then add a Gift wrap block inside the group.

The shopper ticks the box to add the gift wrap product to the cart. Settings: Label, Show price, Show message field, Look (Plain, Boxed), Checkbox size and Text size (Small, Medium, Large), and the names saved on the order. Choose the names saved on the order before your first order: apps and order exports look for these exact words.

The same gift wrap product can also be added from the cart. See Cart.

Other blocks

Cut-out images

Some Kyoto sections let a product stand freely on a color field: the Product shelf section, the Color field with a shelf collection banner, the Interlocking hero, Hero: round window, Image with text and the Closing band. They look best with a cut-out picture: a .png with a transparent background.

• Make the cut-out with any background removal tool, export it as .png and keep a soft shadow if you like.
• Leave a little empty space around the object and keep the long side at about 1600 px.
• The Product shelf section and the Color field with a shelf collection banner read the product metafield custom.cutout (type File, images only) by themselves, so one upload per product is enough there. The other sections take the cut-out in their own image setting. See Metafields.

Sections under the product