Customising · Sections

Sections

Add sections in the theme editor with Add section. Most sections are built out of blocks, so the content inside them is yours to arrange.

Building the home page

The home page Craftly installs with is four sections, in this order:

1. Shade card — your whole range as one field of color, edge to edge.
2. Statement — the line that says what the field is, with a campaign beside it.
3. Spec — the facts a shopper would otherwise have to email you for.
4. Featured collection — a grid of products.

That order is an argument, not a habit. The color goes first because in a shop where color is how people choose, the range is the sales pitch, and a grid of cards with a headline over it says less than the colors themselves. The shade card carries no heading of its own for exactly that reason — the statement underneath is the heading, and it arrives after the eye has already been caught.

None of it is a rule. Delete what you do not need and drag the rest into the order that suits your shop. If your range is not color-led — kits, tools, patterns — set the shade card's Cell fill to Product image and it becomes a tight photographic grid, or drop it for a Featured collection and lead with the Statement.

If most of your visitors do not yet know what they want, move the Product finder up near the top. If they arrive knowing, lead with products.

Sections in Craftly

The range

Products and collections

Pictures and words

Everything else

The header, footer, cart, quick view and predictive search are not in this list because you do not add them — they are part of the shop and are edited where they appear.

The band

Before the sections, the object they are all made of.

A band is a strip of paper ruled with a hairline top and bottom, carrying data in fixed slots: a name, a dimmed qualifier beside it, then up to three facts pushed to the right. It is the ball band off a skein of yarn, the label on a paint chip, the selvedge on a bolt of cloth — the way the trade has always written the facts down.

The same object does all of these jobs:

• the label under a cell of the shade card
• the label under a product card, when Card style is Band
• the Data band section
• the strip across a Plate
• the masthead in the footer

Keeping the slots fixed is the whole point: bands align down a grid, so a page of them reads as one table rather than as a dozen unrelated captions. If you are wondering why a caption in Craftly cannot be centered or given its own font, that is why.

The shade card

Your range as one field, edge to edge, every cell banded with its own facts. It is the theme's opening statement and the reason most of the rest of the theme looks the way it does.

Where the cells come from. Choose a Collection and the section fills itself, up to Products to show. Or add Cell blocks and pick products one at a time, up to twenty-four. Use the collection for a real range and the blocks for a curated wall.

Cell fill decides what each cell is made of.

Color swatch paints the product's first native color swatch as a flat chip. That is what a shade card really is, and it is what a color-led catalog wants. It needs swatches set up on your product options in your Shopify admin — see Product page for how. A product with no swatch quietly falls back to its photograph, so a mixed catalog never shows a hole.

Product image uses the featured image instead, which suits kits, tools and finished work.

What the bands say. Each cell carries two bands and swaps between them when a shopper points at it. The face says the product's name and, if Show price is on, its price. The back says how many shades the product comes in — or its product type, when there is only one — and whether it is in stock. That is the information a shopper standing at a shelf would get by picking the thing up.

Columns run from three to eight on desktop and one, two or three on a phone. Six is the default and is what makes the grid read as a field rather than as a row of cards; below four it stops being a shade card and starts being a collection page.

Arrows through product photos adds a carousel inside each cell on hover, so a product with several photographs can show them without leaving the grid.

The statement

The counterweight to the shade card: the field says it in color, the statement says it in words.

Kicker, Heading and an optional button. Keep the heading short — it is set large and tight, and it is the only thing on the page competing with a wall of color.

The campaign is the drawing beside it: an image, a label, an optional stamp and a link. It is drawn rather than framed — a winding line runs behind it — so it reads as something made rather than as an ad slotted into a box. Turn it off with Show campaign and the heading takes the whole width.

On a phone the campaign comes first and the heading follows it. That is deliberate: stacked, a picture is what stops a thumb, and a heading that has already been read is a heading nobody scrolls past.

The spec

The ball band unrolled. A heading, then Spec row blocks: a term on the left, its value on the right, with an optional link on the value.

The term column is a fixed width, so a column of rows lines up and reads as a specification rather than as a list. Fiber, weight, length, gauge, needle size, care, dye lot — whatever the trade writes down for the thing you sell.

