Theme documentation
Tapeline
Tapeline is a Shopify theme for streetwear brands that make their own clothes. It is built around the question every first-time customer asks: will it fit? Product cards show the sizes in stock and the fabric, product pages show the garment's own measurements next to a drawing, and the home page answers shipping, returns and payment before anyone has to look for them.
Getting started
- Add the theme from the Theme Store and open Customize.
- Theme settings > Logo and favicon: upload your logo, or keep the store name, which is set in the heading font.
- Theme settings > Colors: the default is a near-white page with charcoal text and square corners. Secondary grey and the notice color are tuned to pass WCAG AA on the page color. On raised bands the theme switches secondary text to the main text color automatically.
- On the home page, pick a collection for Featured collection and one collection per tile in Collection tiles.
- In Online Store > Navigation, build your main and footer menus and pick them in Header and Footer.
/#size-guidejumps to the size guide section on the home page. - Run through Product metafields once: it takes ten minutes and fills every product page.
Theme settings
| Group | What it controls |
|---|---|
| Logo and favicon | Logo, logo width, favicon |
| Colors | Page, two raised surfaces, lines, text, secondary text, button, button text, notice (low stock, measurement lines), success |
| Typography | Heading font (default Instrument Serif), body font: the bundled Onest or any font from the Shopify library, heading size |
| Layout | Page width, heading focus motion |
| Product cards | Second image on hover, sizes in stock, spec line, low stock threshold, swatch color list |
| Cart | Drawer or cart page, free shipping threshold, cart message, order note |
| Social media | Instagram, TikTok, YouTube, Facebook, X, Pinterest |
| Search | Suggestions while typing |
Swatch colors. Color options use the swatch set on the option value in Shopify admin. For values without one, the theme reads Product cards > Swatch colors, one per line as Name: #hex, for example Sand: #CDBFA6.
Low stock. When a variant tracks inventory and has this many or fewer left, cards and the product page say "Only 2 left". Set it to 0 to turn it off.
Home page sections
| Section | Use |
|---|---|
| Announcement bar | One line above the header: shipping threshold, returns (header group) |
| Hero | A heading whose first word is cut out of a photo, a short text, a button, a second link and an image |
| Trust answers | Up to four questions customers ask before ordering, each with a short answer and a link |
| Featured collection | The rack: products in a continuous line grid with spec line, price and sizes in stock |
| Collection tiles | Tall image tiles, one per collection |
| Lookbook | A row of photos with captions linked to products (see motion) |
| Size guide | How to measure, a garment drawing and a reference size table |
| Testimonials | Customer words you enter by hand, with the product and size they bought |
| Showroom | Your physical shop: text, opening hours, address, phone, directions, photo |
| Marquee | Two rows of words drifting in opposite directions |
| FAQ | Questions and answers as native disclosures |
| Newsletter | Email signup saved to Shopify Customers |
| Featured product | One product with picker and buy buttons on any page |
| Rich text, Custom Liquid | Free text, app snippets and custom code |
Hero cut-out word. The first word of the heading is filled with the Cut-out word photo under a dark veil, so it stays readable on the brightest part of the photo. Wide, high-contrast textures (a street, a wall, fabric) work best; faces and text do not read inside letters. Without a photo the word is plain text.
Testimonials. Publish only real customer words, with their permission. Ratings are optional (0 hides the stars). Product reviews from a reviews app belong on the product page; see below.
Product pages
The product page shows every photo at once (a swipeable row on phones) and a sticky info column built from blocks. Default order:
- Spec line: the
tapeline.spec_linemetafield, or the product type - Title, Price (with tax note, unit price and Shop Pay Installments)
- Variant picker with stock note and a link to the size chart
- Buy buttons with accelerated checkout
- Help text: for example "Not sure about the size? Send us your height."
- Trust lines: shipping, returns and payment in one line each
- Pickup availability
- Description
- Spec rows: Fabric, Fit, Made in, Care, Model; each row is connected to a product metafield and hidden when the product has no value
- Collapsible tab: shipping and returns
- Complementary products ("Wear it with", from the Search & Discovery app)
Reviews. Install a reviews app and add its block to Product information in the theme editor (Add block > Apps). The theme has no review markup of its own, so it never shows reviews that are not real.
Below the product information, Product size chart shows the product's own chart, and Related products shows recommendations.
Product metafields
Create these definitions in Settings > Custom data > Products. Use the namespace and key exactly as shown.
| Name | Namespace and key | Type | Shows |
|---|---|---|---|
| Spec line | tapeline.spec_line | Single line text | Under the name on cards and above the title on the product page |
| Fabric | tapeline.fabric | Single line text | Spec row |
| Fit | tapeline.fit | Single line text | Spec row |
| Made in | tapeline.origin | Single line text | Spec row |
| Care | tapeline.care | Single line text | Spec row |
| Model info | tapeline.model_info | Single line text | Spec row, e.g. 6'0", wears L |
| Size chart | tapeline.size_chart | JSON | Product size chart section |
Spec rows are ordinary blocks: you can rename them, add more and connect any metafield to their value with the database icon in the editor.
Size charts
A size chart is drawn from a JSON metafield, so each product can have its own measurements:
{
"garment": "top",
"unit": "in",
"rows": [
["S", 22.8, 26, 20.5, 23.6],
["M", 24, 26.8, 21.3, 24],
["L", 25.2, 27.6, 22, 24.4]
],
"model": "Model is 6'0\" and wears L."
}garment:topdraws a top and uses the columns chest, length, shoulder, sleeve;bottomdraws pants and uses waist, hip, inseam, length.unit:inorcm.rows: the size, then four values in the column order above.model(optional): a line under the table.
Products with a chart get a "See the size chart" link under the variant picker. Products without one link to the page you set in Variant picker > Size guide page, if any.
The home page Size guide section uses the same drawing with rows entered as blocks, for a reference chart.
Hovering or focusing a column header highlights the matching line on the drawing. Every line is drawn and labelled without it, so the chart reads the same with a screen reader, on touch screens and without JavaScript.
Collections, filters and search
- Filters come from the Search & Discovery app (Online Store > Navigation > Collection and search filters). Filtering and sorting update the grid without reloading the page; without JavaScript the form submits normally.
- Product cards show the sizes in stock from any option named Size (also Beden, Größe, Taille, Taglia, Maat, Tamanho, Talla).
- Predictive search shows products, collections, pages and articles while typing. Turn it off in Theme settings > Search.
Cart
- Drawer (default) or page: Theme settings > Cart.
- Free shipping progress appears when a threshold is set, in your store's currency. Customers shopping in another currency (Shopify Markets) do not see the bar, so it never shows a wrong amount.
- The order note can be turned off.
- Accelerated checkout buttons appear in the cart and on product pages.
Accessibility and motion
- Text and controls meet WCAG 2.2 AA contrast with the default colors. Every control is reachable by keyboard and has a visible focus outline.
- Lookbook: on screens 768px and wider, the photo row is pinned and moves sideways as the visitor scrolls down. It moves exactly as far as the page scrolls and never on its own. On phones, for visitors who turn motion off (reduced motion setting) and without JavaScript, it is a row they swipe. When a keyboard user tabs to a caption link, the page scrolls so that photo is in view.
- Heading focus: section headings come into focus as they scroll in, ending when the heading is fully visible. Desktop only, never on the first screen, off for reduced motion. Turn it off in Theme settings > Layout.
- Marquee: decorative and hidden from screen readers; pauses on hover; static for reduced motion.
FAQ
Can I use the theme without metafields? Yes. Cards fall back to the product type, spec rows without a value are hidden and the size chart section renders nothing.
My sizes are not shown on cards. The option must be named Size (or one of the translations above).
Can I show a size chart for every product in a collection? Fill the same JSON into each product. Bulk editing in Shopify admin can copy it to many products at once.
Which font is Onest? A clean sans-serif bundled with the theme under the SIL Open Font License. Choose Body font source > Shopify font library to use any library font instead.
Support
Write to us through the support form. We reply within two business days, Monday to Friday. Include your store address and the theme version (Theme settings > Theme information).
Support covers theme setup, settings and bugs in the theme code. It does not cover custom code changes, third-party apps or design work.