Set up Atelier Form.

Start with your store

1. In Shopify, open Online Store → Themes and add Atelier Form. Keep it unpublished while you configure and test it.
2. In the theme editor, open Theme settings. Set your logo or store name (with the square mark), typefaces, color schemes, page width, units and Motion.
3. Create navigation under Content → Menus and choose it in Header → Menu. Top-level items with children open a mega menu; add Menu feature blocks to choose its photograph.
4. Create the dimension metafield definitions described under Product data. They power the drawings, the Will it fit? check, card dimensions and the specification table.
5. Enable filters in Search & Discovery (see Collections and filters).
6. Test products, variants, drawings, filters, the cart and checkout with your real data before publishing. Never publish demo dimensions or prices as real data.

Theme settings

• Logo and brand: logo and its width, or the store name set in the heading typeface beside a square mark in the accent color.
• Colors: five color schemes (in the default style: concrete, plaster, ink, Klein blue and white), a page scheme and a scheme for drawers and menus. Each has Background, Text, Button, Button text, Accent (blocks, markers, drawings, hover fills), Accent text (links and highlighted text; keep at least 4.5:1 contrast with the background) and Grid lines. Text on the accent is set automatically to white or ink, whichever contrasts more. All default schemes pass WCAG AA.
• Typography: headings (a heavy grotesk), their size and case; Emphasis, the italic face used for words wrapped in <em> in headings; and the body typeface. Large headings size themselves so their longest word always fits on one line, and their lines are spaced so letters never touch; long words in smaller headings are hyphenated. A long title therefore never breaks inside a word, in any language.
• Layout: page width, architectural grid lines, index numbers (001, 002…), Motion and animated page transitions.
• Product cards: image shape, second image on hover, vendor, dimensions and quick add.
• Units: show dimensions in centimetres or inches. Values are converted from the unit entered in each metafield.
• Cart: drawer or page and an order note. Line and order discounts, purchase options, unit prices and line item properties show in both.
• Search, Social media (blank fields create no links) and Search engine listing.

Sections

• Monolith: the opening. A heading set edge to edge whose words rise into place (new lines and <em> italic words supported), a photograph that opens through slats under a drawn dimension line, text, two buttons and up to three facts.
• Category band: your categories set large on a band of color (Klein blue by default), moving slowly across the page, with links. It stops on hover and focus and has a pause button; paused, it returns to its first word and can be scrolled by hand. It does not move with reduced motion, with Motion off or without JavaScript. Turn Move the row off for a quiet static row of links on an accent hairline.
• The Index: collections as huge numbered lines; on computers the collection’s photograph follows the pointer.
• Selected pieces (editorial layout with the first piece large, or a grid), Rail (a horizontal row with buttons, drag and a progress rule), Statement (a manifesto with up to four figures that count up when they are plain numbers), Shop the room, Material library, Studio (image with text), Journal, Questions, Newsletter, Featured product, Product recommendations, Recently viewed (the last pieces a customer opened, kept on their device) and Custom Liquid.
• Lookbook (up to twelve photographs on the grid, portrait or wide, each numbered and captioned and optionally linked to a piece), Slideshow (up to six numbered slides with previous, next and pause; autoplay is off by default and never runs with reduced motion or Motion off), Video (a Shopify-hosted, YouTube or Vimeo video that plays only when pressed, never with sound on its own), Multicolumn (up to eight numbered columns for services or process steps) and Rich text.
• Contact form: the page with the contact template shows your page text beside a native contact form with up to four detail blocks (address, hours, email).
• Header (top line, mega menu, search with suggestions, the customer account menu and the bag; on phones the account link moves into the menu so the menu button always keeps its full size) and footer (studio text, menus, newsletter, country/region and language, Follow on Shop, payment icons and the store name as a wordmark) are section groups.

Product page

The gallery sits beside a sticky panel built from reorderable blocks: reference and vendor, title, price, dimensions (linking to the drawing), variant picker, buy buttons with purchase options, Shop Pay Installments and dynamic checkout, stock and pickup, materials, text, collapsible rows (your text and a page, the description, or the product’s care text), share, Custom Liquid and app blocks. Option changes reload the page section in place, so the price, dimensions and drawing follow the variant.

Below, on an ink band, the technical drawing and Will it fit?, then the specification table and the description. A bar with the add button appears when the main button scrolls out of view.

Product data (namespace atelier)

Create product definitions in Shopify admin → Settings → Custom data with storefront access enabled. Use the Dimension type for measurements; the theme converts millimetres, centimetres, metres, inches, feet and yards. The same definitions on variants replace the product’s values for that variant (for example a table in two lengths). Nothing is estimated: missing values read Not stated.

• atelier.width, atelier.depth, atelier.height — dimension. Overall width, depth and height.
• atelier.diameter — dimension. For round pieces, used with the height instead of width and depth.
• atelier.seat_height — dimension. Drawn as a dashed line on seating.
• atelier.materials — list of single-line text, one material per entry, for example “Ivory bouclé upholstery”, “Smoked oak legs”. Name what each part is made of; put a finish such as “matte” in atelier.finish and construction details in the description.
• atelier.finish, atelier.designer, atelier.lead_time — single-line text.
• atelier.care — multi-line text, available as a collapsible row.

If your products already hold dimensions as text (for example “W 86 × D 82 × H 72 cm”), enter the values once in the new dimension fields; the theme does not read free text.

The technical drawing

