The look of the storefront and how its pages are put together: theme colours and fonts, page templates, sections and blocks, and the editors that publish them.
62 parts and 26 phrases. Apps in this area include Shopify Online Store 2.0 themes, PageFly, GemPages, Shogun, Replo, EComposer.
storefront.pageShowHow a single page is made: its template, its content, its sections and the blocks inside them.storefront.page.templateShowThe fixed page types a store has, each with its own layout.How to extend
| Part | Litestore today | How to extend |
|---|---|---|
Core app/(web)/page.tsx | Slot · many | |
Product template storefront.page.template.productThe layout of a product page with gallery, buy box, details, reviews and related products. | Core app/(web)/product/[slug]/page.tsx | Slot · many |
Collection template storefront.page.template.collectionThe layout of a page that lists the products in one collection. | Core app/(web)/collections/[slug]/page.tsx | Slot · many |
Category template storefront.page.template.categoryThe layout of a page that lists the products in one category and its subcategories. | Core app/(web)/categories/[...slug]/page.tsx | Slot · many |
Custom page template storefront.page.template.custom_pageThe layout of a page such as About or a landing page, at its own address. | Core app/(web)/pages/[slug]/page.tsx | Slot · many |
Core app/(web)/blog | Slot · many | |
Cart template storefront.page.template.cartThe layout of the cart page with items, totals and the checkout steps. | Core app/(web)/cart/page.tsx | Slot · many |
Not-found template storefront.page.template.not_foundThe page shown for an address that does not exist. | Core app/(web)/not-found.tsx | Slot · many |
Alternate template storefront.page.template.alternateA second layout for the same page type that the owner assigns to chosen products or collections. | Plugin | Slot · many |
storefront.page.contentShowWhat fills a page: its written content and the products listed under it.How to extend
savePageupdateFeedgetStorefrontThe assistant reads the storefront, writes a page's content and changes its feed.| Part | Litestore today | How to extend |
|---|---|---|
Page HTML content storefront.page.content.htmlThe page's written content stored as HTML and shown in a text container. | Core modules/storefront/pages/page-view.tsx | Assistant tool |
HTML cleaning storefront.page.content.sanitizerRemoves scripts and unsafe attributes from page HTML before it is saved. | Core platform/sanitize-html.ts | Assistant tool |
Product feed storefront.page.content.feedA list of products under the page content, chosen by a strategy and an optional collection, with filters. | Core modules/storefront/feed | Assistant tool |
Page record storefront.page.content.page_recordA page's name, address, meta title, meta description and on/off switch. | Core modules/storefront/admin/pages/schema.ts | Assistant tool |
Section list storefront.page.content.sectionsAn ordered list of sections, each with its type and settings, that makes up the page from top to bottom and is checked against the closed list of section types on save. | Core modules/storefront/sections/catalog.ts | Assistant tool |
storefront.themeShowThe store-wide values every page reads for its colours, fonts, corners and spacing.How to extend
storefront themeOne theme's token set is active per store, and a plugin can add another token set to pick from.listStorefrontThemessetStorefrontThemeThe assistant lists the themes and switches the active one.| Part | Litestore today | How to extend |
|---|---|---|
Theme colours storefront.theme.coloursThe colour values for the primary button, background, text, cards, borders, muted text, success and danger. | Core platform/config/storefront-themes.ts | Provider · oneAssistant tool |
Heading font storefront.theme.heading_fontThe font family used for headings, either a system font or any Google Font. | Core platform/config/storefront-themes.ts | Provider · oneAssistant tool |
Body font storefront.theme.body_fontThe font family used for body text, either a system font or any Google Font. | Core platform/config/storefront-themes.ts | Provider · oneAssistant tool |
Corner radius storefront.theme.corner_radiusA base corner size from which buttons, cards and inputs scale their rounded corners. | Core platform/config/storefront-themes.ts | Provider · oneAssistant tool |
Core platform/config/storefront-themes.ts | Provider · oneAssistant tool | |
Spacing scale storefront.theme.spacingA multiplier applied to the space around pages, sections and cards. | Core platform/config/storefront-themes.ts | Provider · oneAssistant tool |
Theme preset storefront.theme.presetA named, ready-made set of all the theme values that the owner picks in one step. | Core platform/config/storefront-themes.ts | Provider · oneAssistant tool |
Theme picker setting storefront.theme.pickerThe store setting that stores which preset is active, with a default that uses the stylesheet as it is. | Core modules/settings/schema.ts | Provider · oneAssistant tool |
Logo and branding storefront.theme.brandingThe store's logo, name and icon shown in the header, emails and browser tab. | Core modules/storefront/admin/branding | Provider · oneAssistant tool |
Section colour scheme storefront.theme.colour_schemeA named group of colours that one section uses in place of the store-wide colours. | Plugin | Provider · oneAssistant tool |
Dark mode storefront.theme.dark_modeA second set of colours the storefront uses when the visitor's device is set to dark mode. | Plugin | Provider · oneAssistant tool |
storefront.sectionShowFull-width bands of a page, each of one closed type with its own settings, stacked top to bottom.How to extend
| Part | Litestore today | How to extend |
|---|---|---|
Announcement storefront.section.announcementA thin bar of short messages at the top of the page: one fixed, or several rotating. | Core modules/storefront/sections/announcement-section.tsx | Section · many |
Hero storefront.section.heroA large picture or video with a heading, text and buttons: banner, split, collage, slideshow or video. | Core modules/storefront/sections/hero-section.tsx | Section · many |
Marquee storefront.section.marqueeA strip of short texts scrolling across the page: tags, selling points or outlined words. | Core modules/storefront/sections/marquee-section.tsx | Section · many |
Categories storefront.section.categoriesLive categories linking to their pages, as circles, tiles or chips. | Core modules/storefront/sections/categories-section.tsx | Section · many |
Products storefront.section.productsReal product cards from a feed, a collection or chosen products, as a grid or a scrolling row. | Core modules/storefront/sections/products-section.tsx | Section · many |
Core modules/storefront/sections/feed-section.tsx | Section · many | |
Spotlight storefront.section.spotlightOne product large: photo, name, price, text and points, picture left or right. | Core modules/storefront/sections/spotlight-section.tsx | Section · many |
Bundle storefront.section.bundleTwo to four products sold together, their total, and a real discount code. | Core modules/storefront/sections/bundle-section.tsx | Section · many |
Reviews storefront.section.reviewsReal published reviews: a star summary and list, quote cards, or customers' photos. | Core modules/storefront/sections/reviews-section.tsx | Section · many |
Countdown storefront.section.countdownTime left on a live discount, with its code; gone once it ends. | Core modules/storefront/sections/countdown-section.tsx | Section · many |
Lookbook storefront.section.lookbookOne picture with products pinned at positions that open the product. | Core modules/storefront/sections/lookbook-section.tsx | Section · many |
Core modules/storefront/sections/steps-section.tsx | Section · many | |
Core modules/storefront/sections/faq-section.tsx | Section · many | |
Core modules/storefront/sections/story-section.tsx | Section · many | |
Core modules/storefront/sections/compare-section.tsx | Section · many | |
Content storefront.section.contentA free article: headings, paragraphs, lists, links and images, sanitized. | Core modules/storefront/sections/content-section.tsx | Section · many |
Core modules/storefront/sections/newsletter-section.tsx | Section · many |
storefront.blockShowThe small pieces inside a section, which the owner adds, removes and reorders.How to extend
| Part | Litestore today | How to extend |
|---|---|---|
Plugin | Slot · many | |
Plugin | Slot · many | |
Plugin | Slot · many | |
Plugin | Slot · many | |
Product card block storefront.block.product_cardOne product's card with image, name and price inside a section. | Plugin | Slot · many |
Plugin block storefront.block.app_blockA block that a plugin provides and the owner places inside a section or a page slot. | Planned | Slot · many |
storefront.editorShowHow pages and themes are changed, previewed and made live.How to extend
savePagesetStorefrontThemegetStorefrontThe assistant writes pages and switches themes through its tools, which the owner approves.| Part | Litestore today | How to extend |
|---|---|---|
Assistant page writing storefront.editor.assistant_pageThe store's assistant writes or rewrites a page's HTML from the owner's request. | Core modules/assistant/agent-tools.ts | Assistant tool |
Assistant theme switch storefront.editor.assistant_themeThe store's assistant lists the theme presets and switches the active one. | Core modules/assistant/agent-tools.ts | Assistant tool |
Publish switch storefront.editor.publish_switchAn on/off switch on each page that shows it on the storefront or hides it. | Core modules/storefront/admin/pages/page-publication-card.tsx | Assistant tool |
Visual editor storefront.editor.visual_editorA screen that shows the page as shoppers see it and changes sections and blocks in place. | Plugin | Assistant tool |
Drag and drop storefront.editor.drag_and_dropMoves sections and elements on a page by dragging them with the mouse. | Plugin | Assistant tool |
Device preview storefront.editor.device_previewShows the page at phone, tablet and desktop widths before it goes live. | Plugin | Assistant tool |
Scheduled publish storefront.editor.scheduled_publishMakes a page or theme live at a set date and time. | Plugin | Assistant tool |
Version history storefront.editor.version_historyStores earlier versions of a page so the owner can go back to one. | Planned | Assistant tool |
Page A/B test storefront.editor.page_ab_testShows two versions of a page to different visitors and compares their sales. | Plugin | Assistant tool |
Template library storefront.editor.template_libraryA set of ready-made page and section designs to start a new page from. | Plugin | Assistant tool |
storefront.codeShowHand-written code an owner or developer adds on top of the theme.How to extend
| Part | Litestore today | How to extend |
|---|---|---|
Custom CSS storefront.code.custom_cssExtra style rules the owner types in that apply on top of the theme. | Plugin | Slot · many |
Core modules/storefront/pages/page-view.tsx | Slot · many | |
Custom code section storefront.code.custom_sectionA section whose template code the owner or a developer writes by hand. | Plugin | Slot · many |
Web font loading storefront.code.web_fontsLoads the Google Fonts the active theme names in one stylesheet request. | Core platform/config/storefront-themes.ts | Slot · many |
The words apps use for a feature, and the plain parts the feature is made of, in the order they happen.
| Phrase | Made of |
|---|---|
| theme settings | |
| theme style | |
| typography | |
| JSON template | |
| sections everywhere | |
| app block | |
| landing page | |
| hero banner | |
| image with text | |
| lookbook | |
| shoppable image | |
| marquee | |
| announcement bar | |
| countdown | |
| FAQ | |
| bundle | |
| spotlight | |
| featured product | |
| featured collection | |
| newsletter section | |
| newsletter signup | |
| how it works | |
| comparison table | |
| drag-and-drop page builder | |
| premade sections | |
| custom CSS |
These phrases mean different things at different apps, so the glossary doesn't map them.
The app documentation these parts were checked against.