Setting up TOGE

TOGE is a theme for small maker brands: one story per product, fabric notes, field photos and drops. A theme can only carry its layout and sample copy. Your products, photos, menus and metafields live in your store, so a fresh install looks empty. This guide walks through what to add, in the order that makes the biggest difference.

Everything below is done in the Shopify admin. Nothing needs code. Where a step is ordinary Shopify work, this guide links to the Shopify Help Center instead of repeating it.

1. Words used in this guide

Word	Meaning
Theme editor	The screen where you change the theme's settings and content: Online Store → Themes → Customize.
Section	One band of a page in the theme editor (hero, new arrivals, footer…). Each has its own settings.
Template	The layout a page uses. TOGE ships templates for the about, support, contact and policy pages. You pick a page's template in the page editor, under "Theme template".
Handle	The last part of a page's or collection's URL, like `about-us`. Shopify sets it from the title; you can change it in the "Search engine listing" box of the page editor. The theme finds some pages by handle.
Metafield	An extra field you add to products, collections or blog posts, under Settings → Custom data. The theme reads some of them.
Metaobject	A record you define yourself, with its own fields, that products can point to. TOGE uses one for fabrics.
Drop	A release of a product on a set date. Before it, the product page shows the date instead of a cart button.

2. The first ten minutes

