> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/exp98-shopify-theme/exp98/sections-and-features/product.md). # Product The product window — gallery, video and 3D, variants, fold-out rows, size chart and recommendations. A product opens as a window: the gallery on the left, the details on the right, and **You may also like** across the bottom. It's the **Product** section on the product template. ## Gallery * The big picture, with a row of thumbnails under it. Arrows either side of the row step through them; on a phone, swipe across the picture. * Clicking the big picture opens a **viewer window** with every image full size, to scroll through. * While a full-size image loads, a low-resolution version shows at once, blown up and pixelated — the way pictures loaded over a slow connection in 1998 — then sharpens. ### Video and 3D Add video or 3D models to a product in your admin the way you add images. The theme handles the rest. | Media | | | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | **Video uploaded to Shopify** | Plays in the picture's place with its controls | | **YouTube or Vimeo** | Plays in the picture's place | | **3D model** | Turns in the picture's place — drag to rotate. On phones that support it, **View in your space** shows it in the room through the camera | Video and 3D thumbnails carry a small play or cube badge, so shoppers can tell them from photos. Nothing loads until it's chosen, so a product with a video costs nothing extra until someone presses on it. Choosing another thumbnail or closing the window stops the video. ## Variants | Setting | Default | | | ------------------ | ------- | ----------------------------------------------------------------------------------------------------- | | **Variant picker** | Buttons | Or Dropdown. Buttons show every option at a glance and usually sell better; dropdowns suit long lists | Each option is labelled with its real name — Size, Colour — and the chosen value shows beside it: **SIZE: XL**. A combination you don't make says so on the button rather than failing at checkout. If a variant has its own image, choosing it shows that image. Under the options: quantity, **Add to cart** — which opens the cart window in place rather than leaving the page — and your store's express checkout buttons (Shop Pay, Apple Pay, PayPal…), whichever are turned on. ## Add to Favorites The little heart in the top-right corner of the product picture (**Add to Favorites**) saves the product to the shopper's **Favorites** in the Start menu; pressed again, it comes out. Nothing to set up — it's kept on their own browser. Every product window they open also goes into **Documents** in the Start menu, the last five. The low-stock notice and the Sale/New badges are set under Theme settings → [Products](/exp98-shopify-theme/exp98/theme-settings/products.md). ## Fold-out rows Rows under the description that open when tapped — **Shipping & returns**, **Care**, **Materials** — each a **Fold-out row** block in the Product section (up to eight). Give one a heading and either **Text**, or **a page** whose content it shows instead (one Shipping & returns page for every product). For a note that differs per product — care instructions, say — connect **Text** to a product metafield. **Open when the window opens** starts a row unfolded. A row with nothing in it isn't shown. ## Size chart A **Size chart** button under the size buttons, opening your chart in a window with an **in / cm** switch that converts the measurements for the shopper. You write the chart once, in one unit — the theme does the arithmetic. ### Setting it up, step by step **1. Make the chart page.** Online Store → Pages → **Add page**. Title it — *Size chart* — and type the chart into the content box, **one line per size, with a | between the columns**. The first line is the headings. Put the unit in a heading: ``` Size | Chest (in) | Length (in) | Sleeve (in) S | 36–38 | 27 | 8.5 M | 39–41 | 28 | 9 L | 42–44 | 29 | 9.5 XL | 45–47 | 30 | 10 ``` That's it — no table tool, no code. The theme turns those lines into a proper table. (A line without a | — a note like *Measurements are of the garment, laid flat* — is kept above the table.) Save the page. **2. Pick it in the theme.** Theme editor → open any product → click the **Product** section → **Size chart page** → choose the page. Save. Every product with a Size option now has the button. **3. Check it.** Open a product on your store, press **Size chart**, flip **in / cm**. For a **different chart per product** — tees and trousers, say — see [Size Chart](/exp98-shopify-theme/exp98/metafields/size-chart.md); it's two more steps. | Setting | Default | | | ----------------------------------- | ---------------------- | ------------------------------------------------------------------------------- | | **Size chart page** | none | | | **Show it beside these options** | Size | Option names, comma-separated — for example `Size, Waist, Shoe size` | | **The chart's measurements are in** | Read it from the chart | Inches or Centimetres, or let the theme find the word `in` or `cm` in the table | ### The rules the switch needs The switch converts every number in the table (1 in = 2.54 cm, centimetres rounded to the half, inches to the quarter), so: * **One unit for the whole chart** — all inches or all centimetres. Don't put a cm column next to an inch column. * **Size labels in the first column.** The first column is never converted, so a waist "32" or a shoe "42" stays as it is. Everything to the right is treated as a measurement. * **Say the unit somewhere in the table** — *Chest (in)*, *Chest (cm)*, or a heading that says *inches*. On *Read it from the chart* the theme uses the first unit word it finds; if the table never says, set the unit in **The chart's measurements are in**. If neither says, inches is assumed. * Ranges (`32–34`), decimals (`36.5`) and inch marks (`32"`) all convert. Unit words follow the switch: *Chest (in)* becomes *Chest (cm)*. The switch only appears when the chart has numbers. A shopper's choice is remembered on their browser. {% hint style="warning" %} Numbers that aren't measurements — an *Age* or *EU size* column — would be converted too. Keep those in the first column, or leave them out of the chart. {% endhint %} ### Other ways to write the chart * **The page editor's table tool** (the grid icon in the toolbar) works too, and so does pasting a table from a spreadsheet — with the size labels in the first column and the unit in a heading, as above. * **Have an AI write it.** Paste this into ChatGPT or Claude with your measurements, then paste its answer into the page: > Write a size chart for my \[product] as plain text lines, one line per size, with a | between columns. The first line is the headings. Put the size label in the first column and write every measurement in \[inches / centimetres], with "(in)" or "(cm)" in each measurement heading. No table code, no extra text. The sizes and measurements are: \[paste them] * **Already have HTML?** Click the `` button at the far right of the page editor's toolbar, paste the `` code while in that view, click `` again, and Save. Pasting HTML into the normal view stores it as text, and the window will show the code instead of a table. ## You may also like Four products across the foot of the window, picked by Shopify from what shoppers view and buy together. The one being looked at is never among them. If Shopify has nothing to suggest, the box doesn't appear. Shoppers can fold the box away by clicking its heading, like the cart's suggestions. It stays folded in every product window on their browser until they open it again. | Setting | Default | | -------------------------------- | ----------------- | | **Show product recommendations** | on | | **Heading** | You may also like | | **Products to show** | 4 (2 to 8) | To choose them yourself for any product, use the **Search & Discovery app** in your admin. ## Description Your product description, under the buttons.