Putting it on a product page. The spec section ships on the product template, which means by default every product shows the same rows. To vary it product by product, connect each Value to a metafield: in the theme editor, click the dynamic-source icon beside the field and pick the metafield holding that fact. Set the metafields up once in Settings → Custom data → Products and every product fills its own spec in.

The index

Short entries — a Term and a Detail — set the way an index is set. It is for the handful of things a shopper has to know before they can buy confidently: which weight, how much to buy, what a gauge is. Three or four entries. It is a reference, not an article; anything longer belongs in a blog post or a collapsible row.

The data band and the plate

Two ways to state a fact without building a section around it.

Data band is one band across the page: a Name, a dimmed Qualifier beside it, and up to three Facts pushed right. Dye lot, stock status, a delivery promise, a date. On a tinted color scheme it reads as a rule drawn across the page.

Plate is a photograph at full width with the same band laid over it, in three heights. Use it where a picture has to carry a caption that is data rather than prose.

The announcement bar

It lives in the header group, so it appears on every page rather than on one.

Motion has two settings. Scrolling is the default: the lines run continuously, which suits two or three short messages and gives the top of the page some movement before anything else has loaded. It pauses when a visitor hovers or tabs into it, and it does not move at all for anyone whose device asks for reduced motion — so write the messages to be readable stopped.

Still is a centered row. Choose it when you have one message and want it read rather than watched.

Loop duration sets how long one pass takes. Longer is slower.

Three blocks is the cap. A fourth is one nobody reads.

Collection tabs

Several collections under one heading, with one panel visible at a time.

The tabs are links to the collections they name, so with JavaScript off a visitor still gets a row of working links and every product on the page rather than a control that does nothing.

A tab whose collection has no products is not rendered at all, so you cannot publish a tab that leads nowhere. One surviving tab stops being a tab and becomes a plain link.

The mega menu

Dropdown style is set to Mega panel by default, so any menu item with enough child links opens a full-width panel instead of a small dropdown: "Shop all", a grid of the child links with product counts, and an optional promotional card.

Links before a mega panel is the threshold. A shop usually has one large menu item and several small ones, and forcing the wide panel onto a three-link "About" is worse than a dropdown.

Counts appear only where a link actually points at a collection. A menu item can point anywhere, and a zero beside a page is worse than nothing.

The promotional card is one image, one line above and one heading, set in Header settings. It is hidden below 1100px, where there is no room for it.

The product finder

Two questions, one link. Nothing is stored, nothing is fetched and no search index is involved — the answers build a real collection URL, so the result is a page a shopper can bookmark, share or reload.

Where the answers come from matters more than it looks, and two of the sources need no setup while the rest do.

Collection is the default. Each answer names a collection by handle and opens it. It works the day you add it, on any store.

Price uses Shopify's own price facet. Write each answer as a range — Under 20 | :20, 20 to 40 | 20:40, Over 40 | 40: — leaving a side blank for no limit. Also works with no setup.

Product type, Vendor, Tag, Variant option and Metafield build storefront filter parameters, and those only answer once the matching filter has been configured in Shopify Search & Discovery. This is the part worth knowing: an unconfigured filter parameter is accepted and ignored, not rejected. The page returns 200 and hands back the whole catalog. Nothing looks broken, so if a question of this kind seems to do nothing, check the filter is set up before checking anything else.

An answer whose collection does not exist is left out rather than rendered as a control that leads nowhere.

How a section fills the page

A section spans the whole window and paints its color scheme edge to edge. The words inside sit in a column of the page width, centered, with the page margin as a floor on a narrow screen.

That is the difference between a band and a card. When the background was painted on the same box as the words, a section on a tinted scheme came out as a page-width rectangle floating in the middle of the window with the paper showing either side of it, and two tinted sections in a row read as two cards rather than as two bands.

Sections that ask to be full width — a slideshow, an image banner, an announcement bar, a plate — mean the content too, and keep their own edge-to-edge layout.

Product cards

Card style decides what the card is. Band is the default and is the same object described at the top of this page: a ruled strip under the photograph carrying the product's name and its price in fixed slots, so a grid of cards lines up across every row. Plain, Bordered and Raised are the conventional alternatives, and all three are still there if a band is not the look you want.

The card also carries three things over the photograph, and all three appear on hover and none of them on a phone.

