Blocks
Blocks are the pieces inside a section. Click Add block inside a section to see the blocks it accepts. Sections that take general content (Hero, Fabric strip, Featured collection, Image with text, Rich text, Showroom, Video, Newsletter, Contact form and Product) accept the content blocks below, Custom Liquid and app blocks. Blocks that only make sense in one section, such as Hotspot or Detail row, are described with their section on the sections page.
Content blocks #
Heading #
| Setting | What it does |
|---|---|
| Heading | Line breaks are kept. [fabric_count] shows the number of fabrics in your store, rounded down to ten. |
| Size | Display, Extra large, Large, Medium, Small or Extra small. |
| Heading level | H1, H2, H3 or Paragraph. For screen readers and search engines. Use one top-level heading per page. |
| Maximum width | 8 to 60 characters per line. |
Text #
| Setting | What it does |
|---|---|
| Text | Rich text. |
| Size | Small, Regular, Large or Lead (larger text in the heading font). |
| Use muted text color | Uses the scheme's Muted text color. |
| Maximum width | 20 to 90 characters per line. |
Button #
| Setting | What it does |
|---|---|
| Button label | The button text. |
| Link | Where it goes. |
| Style | Primary, Outline or Text link. |
Two buttons in a row sit side by side. In the Showroom and Contact sections, buttons after the locations start a new row.
A button without a link shows only in the theme editor, with a note. The live store leaves it out, so shoppers never see a button that goes nowhere.
Group #
Holds other blocks, so you can lay them out together. Add it as Column (blocks stacked) or Row (blocks side by side).
| Setting | What it does |
|---|---|
| Layout direction | Horizontal or Vertical. |
| Alignment | Left, Center or Right (vertical groups). |
| Padding | 0 to 200 px. |
Custom Liquid #
Adds your own Liquid, HTML or app code inside a section, for example under the buy buttons.
| Setting | What it does |
|---|---|
| Liquid code | Add app snippets or other code. The code has access to the page's Liquid objects. |
Custom code isn't covered by theme support.
Product blocks #
These go in the Product section's buy column, and in the Featured product section. The product templates already contain them.
Gallery #
The product media. It's fixed in the Product section, so you can't remove or move it. Settings: Image shape (Landscape (4:3), Wide (3:2), Square, Portrait (4:5), or Original (no cropping), which keeps every image whole using the shape of the first image), Show thumbnails on desktop, Thumbnail position (with Over the image, a product with more than 8 images shows arrows and a "1 / 12" counter instead of the thumbnails), Add the selected fabric's close-ups and Match product images to fabrics by alt-text tag. See photos per fabric.
Shoppers can click an image to open a full-screen view with zoom. On phones the gallery swipes and shows a counter. Videos you upload, YouTube and Vimeo videos, and 3D models in the product's media play inside the gallery.
Product title #
| Setting | What it does |
|---|---|
| Size | Large, Medium or Small. |
On the product page the title is the page's main heading. In the Featured product section it links to the product page.
Price #
| Setting | What it does |
|---|---|
| Show "From" price until a variant is chosen | Shows "From $2,490" when variant prices differ. |
| Show tax note | Shown when your prices include tax: "Taxes included." |
| Show Shop Pay Installments message | Shown when Shop Pay Installments is available for the price. |
Sale prices show the compare-at price struck through. Unit prices show when the variant has one.
Lead time #
Reads the lead time of the variant, the selected fabric, its grade or the product. Falls back to the default in Theme settings > Lead times. See lead times.
| Setting | What it does |
|---|---|
| Show estimated ship dates | Adds a date range counted from today. |
| Show the lead time note | Shows the lead time entry's Note. |
| Rule below | A hairline under the block. |
Variant picker #
Option buttons, native swatches, and the fabric picker for options named in Theme settings > Fabrics and samples (such as Fabric or Finish) when the product lists its fabric entries. See fabrics.
| Setting | What it does |
|---|---|
| Fabric picker > Swatches per row | 4 to 8. |
| Swatches per grade | 3 to 12. How many swatches each grade shows on the page. |
| Grades shown on the page | 1 to 4. The selected fabric's grade is always shown. |
| Samples > Show sample buttons | Needs a sample product in Theme settings > Fabrics and samples. |
| Button label | Default "Order a sample". |
Each option button shows the price difference against the selected variant, for example "+$400". Products with one variant show no picker.
Buy buttons #
Quantity, Add to cart and the dynamic checkout button. It also saves the lead time on the cart line, as set in Theme settings > Lead times. When the selected variant is sold out or unavailable, Add to cart is disabled and the dynamic checkout button is hidden. It comes back when the shopper picks an available variant.
| Setting | What it does |
|---|---|
| Show quantity selector | Plus and minus buttons with a number field. Quantity rules from B2B catalogs are respected. |
| Show recipient form for gift cards | Lets customers send a gift card to someone else with a message and a send date. Shows on gift card products only. |
| Show dynamic checkout buttons | Lets customers check out directly with a familiar payment method. |
Pickup availability #
Shows whether the selected variant can be picked up at the nearest pickup location and the usual pickup time. A link opens a side panel with every location that offers pickup, its stock, address and pickup time. The block has no settings. Set up local pickup in Settings > Shipping and delivery. When no location offers pickup for the variant, the block shows nothing.
Dimensions #
A one-line summary from the product's width, depth and height metafields. Settings: Heading, Units (As entered, or Metric and imperial) and Text when the product has no dimensions. See dimensions.
Description #
| Setting | What it does |
|---|---|
| Collapsible row | Shows the description in a row the shopper can open. Off shows it as plain text. |
| Heading | The row title. Default "Details". |
| Open by default | The row starts open. |
The default product template puts the description in the Product details section instead. The product.simple template uses this block.
Sticky add to cart #
A bar that appears once the main Add to cart button scrolls out of view. It shows the fabric swatch (or product image), the title, the selected options, the lead time, the price and an Add to cart button. Needs a Buy buttons block in the same section.
| Setting | What it does |
|---|---|
| Show on desktop | At the bottom of the screen on large screens. |
| Show on mobile | One row on phones: swatch, price and lead time, button. |
| Show selected options | For example "3-seater, 220 cm · Forest Velvet · Oak". |
| Show lead time | "Ships in 6–8 weeks". |
| Color scheme | The bar's colors. |
App blocks #
Apps that offer theme app blocks, such as product reviews, can be added to the Product section's buy column, the Product details section, the footer, and the content sections listed at the top of this page. Choose Add block and look under Apps.