A lookbook section turns editorial imagery into shopping: a full-bleed photo or a scrolling gallery, with products pinned to the image or listed alongside it. Most themes can approximate one with existing sections, but a real lookbook needs hotspots and a gallery layout, which usually means writing a custom section. Here is the practical build path.
Before writing code, check the theme editor. Many themes include an image-with-text section, a collage or gallery section, and a featured-collection section, and a convincing lookbook can be assembled from those three: a wide editorial image, a row of the products shown in it, and a short brand statement. This costs nothing in performance and everything works in the theme editor out of the box.
The limitation is precision. Stock sections cannot pin a product to the exact spot on the model where she wears it, and they cannot build the scrolling editorial layouts that make lookbooks feel like lookbooks. If the requirement is shoppable hotspots on the image, you are writing a custom section.
The section needs a schema with a repeatable block: one block per look, each with an image picker, a heading, and a product list setting that accepts up to four or six products. In Liquid, render each look as a slide or a stacked panel: the image on one side, the pinned products as compact cards on the other.
For hotspots, the honest engineering is a relative-positioned image container with absolutely positioned buttons. Store hotspot positions as percentage ranges in the block settings so merchants can drag-approximate placement through number inputs. Clicking a hotspot opens the product in a quick-view or scrolls to its card. Keep the interaction in vanilla JavaScript: this is one toggle and one panel, not a framework.
Lookbook images are the largest images on the site, so the performance pattern is the whole game. Load only the first look eagerly; everything else gets native lazy loading. Use the image_url filter with explicit widths and a sizes attribute that matches the actual rendered slot, because a full-bleed lookbook image served at desktop width to a phone is the classic theme performance bug.
Keep the section self-contained: one stylesheet block, one script tag, no app embeds. A lookbook that needs three apps is a lookbook built wrong. And test the mobile layout first, not last. Most lookbook traffic is mobile, and hotspots that work with a mouse but not a thumb are a conversion bug disguised as a feature.
Write the custom section when the store publishes editorial content regularly: seasonal lookbooks, collection launches, stylist picks. The section pays for itself in the first season. Skip it when the merchant will upload one lookbook and never touch it again; a one-off page built from stock sections costs nothing to maintain and does the same job.
Also skip hotspots when the catalog is small. Under twenty products, a simple gallery with product cards underneath converts as well as pinned hotspots, with a fraction of the build cost. Complexity should match the catalog, not the ambition.
A lookbook section is a gallery plus shoppable products, and the build should stay that simple: stock sections if the need is occasional, a custom section with hotspot blocks if it is recurring, and strict image discipline either way. The section that wins is the one the merchant actually updates, because a stale lookbook is worse than no lookbook at all.
A line item property is extra information attached to a single item in the cart, like an engraving name or a gift message. It travels with that item into the order, unlike a cart note, which applies to the whole order.
Simple, low price, clearly related add ons work in the cart, where the buying decision is already made. Considered purchases belong on the product page, where there is room to explain them.