Soin
Setup guide

1. Install the theme

1. In your Shopify admin: Online Store → Themes.
2. Add theme → Import a zip file.
3. Pick soin.zip — the inner file from the package you downloaded, not the whole package.
4. It appears in your library as SOIN, unpublished. Customize to work on it; publish when you are ready.

If Shopify says the file is not a valid theme, you have almost certainly uploaded the outer package. Unzip it first.

2. Colours & typography

The palette lives under Theme settings → Colours: page background (the cream paper), card background, ink (text, borders and the dark footer), the lime accent and the sage secondary. Two more groups matter early:

• Layout — page width and the product image ratio (portrait, square or tall) used across cards and grids.
• Product cards — vendor, rating, quick add on hover, second image on hover: four switches that set the tone of every grid.

The typography is the theme's signature and ships inside it: Archivo (variable, condensed capitals for headings) and Instrument Serif for the italic word inside a heading — write it as <i>word</i> in any heading field and the theme sets it in serif italic. Both fonts are self-hosted under the SIL Open Font License: no request to Google Fonts, nothing to consent to.

3. Menus & collections

The header reads one menu, the footer another — set both in the header and footer sections of the theme editor. Then point the home page at your catalogue:

• Collection grid and Best sellers rail — each takes a collection.
• Shop by concern — four tiles, each with a label, a count line and a link. Point them at your concern collections (dryness, breakouts, texture, redness — or your own).
• Brand directory — one block per brand, with an optional logo and link. The same section carries the ready-made brands page.

Every section that lists products falls back to drawn SVG placeholders while a collection is empty or unset — the page never looks broken while you wire it.

4. The routine quiz

The quiz needs no app: it runs entirely on blocks you add in the theme editor.

• Question blocks — the question text plus its answers, comma separated.
• The result card — section settings for the result heading, text, button label and the collection it links.

It is a guided path rather than a diagnosis: the visitor answers each question and every path ends on the same result card, which sends them to the collection you chose — a starter routine, your best sellers or a concern collection. Fields left empty fall back to the translated default texts.

5. Bundle builder

Point the section at a collection and set the number of slots (three by default) and the displayed discount. The buyer fills the slots from the collection's products, and one tap adds everything to the cart as separate lines.

The price break is yours to create. The builder fills the cart; the discount comes from Shopify so it applies at checkout no matter how the cart was assembled. In your admin: Discounts → Create discount → Amount off products, method Automatic, minimum quantity matching your slot count, at the percentage the section displays. One automatic discount is the whole setup — no code on the theme side.

6. Cart drawer

Under Theme settings → Cart:

• Cart type — drawer or page. The drawer re-renders itself after every add, with no page reload.
• Free shipping threshold — a whole number in your store currency. It must match your actual shipping settings — the bar is a display, not a rule: if Shopify still charges shipping at that amount, the bar promised something the checkout will not keep. Set it to 0 to hide the bar.
• Enable order notes — a note field in the drawer and on the cart page.

7. Wishlist & ready-made pages

The wishlist needs no app and no customer account: a heart on every product card and product page saves to the visitor's browser (localStorage), and the header shows the count. To give it a home: Online Store → Pages → Add page, pick the wishlist template, and link it from your menus — the page lists the saved products.

The theme ships four more page templates the same way: about (the mission page), brands (the directory), faq (an accordion fed by the section's blocks) and contact (a full contact form on Shopify's own endpoint). Create a page, pick the template, fill the sections in the theme editor.

8. Search, Markets, payment icons, unit prices, customer account

Added in 1.1 and 1.2, these work as soon as the theme is installed; the settings below are the only ones worth knowing.

• Predictive search — product, collection and page suggestions appear as shoppers type, with arrow-key navigation and a “View all results” link. Without JavaScript the plain search form still works.
• Shopify Markets selectors — country/region and language selectors sit in the footer (on by default) and optionally in the header; they appear once your store publishes more than one language or ships to more than one market.
• Payment method icons — the footer shows the payment methods enabled in your store; switch them off in the footer settings if you prefer.
• Unit price — set on the variant in Shopify (for example €12.40 / 100 ml), it shows on product cards, the product page (updated when the variant changes), the cart drawer and the cart page.
• Customer account — the account icon in the header is Shopify's account component, on desktop and mobile: shoppers sign in with Shop, an email code or the social sign-ins you enable, and reach their orders and profile without leaving the store. Its menu is set in Header → Customer account menu.
• Wishlist page — Header → Wishlist page tells the heart where to link; without a choice it looks for the page with the handle wishlist, and hides itself when neither exists.
• Taxes and quantities — “Taxes included.” appears under the price, in the cart drawer and on the cart page when your prices include tax; quantities can be typed directly in the drawer and on the cart page. Your store's contact email can fill the contact page and the footer text block automatically.

9. Languages

The interface ships in English by default with a complete French translation included — storefront and theme editor, so a French-speaking merchant configures the theme in French. To sell in French: Settings → Languages → Add language → French, then publish it. The storefront follows the language of the URL the visitor is on.

The announcement bar can show Shopify's country and currency information, and the footer carries the language selector as soon as your store publishes more than one language. Any other language can be added through Shopify's standard translation system — every customer-facing string in the theme is translatable.