Upload the theme: Online Store → Themes → Add theme → Upload zip file. Keep it unpublished until the home page looks right; "Customize" lets you preview an unpublished theme.
Logo: Theme editor → Header. Upload your logo image, or leave it empty to show the store name as text. (The mountain mark on the home page is TOGE's own logo. To replace it, edit snippets/logo.liquid or turn off "Logo on image" in the Hero section.)
Main menu: Content → Menus → Main menu. The header shows whichever menu you pick in the Header section (default: main-menu). Nested menus open as dropdowns, up to three levels.
Home page hero: Theme editor → Hero. Add a wide photo (2:1, 2400 px wide is plenty). Add a separate 4:5 photo for phones if the crop is wrong. If the photo is bright, set "Text color on the photo" to Ink.

That already gives you a store that looks finished.

3. Theme settings

Theme editor → Theme settings. These apply everywhere.

Setting	What it does
Colors	Two color schemes: scheme 1 is light, scheme 2 is dark. Sections such as the newsletter band pick one of them. Each scheme has background, text, border, surface, accent, link and button colors.
Typography	Body font and heading font. Each comes with regular, medium and bold weights. Any Shopify font works.
Layout	Maximum page width and the margin at the sides.
Input corners	Corner radius of fields and buttons.
Favicon	The small icon in the browser tab. Square, 32 px or larger.

4. Menus and pages the theme looks for

The footer and support pages pick things up by handle. Create them with these handles and they appear by themselves. Leave them out and that part simply doesn't show.

What	Where	Handle
Footer menu columns	Content → Menus	any menus; choose them in Footer → blocks
Journal	Blog posts	blog `news`
About page	Pages, template `page.about`	`about-us`
Support page	Pages, template `page.support`	`support`
Contact page	Pages, template `page.contact`	`contact`
Legal pages shown in the footer	Settings → Policies	Privacy, Terms, Refund, Shipping
Extra legal pages (Japan)	Pages, template `page.policy`	`tokushoho`, `cancellation`

To make a page, go to Online Store → Pages → Add page. Give it a title, pick the template under "Theme template" on the right, and check the handle under "Search engine listing".

The legal pages come from Settings → Policies; the footer links to whichever you have filled in.

tokushoho and cancellation are pages that Japanese law asks of online shops. If you do not sell in Japan, skip them. The page.policy template shows any page in the same style as the policies.

The about, support and contact pages are built from sections, so their text and photos are edited in the theme editor, not in the page itself. The contact form sends to the store's sender email address. The newsletter band adds subscribers to Customers with the newsletter tag.

5. Home page

Section	What it needs
Hero	A photo (see above). Heading, lead text and the link are section settings.
Feature band	Collections with the metafield Show on home feature turned on (see §8). With one collection it is a still band; with two to five it becomes a carousel. Without any, the section uses its own text and photo settings.
New arrivals	Pick a collection in the section. Three products on desktop, four on phones.
Story	A photo, or a short looping video (mp4 uploaded under Content → Files; it plays muted). The text sits over the picture; turn "Text over the image" off to put it below.
Journal	Pick the blog. Three latest posts.
Recently viewed	Fills itself from the visitor's browser. Nothing to set.

You can add more sections to the home page with "Add section": Featured product (one product with its photos, options and cart button), FAQ, Support guide, Contact form, and another Story, Collection feature, New arrivals or Journal. The newsletter band lives in the footer, so it shows on every page.

6. Products

The product page works with a plain product: title, price, photos, options. Each item below adds one more part of the page. Everything is optional, and the page hides what is empty.

What is on the page

From the top: main photo and catchphrase → name, options, price, cart and the details accordion → pairs well with → product photos → story → fabric chapter → note → field photos → related products → recently viewed. Everything from "pairs well with" down is its own section in the theme editor, so you can reorder it or remove it.

The Product page section has settings that control the top part:

Color and size block: which option is color and which is size (see below), the "Low stock" threshold, the size label, and a size guide page.
Quantity block: maximum per order (0 means no limit) and a note under the field.
Cart block: dynamic checkout buttons (Shop Pay and the like) and the recipient form for gift cards.
Accordion blocks: each one is a row in the details. A row can show a store policy, the product description, the care guide, the size table or the material and origin.

Options and photos

Color and size are picked by position, not by name, so the option can be called Color, Colour or カラー. Set "Color option position" and "Size option position" (1 to 3) in the Product page section if yours differ from 1 and 2.
A third option (length, fit…) is shown as buttons as well. Nothing to set.
Color tiles use the photo of each color's first variant (portrait 4:5, 1080 × 1350 works well). Give every variant of a color the same photo.
Main photo: the big picture at the top is the metafield custom.hero_image, else the product's first photo. It is meant to be the "world" picture, not a product shot.
Gallery: product photos that are not used as color tiles are laid out below the story. Videos, YouTube and Vimeo links and 3D models added to the product show there too.

Metafields the product page reads

Create these under Settings → Custom data → Products → Add definition. Give the definition any name; what must match is the namespace and key (type it as namespace.key in the definition form) and the type. Once a definition exists, every product gets a field for it at the bottom of its edit page.

Namespace.key	Type	Shows as
`descriptors.subtitle`	Single line text (standard)	The one-line catch under the main photo
`descriptors.care_guide`	Multi-line text (standard)	"Care" in the details accordion
`custom.hero_image`	File (image)	Main photo at the top; also the hover photo on product cards
`custom.hero_video`	File (video)	Plays instead of the main photo, muted, looping
`custom.gender`	Single line text	Small label next to the product name. It links to the collection with the same handle, if that collection has products
`custom.gender_collection`	Collection reference	Where the label links instead, if the handles differ
`spec.material`	Single line text	"Material" in the details
`spec.origin`	Single line text	"Made in" in the details
`spec.size_table`	Multi-line text	Size chart. One row per line, cells separated by `\|`. The first line is the header: `Size \| Length \| Chest \| Sleeve`, then `S \| 66 \| 50 \| 20`. It is printed as typed, not transposed
`color.names`	Single line text	Display names for colors, as `CODE:Name` pairs separated by `\|`: `SUMI:Ink\|SAND:Sand`. The code is the option value
`drop.mode`	Single line text	`pre` for a drop that has not opened yet: the cart is hidden and the "notify me" panel shows instead
`drop.next_at`	Date	Date of the next drop, shown on the "notify me" panel
`drop.label`, `drop.qty`, `drop.note`	Single line text	Button label and the short line under it before a drop
`drop.end_variants`	Single line text	Discontinued combinations as `Color / Size`, separated by `\|`: `SAND / XS\|SAND / XL`
`nav.parent`	Single line text	Handle of the collection to show in the breadcrumb (see below)
`story.gallery`	List of files (images)	"Field" photos: the horizontal strip of lifestyle shots
`story.fabric`	Metaobject reference → Fabric	The fabric chapter (see §7)

Most of these also exist as settings of the Product page section (main image, catchphrase, gender, material, origin, color names, discontinued combinations, sales status). The section setting applies to every product and the metafield overrides it, so a store with one or two products can skip metafields entirely.

Breadcrumbs above the product name are decided in this order: tags bread1-apparel, bread2-tops (the theme looks for collections with the handles apparel and tops; without them the words show without links) → the nav.parent metafield → the first collection the product belongs to. The bread1- tag also decides which products appear in "related products".

The story itself is the product description. Headings (h3), paragraphs and images are all it needs; the theme adds the contents list on the right from the headings.

7. Fabric chapter (metaobjects)

The fabric chapter is a part of the product page that tells one fabric's story: name and lead, a row of big numbers (weight, thickness…), face and back photos, three "how it works" steps, and comparison charts. It is one metaobject per fabric, shared between products. Only the name is required; every other part appears when its field is filled.

Create the definitions under Settings → Custom data → Metaobjects with these field keys. Names and the definition's own name can be anything; the theme follows the product's story.fabric reference and reads fields by key. Create the small definitions first, since the bigger ones refer to them: Fabric row → Fabric chart, Fabric step, Fabric stat → Fabric.

Fabric (the one you attach to products)

Key	Type
`name`, `eyebrow`, `headline`	Single line text
`lead`	Rich text
`stats`	List of Fabric stat
`views_heading`, `views_note`, `face_title`, `face_tag`, `back_title`, `back_tag`	Single line text
`views_body`, `face_body`, `back_body`	Rich text
`face_image`, `back_image`	File (image)
`how_heading`	Single line text
`how_body`	Rich text
`steps`	List of Fabric step
`charts`	List of Fabric chart
`note`	Multi-line text

Fabric stat: value, unit, label, prefix (all single line). Shown as the row of big numbers, e.g. value 90, unit g/㎡, label Weight.

Fabric step: image (file), title (single line), body (rich text). Three steps make the "how it works" strip.

Fabric chart: title (single line), body (rich text), axes (list of single line), rows (list of Fabric row), note (single line). With axes filled in, the chart is a five-dot rating table; without, it is horizontal bars.

Fabric row: label (single line), value (decimal), display (single line, what to print instead of the raw value, e.g. about 30 min), scores (list of integers, one per axis, 1 to 5), highlight (boolean, marks your own fabric).

Charts animate when they scroll into view. Numbers count up from zero.

8. Collections

Under Settings → Custom data → Collections:

Namespace.key	Type	Shows as
`toge.home_feature`	True/false	Put this collection on the home feature band
`toge.feature_heading`	Single line text	The big line on the band and at the top of the collection page
`toge.feature_image`	File (image)	Band photo, if different from the collection image
`toge.feature_video`	File (video)	Plays on the band instead of the photo
`nav.parent`	Single line text	Handle of the parent collection, for the breadcrumb (`all` for "all products")

The collection description is the short text under the heading. Filters, sorting and the number of products per page are settings of the Collection section.

9. Announcement bar

The bar at the very top is driven by blog posts, so you can write, schedule and retire announcements like any post.

Under Settings → Custom data → Blog posts, create toge.announce (true/false) and toge.announce_text (single line text).
On the post, turn announce on. The bar shows announce_text, or the post title, and links to the post.
The newest post with the flag wins. With none, there is no bar.

Visitors can close the bar. It stays closed for seven days, or until the text changes.

10. Things that appear on their own

These parts of the theme follow your store settings. There is nothing to set in the theme.

Part	Appears when
Country and language selector (footer)	The store has more than one market or language
"Tax included" next to prices	Prices include tax (Settings → Taxes and duties).
Shipping note under the price	The market has a metafield `custom.shipping_note` (text or money)
Pickup availability on the product page	A location offers local pickup and the product is stocked there.
Shop Pay installments	The store is eligible for Shop Pay Installments
Gift card recipient form	The product is a gift card.
Follow on Shop (footer)	Shop Pay is enabled and the setting in the Footer section is on
Account icon in the header	Customer accounts are turned on (Settings → Customer accounts)
Search suggestions while typing	The store language is one that Shopify's predictive search supports (not Japanese yet)

11. Image sizes

Where	Size
Home hero	2:1, 2400 px wide. Phones crop it to 4:5, or use the separate phone image
Home story	2:1, 2400 px wide. Phones crop it to 4:5
Collection feature band	16:9, 1600 px wide or more. Phones crop it to 4:3
Product main photo (`custom.hero_image`)	3:2, 2000 px wide. Phones crop it to 4:5
Variant photos (color tiles)	4:5, 1080 × 1350. Product cards and the gallery show 4:5; the color tile crops a square from the middle
Product photos (gallery)	4:5
Field photos (`story.gallery`)	2:3, portrait
Fabric face and back	Any, but the same shape for both; 1200 px wide
Fabric steps	Drawings on a white background; the white blends into the page
Blog post image	4:3 on the journal list, 1600 px wide or more
Favicon	Square, 32 px or larger

Shopify resizes everything for each screen, so larger is fine.

12. Languages

All sample copy in the theme is English. The theme's own labels (buttons, cart, search) and the theme editor ship in English, Japanese, German, French, Spanish, Portuguese (Brazil), Italian, Traditional Chinese, Simplified Chinese and Korean; the storefront follows the store's language.

Your own content, such as section text, products and pages, is translated with Shopify's free Translate & Adapt app. App

13. Updating the theme

When a new version is released, Online Store → Themes shows an update notice on the theme. Updating keeps your theme editor settings and content. Edits to the theme code are not carried over, so note any changes you made before updating.

14. What the theme does not bring

Photos and videos. Shopify themes cannot ship media, and the demo photos are licensed to the demo. Where a photo is missing you see a grey placeholder drawing.
Products, posts, pages, metafield definitions. These are store data. This guide lists everything the theme can use.
Apps. None are needed. Translate & Adapt is only for extra languages; a subscription app only if you sell subscriptions.