Storeino

Appearance

On this page

Existing-sections cheatsheet ​

There are 50+ sections in components/sections/. Many follow patterns you'll want to reuse. This page maps "I'm building X" → "read Y first."

By problem type ​

"I'm building a simple text block" ​

  • Heading — single <h1>–<h6>. Smallest real section in the codebase. Read this first if you're new.
  • Paragraph — rich text body. Shows the richtext field pattern + Tailwind Typography (.prose).
  • Divider — visual rule. Almost-empty manifest. Useful when you need to see the minimum viable section.

"I'm building an image + text block" ​

  • Banner — five layout variants (image-left, image-right, image-bg, image-top, image-only), CTAs, mobile fallback image. The Swiss-army-knife reference for image+text sections.
  • Hero — full-bleed splash. Similar to Banner but with fewer knobs.
  • Image — pure image, click-through. The minimum for a clickable image.

"I'm building a list of cards" ​

  • CategoryList — descendant-selector pattern (useStyles('card', acc, [], '.section-card')) applied to a fixed-template list. Read this for the styling pattern.
  • CollectionsGrid — data-driven cards. Fetches collections, renders grid.
  • LogoList — merchant-managed list (no API). Shows the list field manifest pattern.

"I'm building a product grid" ​

  • ProductGrid — definitive reference. Manual picker, auto-source dropdown, sort, pagination, descendant styling for ProductCard internals.
  • ProductRecentlyViewed — reads from mainStore.recentlyViewed. Shows reading Pinia state for personalization.
  • ProductRelated — fetches by collections-in based on the current product. Page-context-aware sections.

"I'm building a single product detail" ​

  • ProductDetail — maxPerTemplate: 1 example. Reads page params, fetches product, renders gallery + variants + add-to-cart.
  • CartItems — line list with quantity stepper, remove links.
  • CartSummary — totals box. Reads mainStore.cart reactively.
  • CartPromoCode / CartShippingEstimate / CartFreeShippingBar — single-purpose cart widgets. Good if you want to add a "Gift wrap" or "Subscribe and save" widget — pattern transfers.
  • CartOrderNotes — text input that submits with the order. Shows the textarea field + char-count.
  • BlogList — paginated post grid with sort. The full blog template anchor.
  • BlogHero — featured-post hero with three layouts (split, overlay, stacked). Multi-layout pattern.
  • BlogSidebar — categories + tags + featured-products combo. Mobile collapses to a drawer.
  • PostHeader / PostBody / PostReadingProgress / PostShare / PostRelated — split-up post-detail building blocks. Each does one job.
  • CollectionHeader — breadcrumb + title + hero image + description. Three layout variants. Good descendant-styling reference.
  • CollectionChildren — subcollection cards. Reads page param for the parent collection slug.
  • CollectionDescriptionFooter — long-form description below the grid (SEO). Rich text pattern.

"I'm building checkout / thanks / account chrome" ​

  • ThanksHeader — post-purchase confirmation. Three background variants.
  • AccountHeader — route-aware heading ("Your orders" / "Your profile" depending on the URL). Shows reading the active route inside a section.
  • AccountFrame — embeds the shared accounts SPA via an iframe. Sized + styled chrome around it. Read if you ever wrap third-party content.

"I'm building a CMS-page section" ​

  • PageHeader — title + breadcrumb + optional hero.
  • PageBody — long-form rich text. The straight richtext rendering reference.
  • PageContactForm — form with validation, success/error states. Reference for any form section.
  • PageFAQ — accordion. Reference for collapsible content patterns.
  • PageEmbed — iframe wrapper with sandbox/security considerations.

"I'm building marketing fluff (newsletter, modal, promo)" ​

  • Newsletter — email capture with success + error states. The form pattern.
  • PromoStrip (if you followed Hello World) — minimal announcement bar.
  • Header — global slot. Reads mainStore for cart count, wishlist count, currency, language.
  • Footer — global slot. Multi-column links, payment icons.
  • Both follow the section pattern but are stored under config.global.* not config.templates.*. See Anatomy for the special-case note.

"I'm building a wishlist section" ​

  • WishlistGrid — reads mainStore.wishlist, fetches the product details, renders with remove-from-wishlist actions. The shopper-state-driven section reference.

"I'm building a filter or search UI" ​

  • FilterSidebar — facet checkboxes on shop/collection pages. Reads/writes query params via useRoute / navigateTo. Read for URL-state patterns.
  • ProductListing — the actual product grid that responds to the FilterSidebar's filters. The Sidebar + Listing pair work together.
  • CatalogHeader — title + result count above a filtered grid.

"I'm building an error state" ​

  • ErrorHero — the big 404 visual.
  • ErrorActions — the "Go home / Search / Contact us" buttons below it. Two separate sections so merchants can keep one and swap the other.

By technique ​

Translatable text everywhere ​

Open any section — they all use useT(). Heading is the cleanest minimal example.

Inline editable text ​

useEditable examples — Heading, Banner, Newsletter. Look for *Edit = useEditable('field') then v-bind="*Edit.editableProps()".

Descendant-selector styling ​

useStyles(key, acc, [], '.css-class') examples — ProductGrid (styles ProductCard internals), CollectionChildren, BlogList.

Mobile-specific behavior ​

Look for imageMobile fields and <picture><source media="(max-width: 767px)"> — Banner, Hero.

Multiple layout variants in one section ​

Banner (five layouts), BlogHero (three), CollectionHeader (three). All driven by a layout select field + a computed class binding.

Reading the current page context ​

ProductDetail, CollectionHeader, AccountHeader — they read useRoute() params to know which product/collection/account-tab is active.

Form with success/error states ​

Newsletter (email capture), PageContactForm (multi-field with validation), CartPromoCode (promo code entry with redemption feedback).

Embedding third-party content ​

AccountFrame — wraps an iframe with sized chrome and a fallback message.

Single-instance enforcement ​

maxPerTemplate: 1 — CartItems, CartSummary, ProductDetail, BlogHero, AccountHeader.

When in doubt ​

Find a section close to what you're building. Read its index.vue end-to-end. Copy the patterns; don't reinvent them. Most "how do I do X" questions are already answered in some existing section's file.

If nothing matches, open the Banner section — it covers more patterns than any other (layouts, mobile, links, CTAs, styleKeys, useEditable) and reading it once teaches you most of the surface area.

Released under the MIT License.

Copyright © 2023-present Storeino