Quick view and quick add sit side by side along the bottom edge. Stacked one above the other they covered a third of the picture and read as a form attached to the product; in a row they read as a caption bar. The second button is filled rather than outlined, because it is the one a shopper came to press.

Arrows and dots appear when a product has more than one photograph. The dots sit at the top of the frame rather than the bottom, out of the way of the two buttons that slide up over the same corner.

On a phone none of it appears. The whole card is already one tap target to the product page, the photograph is the reason anyone stopped scrolling, and a button under a thumb by accident is worse than no button. This is a width test as well as a hover test, so a touchscreen laptop still gets the desktop layout.

Everything else about the card — image ratio, swatches, the line above the title, the rating — is set once in Theme settings → Product cards and applies to every grid in the shop.

The header on a phone

The bar is one row: menu, shop name, then the icons. The side columns take what their contents need and the name gets what is left, rather than the two sides splitting the row evenly — on a 375px screen an even split gave three icons an 81px column to fit 144px into, and the row of them reached back across the name until the magnifier sat on top of a letter. Content-sized columns cannot overlap. A name too long for the space it has left shrinks, and past that truncates, which is the failure worth having.

The wordmark scales with the viewport on small screens and holds a fixed size from 750px up.

Search

Show search puts the magnifier in the header, and it opens a sheet across the page rather than a small dropdown under the field: the field at the top, suggestions under it as a shopper types, and — if you set one — a Browse menu of links for anyone who opened it without a word in mind.

Suggestions are Shopify's own predictive search and can be turned off under Theme settings → Search. With them off the field still works; it submits to the search page.

Text over a photograph

A slide and an image banner both darken their picture so the words on top of it stay readable. Overlay opacity sets how much, on both. A slide has a second setting, Overlay style, which decides how the veil is shaped.

Toward the text is the default. The veil is at full strength across the column the text sits in and has faded to nothing by the far edge, so the side of the photograph nobody is reading over keeps its own light. It follows the content position — text on the left darkens the left — and a centered heading has no side to favor, so it quietly falls back to the flat veil.

Across the whole image is one even veil edge to edge. It is what the image banner uses, which is why a banner usually wants a lower opacity than a slide carrying the same photograph.

The difference matters most on a pale photograph. A flat veil has to be dark enough for the palest pixel anywhere in the frame, which on a linen-and-daylight shot means dimming the entire picture to make four words legible. Angling it buys the same contrast and costs a third of the frame instead of all of it.

The scrim holds full strength across the whole text column before it starts to fall away — measured, not guessed. When the heading was moved to line up with the sections under it, the last third of it slid past the strong part of the gradient and dropped to 3.4:1 against white; the stop had to move with it.

Whichever you pick, check the result rather than trusting the number. Around 30% is enough over a dark photograph and nowhere near enough over a bright one — a sunlit bench or a cream linen cloth needs something closer to 55% before four words of white become legible.

Video

If you choose a YouTube or Vimeo link, Craftly shows your cover image and only loads the player when a shopper presses play. A video player is one of the heaviest things a page can load, and most shoppers never press play.

Testimonials

Rating summary is the line of stars, an average and a count under the heading. You type the numbers. A theme cannot total a shop's reviews — those live in a review app — and a number the theme invented would be worse than no number, so leave the fields empty and the row does not appear.

Carousel layout adds arrows on wide screens; they appear only when the row is actually wider than its container.

The rating stars in a testimonial block are a number you type. They are for quotes you have permission to publish, not for review data.

Real review data belongs to a review app. Craftly reads Shopify's standard rating metafield, so any review app that writes to it will show ratings on product cards and product pages with no setup from you.

Blocks you can place anywhere

These drop into any section that takes theme blocks — Section, Image banner, Product finder, Testimonials, the footer — and into groups and columns inside them.

Grouped in a row, the tag and the seal build the kind of arithmetic a promotion wants — tag, plus, tag, equals, seal.

Brand information and Social media stop rendering when nothing is filled in. Both read from Theme settings, and an empty column with a heading over it is worse than no column.

Curved edges

Slideshow and Image banner can end on a curve rather than a straight line. The arc is filled with the section's own background color, so it reads as the section below sweeping up into it — which means it looks right when the next section shares that background and wrong when it does not.