Every product with stated dimensions gets a drawing to scale: front and side elevations for width, depth and height; a front elevation and a plan for diameter and height; a plan for pieces with width and depth only, such as rugs. Dimension lines carry the values in your chosen unit, the seat height is dashed, and a 175 cm figure stands beside furniture-scale pieces for scale (it can be turned off). The outline is the piece’s bounding box, so the drawing is schematic; the caption says so. Without the values nothing is drawn.

With JavaScript, a 3D switch shows the same outline in three dimensions: customers turn it by dragging, with the slider or the arrow keys. Hidden edges are dashed, a floor grid and a scale bar sized to the piece give the size, and the dimension lines carry the same values.

Printable spec sheet

The Share block adds Print spec sheet: the product prints as one A4 landscape sheet with an architectural title block (piece, reference, variant, overall dimensions, your store name, the date and the sheet number), the photograph, the drawing and the specification table, in black on white. Useful for interior designers and trade customers.

Will it fit?

Customers enter the width and depth of the space they are planning, in centimetres or inches. A plan view draws the space and the piece’s footprint to scale against the back wall and states the clearance on each side and in front, whether the piece fits turned 90°, or how much too wide or deep it is. It uses only the stated width and depth (or diameter) and needs JavaScript; it is hidden otherwise.

Fits my space

On collection pages, customers can enter their space once: every piece on the page is marked Fits (with the smallest spare), Fits turned 90°, Too big by… or Size not stated, and they can show only the pieces that fit. The space is remembered on their device. It checks the products on the current page, using each product’s default variant.

Shop the room

Choose a room photograph and add up to eight hotspots, each with a product and a position across and down the image in percent. A hotspot opens a small product card with its price and dimensions (a native popover; in older browsers the hotspot opens the product). The same pieces are listed beside the photograph, so every product is reachable without the hotspots.

Material library

Add up to eight materials with a macro photograph, a name, the composition and care notes. On computers the swatch magnifies where the pointer rests. Use the section on the home page and on a page with the materials template.

Collections and filters

Collections show the title set large with the live count, then filters, a Grid / Index view switch and sort. Filters come from Search & Discovery: add availability, price, product type and material or finish metafields. They open as a panel of columns, update the results in place and also work without JavaScript. The Index view lists the pieces as numbered lines with their dimensions and price; the choice is remembered on the customer’s device.

Motion, accessibility and performance

Theme settings → Layout → Motion offers Full (words rising into place, photographs opening through slats, drawings drawing themselves, scroll-linked movement, the moving category band, the following photograph on index lists), Subtle and Off. Customers whose device asks for reduced motion never see animation; the page never takes over scrolling, and auto-moving content can be paused. With Animate between pages, pages cross-fade under a steady header and a product’s photograph travels from its card into the gallery in browsers that support it.

Atelier Form is tested with keyboard navigation, visible focus and automated WCAG 2.2 AA checks in Chromium, Firefox and WebKit. Navigation, filters, product options and the cart page work without JavaScript. Recheck contrast after changing colors, write useful image descriptions and use properly sized images; apps and store content affect performance.

Updating safely

Duplicate the current theme before updating, keep a record of custom code and app integrations, and test variants, drawings and checkout after changes.

Frequently asked questions

Why is there no drawing on a product?

The drawing needs the dimension metafields with storefront access: width, depth and height; diameter and height; or width and depth. Text in other fields is not read.

Why does a row say “Not stated”?

One of the overall dimensions has no value for this product or variant. Enter it in the matching atelier field.

Can I show inches?

Yes: Theme settings → Units → Show dimensions in → Inches. Values entered in any unit are converted.

How do I stop the category band or the animations?

Customers can pause the band with its button. To keep it still for everyone, turn off Move the row in the Category band section; to turn all motion off, choose Theme settings → Layout → Motion → Off.

Does Atelier Form include a wishlist?

No. The Index view preference is stored on the customer’s device; account-based wishlists require an app.

Does “Fits my space” check my whole catalogue?

No. It marks the pieces on the collection page the customer is looking at, using each product’s default variant, so paging through a collection re-checks the next set. Pieces without a stated width and depth are marked Size not stated rather than hidden.

Why does my home page have two Heading 1s?

The Monolith section’s Heading level is Heading 1 by default, which is right for the first one on the page. A page should have exactly one Heading 1, so set any further Monolith — or one placed on a page that already shows its title — to Heading 2.

Can customers ask to be told when a piece is back?

Yes. Add the Back in stock block to the product template: sold-out variants then show a notify-me form, and the requests reach you as store contact emails naming the product, variant and SKU. Sending the notification itself is your decision; the theme does not email customers.

Where does the free delivery line in the cart come from?

Theme settings → Cart → Free delivery threshold, entered in your store currency (0 turns it off). It only draws the line; set the matching free shipping rate in Settings → Shipping and delivery so the promise holds at checkout.

Need a hand?

Send “Atelier Form” and the theme version, your store URL, the steps that led to the problem and what you expected instead. For a drawing, the 3D view, Will it fit? or Fits my space, name the piece and the atelier dimension fields you have filled in — a missing drawing or a row reading “Not stated” is nearly always an empty dimension or storefront access left off. Attach a redacted screenshot. Never send passwords, access tokens or customer records.

We reply within two business days, fix reported defects in good time and treat a critical bug — anything breaking browsing, the cart or checkout — as the first priority. Read the full support policy for what support covers.

Open the support form ↗ or email support@smartechor.com.