Content sections
How to use Image with text, Schematic, Rich text, FAQ, Icon row, Logo list, Blog posts, Newsletter and Custom Liquid to add stories, numbered callouts on a product image, announcements, questions and answers, service terms, press logos, articles, sign-ups and embeds to any page.
These sections carry your own words and images rather than store data. They can go on any template.
| Section | Use it for | Also allowed in the footer |
|---|---|---|
| Image with text | A photo in a labeled panel beside a heading, text and button | No |
| Schematic | An image with numbered hotspots that open a part's name, a spec and a linked product | No |
| Rich text | A heading and text, built from blocks | Yes |
| FAQ | Questions that open to show their answers | No |
| Icon row | Service terms with icons, such as shipping, returns and warranty | Yes |
| Logo list | Press, retailer and partner logos, with optional quotes | Yes |
| Blog posts | Recent or chosen articles as cards | No |
| Newsletter | An email sign-up in a panel | Yes |
| Custom Liquid | App code, embeds and your own Liquid | Yes |
Image with text
A framed image and a block of copy, side by side. The image sits in a panel with a label and status in its header strip, like the rest of Techno. A newly added Image with text section starts with the panel label "Bench notes".
| Setting | Notes |
|---|---|
| "Image" | Shown at a 4:3 ratio and cropped to fill. Put the subject near the center. Without an image, a placeholder illustration appears. |
| "Media position" | "Left" or "Right" on wide screens. |
| "Panel label" | Text in the image panel's header strip. |
| "Panel status" | Optional second line in the header strip, in the accent color, such as "Rev. B" or "In stock". |
| "Eyebrow" | Small line above the heading. Leave it empty to hide it. |
| "Heading" | Leave it empty to hide it. |
| "Body" | Rich text. Leave it empty to hide it. |
| "Button label" | Leave it empty to hide the button. |
| "Link" | Appears once the button has a label. If you leave it empty, the button goes to your home page. |
When the two columns stack on narrow screens, the image comes first with "Left" and the copy comes first with "Right".
Images with text, logos or buttons baked in don't resize well and can't be read by screen readers. Put words in the Heading and Body instead.
Schematic
One image in a labeled panel, with numbered hotspots on the parts it shows: a teardown or exploded view of a product, or a photo of a desk whose products shoppers can open. On a computer each hotspot is a button, numbered 01, 02 and so on, that opens a small panel with the part's name, a short spec, and for a linked product its live price, stock and a "View product" link. A newly added Schematic starts with the heading "Take a closer look" and three hotspots named "First part", "Second part" and "Third part" on a placeholder drawing.
| Setting | Notes |
|---|---|
| "Image" | Shown whole, at its own shape, never cropped, so each hotspot stays on the part it marks at every screen size. It's at most 80% of the screen's height, centered in the panel. Without an image, a placeholder drawing appears. |
| "Heading" | Above the panel. Leave it empty to hide it. |
| "Panel label" | Text in the panel's header strip. Default "Exploded view". The strip also counts the hotspots, such as "3 callouts". |
Hotspot blocks, up to 20. They're numbered in their order in the sidebar.
| Setting | Notes |
|---|---|
| "Label" | The part's name. The sidebar lists hotspots by it. Leave it empty to use the linked product's title. A hotspot with neither a label nor a product isn't shown, and the others keep numbers without gaps. |
| "Horizontal position" | 0 to 100%, from the image's left edge. It's the left edge in right-to-left languages too: the image isn't mirrored, so the hotspots aren't either. |
| "Vertical position" | 0 to 100%, from the image's top edge. |
| "Product" | Optional. Shows the product's price, with a sale's compare-at price, and its stock, both live, and links to it. There's no add to cart: shoppers buy on the product page. If the product is deleted or unpublished, only the label shows. |
| "Detail" | Optional. A short spec or description, such as "40 mm drivers". To show a value from the chosen product, connect a metafield of that product with the dynamic source button: for example, the product's specs.max_output shows "65 W". |
Placing hotspots. Select a hotspot in the theme editor to open its panel in the preview, then move it with the two sliders; the marker follows as you drag. Keep neighboring hotspots at least 12% apart side by side, and further apart one above the other on a wide image: about 18% on a 3:2 image, since "Vertical position" measures the shorter side. On a phone the image is only 280 to 340px wide and each number is 34px across, so hotspots closer than that overlap there. The list under the image still names every callout, so they only look crowded. On larger screens each marker is a 44px button, the size of a fingertip, and the same spacing keeps those apart too. A hotspot at 0% or 100% stays whole, just inside the image's edge.
Keyboard and screen readers. Shoppers tab from hotspot to hotspot in their numbered order and open one with Enter or Space. The next Tab moves into its panel, to "View product". Escape or a click elsewhere closes it, and opening another closes the first. Screen readers hear "01 USB-C port, button, collapsed".
On phones (600px wide and narrower), a panel over a small photo would cover what it describes. So the numbers stay on the image as markers you can't tap, and the same callouts are listed, numbered, under the image. Browsers without pop-up panels show that list at every width. The section needs no JavaScript.
Rich text
A column of text built from blocks, in any order.
| Block | Settings | Notes |
|---|---|---|
| Eyebrow | "Text" | Small monospace line. Leave "Text" empty to hide it. |
| Heading | "Text" | A section heading. Leave "Text" empty to hide it. |
| Text | "Text" | Rich text: paragraphs, bold, italic, links and lists. Leave "Text" empty to hide it. |
| Button | "Button label", "Link" | A primary button. With no link, it goes to the home page. Leave "Button label" empty to hide it. |
| Collapsible row | "Heading", "Content", "Open by default" | A heading that expands to show more content. See Product page › Collapsible row. For a list of questions, use an FAQ section. |
| Custom Liquid | "Liquid" | Your own Liquid code. |
New Rich text sections start with an Eyebrow ("System note"), a Heading and a Text block. Add as many blocks as you need. Rich text accepts any theme block, so you can also use Generate in Add block to create one. See AI-generated blocks.
In the theme editor, a block left empty shows a short "Not shown to shoppers" note in its place, so you can still find and select it.
FAQ
A list of questions, each opening to its answer, under an optional eyebrow, heading and intro. Use one FAQ section per topic. A newly added FAQ section starts with the eyebrow "Knowledge base", the heading "Answers before you ask." and three example questions about warranty, dispatch and returns. The first starts open. Their answers tell you what to write, so replace them with your own terms.
| Setting | Notes |
|---|---|
| "Eyebrow" | Small line above the heading. Leave it empty to hide it. |
| "Heading" | Leave it empty to hide it. |
| "Body" | Rich text under the heading, such as a line pointing to your contact page. Leave it empty to hide it. |
Each question is a Collapsible row block, the only block this section takes:
| Block setting | Notes |
|---|---|
| "Heading" | The question. A question with no heading isn't shown to shoppers. |
| "Content" | The answer, in rich text: paragraphs, bold, italic, links and lists. A question with an empty answer opens to nothing. |
| "Open by default" | The question starts open. Shoppers can still close it. Turn it on for as many questions as you like. |
Shoppers open and close a question with a click, a tap, Enter or Space. This works without JavaScript, and screen readers announce each question as collapsed or expanded. The answers of closed questions are still in the page, so search engines can read them.
Shoppers don't see the section until at least one question has a heading. In the theme editor it keeps its heading, and shows an "Empty section" note until you add a question.
Answers from product metafields. On a product template, connect a question's "Content" to a product metafield as a dynamic source. Each product then shows its own answer. A product whose metafield is empty shows the question with an empty answer, so use metafields that every product using the template fills in.
No FAQ structured data. Techno doesn't add FAQPage structured data. Google no longer shows FAQ rich results in its search results, and the answers are already in the page for search engines and answer engines to read.
Icon row
A row of up to six tiles, each with an icon, a title, a short line of text and an optional link. Use it for your service terms, such as shipping, returns, warranty and support, or for product highlights such as battery life. A newly added Icon row starts with four tiles: Shipping, Returns, Warranty and Support. Their lines name the topic, such as "Dispatch times and costs", rather than promising anything. Replace them with your own terms.
Every word in the row comes from your settings. Techno adds no badges, seals or ratings of its own. Only state terms your store actually offers.
| Setting | Notes |
|---|---|
| "Heading" | Optional heading above the row. Leave it empty to hide it. |
| "Columns on mobile" | "2 columns" (the default) or "1 column" on screens narrower than 750 px. Wider screens fit as many tiles in a row as there is room for. |
Each tile is an Item block:
| Block setting | Notes |
|---|---|
| "Icon" | One of the theme's icons, drawn in your palette's line color: None, Truck, Return, Shield, Headset, Chat, Clock, Store, Lock, Card, Wrench, Globe, Check mark, Battery, Lightning bolt, Chip and Signal. Choose "None" for a tile without an icon. |
| "Heading" | The tile's title, such as "Shipping". |
| "Text" | A short line under the title, such as "Ships in 2 working days". |
| "Link" | Appears once the tile has a heading. The heading becomes a link, for example to your shipping policy or a page. |
A tile with neither a heading nor text isn't shown to shoppers, and a row with no such tiles isn't shown at all. In the theme editor, an empty tile shows "Not shown to shoppers until a heading is added." so you can still select it.
The Truck and Return icons point the other way in right-to-left languages.
Logo list
A row of up to 12 logos in tiles, for press coverage ("As seen in"), stockists or partners. Each logo can link somewhere and carry a short quote. A newly added Logo list has the heading "As seen in" and five empty logos. Shoppers see nothing until at least one logo has an image and a company name.
Only show outlets that covered you and brands you have permission to show. Quote them word for word.
| Setting | Notes |
|---|---|
| "Heading" | Leave it empty to hide it. |
| "Logo colors" | "Original" shows each logo as uploaded. "Monochrome" turns each logo into one flat grey that suits the palette: light on the Techno and Dreamy palettes, dark on Blueprint and Monolith. Monochrome needs logos with transparent backgrounds. A logo with a solid background, such as a JPG, becomes a solid grey block. |
| "Logo height" | 24 to 96 px, default 40. Every logo is drawn at this height, keeping its shape. A very wide logo is narrowed to fit its tile. |
| "Layout on mobile" | On screens narrower than 750 px, "Wrap" (the default) shows two logos per row, and "Scroll" shows one row that shoppers swipe. Wider screens always show a grid. |
Each logo is a Logo block:
| Block setting | Notes |
|---|---|
| "Image" | The logo. Use a PNG or SVG with a transparent background. |
| "Company name" | Required. Screen readers read it as the logo. If it's empty, the image's alt text from Content › Files is used. A logo with no name and no alt text isn't shown to shoppers. |
| "Link" | Optional. The logo links there, for example to the review. |
| "Quote" | Optional. Shown under the logo in quotation marks, as a quote from that company. |
In the theme editor, a logo that isn't shown to shoppers keeps its tile with "Not shown to shoppers until a logo image is added." or "…until a company name is added." so you can still find it.
With "Original" colors, the Techno and Dreamy palettes have dark backgrounds, so use light or white logos there, and dark logos on Blueprint and Monolith.
Nothing in the row moves by itself. With "Scroll", keyboard users can tab to each linked logo, or focus the row and scroll it with the arrow keys when the logos have no links.
Blog posts
A row of article cards, the same card as the Blog page's featured entry: the date, the image, the title, an excerpt, the first tag and author, and a "Read entry" link. A newly added Blog posts section has the heading "Latest entries" and shows nothing to shoppers until you choose a blog or articles.
| Setting | Notes |
|---|---|
| "Heading" | Leave it empty to hide it. |
| "Blog" | Shows that blog's newest articles, newest first, and adds a "Full archive" link to the blog. |
| "Articles to show" | 2 to 12, default 3. How many of the blog's newest articles to show, or fewer if the blog has fewer. Hidden while you've picked articles. |
| "Articles" | Pick up to 12 articles from any blog. They appear in the order you pick them, instead of the blog's newest. If you also choose a blog, its "Full archive" link still shows. |
On an article page the section never shows the article being read, and still fills "Articles to show" when the blog has enough other articles. Use it under the Article section for "More entries".
Cards share the row, up to four across on wide screens. One or two cards are at most 460 px wide and sit at the start of the row, so a single article isn't stretched across the page. An article without an image shows a sample drawing where the image goes, so its title lines up with the cards beside it. An article that's unpublished or deleted drops out of the section.
In the theme editor, until you choose a blog or articles, the section shows "No articles selected" with example cards, and a chosen blog with no articles shows a note. Shoppers see nothing in either case.
Newsletter
A panel with a heading, text and an email field. The panel's header strip shows your label and "Unsubscribe anytime". A newly added Newsletter section starts with the heading "Restock notices".
| Setting | Notes |
|---|---|
| "Panel label" | Default "Subscribe". |
| "Heading" | Leave it empty to hide it. |
| "Body" | Rich text. Tell subscribers what they'll get and how often. |
Sign-ups are saved as customers in Shopify admin with email marketing consent and the tag newsletter. Find them under Customers, filtered by that tag. Send campaigns with Shopify Email or any email app that reads Shopify customers.
After a successful sign-up the form is replaced with "Subscribed. One message per restock." Errors, such as an invalid email, appear under the field.
The footer has its own Newsletter block with a "Show Follow on Shop" option. See Footer.
Custom Liquid
A blank section for code: an app's embed snippet, a video iframe, a size chart table, or Liquid that reads your store data.
| Setting | Notes |
|---|---|
| "Liquid" | Add app snippets or other Liquid code. |
An empty Custom Liquid section shows nothing on the live store.
Custom Liquid runs your code exactly as written. A mistake can break the layout of the page it's on. See Custom code before you use it.
Recipes
Brand story on the About page
- Pages template › Add section: Image with text › "Panel label": "Bench notes", "Heading": your story headline
- Add section: Rich text › Eyebrow "Since 2019", Heading, Text
FAQ page
- Page picker › Pages › Create template: "faq"
- Keep the Page section for the page title and your intro, written in the page's content in Shopify admin
- Add section: FAQ, one per topic, such as "Orders", "Shipping" and "Warranty"
- In Shopify admin › Online Store › Pages, open your FAQ page and choose "faq" under Theme template
Questions under a product
- Product template › Add section (below the Product section): FAQ
- For questions with the same answer on every product, type the answer in "Content"
- For answers that differ per product, such as compatibility, connect "Content" to a product metafield
Service strip above the footer
- Footer group › Add section: Icon row
- One Item per term you offer, such as "Shipping" with "Ships in 2 working days", linked to your shipping policy
- The strip then appears above the footer on every page
Press quotes on a product page
- Product template › Add section (below the Product section): Logo list › "Heading": "What reviewers said"
- One Logo per review: the outlet's logo, its name in "Company name", the review link in "Link", and a short line from the review in "Quote"
- "Logo colors": Monochrome, if the logos have transparent backgrounds
Setup guides on a product page
- Product template › Add section (below the Product section): Blog posts › "Heading": "Setup guides"
- "Articles": the guides that apply to products using this template
- For guides that differ per product, create a product template for each kind of product
Restock sign-up under a sold-out collection
- Collection template › Add section (below Collection): Newsletter
- Newsletter › "Heading": "Restock notices", "Body": "One email when this collection is back. Nothing else."
- This signs shoppers up for your newsletter. For a request about one sold-out variant, the product page has its own Back-in-stock request block, which emails you and subscribes nobody.
Exploded view on a product template
- Product template › Add section (below the Product section): Schematic › "Image": a teardown photo or diagram of the product, "Panel label": "Exploded view"
- One Hotspot per part, such as "USB-C port" or "Battery cell", with its spec in "Detail"
- The image is the same on every product that uses the template, so create a product template for each product or family that has its own exploded view
Shop the desk setup
- Home page or a page › Add section: Schematic › "Heading": "Shop the desk", "Panel label": "Desk setup", "Image": a photo of a desk
- One Hotspot per product in the photo, with "Product" chosen and "Label" left empty, so it shows the product's title
- Shoppers open each product's price and stock on the photo, and on phones in the list under it, and follow "View product" to buy
See also
- Custom code: what's safe to put in Custom Liquid
- Sections reference: every section setting