Website Template Glossary: Every Term You'll Actually Need

Section 1: General Template Terms

Website template A pre-built website structure that gives you a starting point instead of a blank page. It includes layout, typography, colour, and often placeholder content. What you get varies a lot by platform: a Webflow template is a complete, cloneable project with CMS structure and interactions built in; a Framer template runs live in Framer's canvas; a Shopify theme ships as a packaged Liquid codebase. All three are "templates" in the broad sense, but they work very differently under the hood.

Theme In general usage, "theme" and "template" mean roughly the same thing. In Shopify's world specifically, "theme" is the correct term. Shopify themes are packaged Liquid codebases that control the entire storefront's appearance and behaviour. Calling a Shopify theme a "template" isn't technically wrong, but in Shopify's own documentation and community, "theme" is the standard. On Webflow and Framer, "template" is the right word.

Template library A curated collection of templates, usually maintained by a team that applies consistent quality criteria. A library is not a marketplace. No transactions happen there. BestWebsiteTemplate.com is a library: we evaluate templates independently and list the ones that meet our Design Score and Dev Score standards. The distinction matters because libraries have editorial intent; marketplaces have commercial intent.

Template marketplace A platform where templates are bought and sold. Webflow Marketplace, the Shopify Theme Store, and Framer's template marketplace are all examples. Marketplaces handle licensing, payment, and distribution. Quality varies because the selection criteria are usually commercial, not editorial.

Free template A template available at no cost. Free doesn't mean low quality. Webflow's own free templates are well-built. Shopify's Dawn theme, which powers a huge percentage of Shopify stores, is free and open source. That said, free templates often have fewer page types, less CMS depth, and fewer interactions than premium ones. Always check the license terms even on free templates.

Premium template A paid template, typically with more page coverage, more developed interactions, and a more polished design. Premium pricing ranges from around $20 for a basic Framer template to several hundred dollars for a fully built Shopify theme with deep Liquid customisation. Price alone says nothing about quality. That's why scoring systems exist.

Template license The legal terms that govern how you can use a template. Most template licenses are single-use: one purchase, one live website. Using the same purchase for a second client project usually requires buying again. Read the license before you buy, especially for client work. Some marketplaces (like Envato) have specific license tiers that affect commercial use.

Single-use license The standard license for most templates. One purchase covers one live website. You can't use the same license to build multiple client sites. Some designers buy templates in bulk or negotiate agency licenses to work around this for repeat-use assets.

Extended license A higher-tier license that typically allows the template to be used across multiple projects, used in a product that's sold to end users, or used without the original creator's branding. Not all platforms offer extended licenses. Check carefully before building a client-facing product on top of a template with only a standard license.

Template preview A static preview of the template, usually a screenshot or a rendered image. It shows you what the template looks like but doesn't let you interact with it. Previews are useful for a first-pass visual assessment but can be misleading: animations don't show, mobile layouts often don't appear, and CMS-powered pages may not reflect how the template actually behaves with real content.

Template demo A live, interactive version of the template you can browse in a browser before buying. Demos are significantly more useful than previews. You can check mobile responsiveness, test interactions, see how the CMS collections are structured, and assess page load speed. If a template doesn't have a live demo, that's a reason to be cautious.

Above the fold The portion of a web page that's visible without scrolling, on a given screen size. It's not a fixed measurement: what's "above the fold" on a desktop monitor at 1440px wide is completely different from an iPhone SE. In template evaluation, "above the fold" usually refers to the hero section and whether it communicates the site's purpose clearly before any scroll happens.

Landing page template A single-page or minimal template built specifically to drive one action: a sign-up, a purchase, a booking. Landing page templates are lean by design. They skip global navigation, footer complexity, and multi-section sprawl. If you're running a campaign or launching a product, a landing page template is usually a better starting point than a full multi-page template you'll strip back.

Multi-page template A template with multiple distinct page types built out: home, about, services, blog, contact, and so on. Multi-page templates give you a cohesive design system across pages, which is useful when you're building a site from scratch and want consistent typography, spacing, and component patterns throughout.

One-page template A template where all content lives on a single scrolling page, with anchor-link navigation jumping between sections. Common for portfolios, product launches, and small business sites. The design challenge with one-page templates is maintaining visual interest through a long scroll without the natural reset of a page load.

Template customisation The process of modifying a template's design, content, and structure to fit a specific project. How much customisation is possible depends entirely on the platform. Webflow gives you full visual control over every element. Shopify themes are customisable through the theme editor and Liquid code, but the underlying structure is more constrained. Framer gives you component-level control. "Customisable" in a template listing is close to meaningless as a descriptor; what matters is the platform's architecture.

White-label template A template sold without the original creator's branding, allowing the buyer to present it as their own work. Relevant for agencies that sell website builds to clients. White-label templates often come at a premium and usually require an extended or agency license. Be specific when checking: some templates are white-label in the sense of "no creator credit required"; others explicitly prohibit resale or client delivery.

Section 2: Design Terms

Design Score BestWebsiteTemplate.com's scoring axis for the visual quality of a template. It assesses five areas: visual quality (overall aesthetic coherence), typography (type choices, scale, and pairing), hierarchy (whether the layout guides the eye correctly), spacing (consistency of padding and margin systems), and layout (compositional logic and grid use). Design Score is assigned by multiple team members who review the template independently before it is listed. The published score is the averaged result of those individual assessments. It exists because "looks good" is too subjective and too easily gamed by polished marketing screenshots.

Visual hierarchy The arrangement of elements on a page so that the most important information is noticed first. In a well-built template, hierarchy is created through type scale, weight contrast, colour, spacing, and position. When a template has weak hierarchy, everything on the page competes for attention equally and nothing lands. It's one of the most common failure modes in free templates.

Typography In the context of web templates, typography covers the font choices, type scale, line height, letter spacing, and how text is styled across different contexts (headings, body copy, captions, labels). Good template typography works at multiple sizes, across multiple devices, and with real client content, not just the placeholder copy used in the demo.

Type scale A defined set of font sizes used consistently throughout a template, usually following a ratio (like a modular scale). A proper type scale means H1 through H6, body, caption, and label sizes are all proportionally related. Templates without a coherent type scale produce visual inconsistency the moment you start adding your own content.

Font pairing The combination of two (occasionally three) typefaces used in a template, typically a display or heading font and a body font. Strong font pairings have contrast in personality but harmony in proportion. In template evaluation, we look at whether the pairing holds up at all sizes, not just in the hero section where everything is large and forgiving.

Grid system The underlying column structure that organises a template's layout. Most web templates use a 12-column grid, though some use 10 or 16. What matters in practice is whether elements align consistently across sections and whether the grid is used deliberately. A template where sections randomly break from the grid or use inconsistent column counts scores lower on layout.

Spacing system A set of predefined spacing values (usually multiples of 4px or 8px) used for padding, margins, and gaps throughout a template. A template with a consistent spacing system feels orderly even when you can't articulate why. One without it feels slightly off everywhere. In Webflow, spacing systems are often implemented as CSS variables or a defined set of classes.

Colour palette The set of colours used throughout a template: primary, secondary, background, text, accent, and state colours (hover, error, success). Good template palettes are defined at the system level, not hardcoded one-off on individual elements. In Webflow, this usually means CSS variables. In Shopify, it's theme settings. In Framer, it's design tokens.

Colour contrast The luminance difference between a foreground colour (usually text) and its background. Contrast matters for accessibility: WCAG AA requires a minimum ratio of 4.5:1 for body text. Many templates fail this, particularly ones with light-grey text on white, or coloured text on busy background images. A template that fails contrast checks will require remediation before it's usable for any serious project.

Component A reusable design element, self-contained with its own visual logic: a card, a button, a testimonial block, a pricing table. Well-built templates have a clearly defined component set that you can use across pages without recreating from scratch. In design terms, a component should look and behave consistently wherever it appears.

Section In template design, a section is a full-width horizontal block of content, typically spanning the full viewport width. Pages are built by stacking sections. A typical template has 6 to 15 sections across a home page. Section design determines the overall rhythm of a page: too many similar sections make it monotonous; too many wildly different ones make it incoherent.

Hero section The top section of a page, visible above the fold, designed to communicate the site's core value proposition immediately. In template evaluation, hero sections are a proxy for overall design quality. A weak hero usually means weak design throughout. A strong hero needs a clear headline hierarchy, intentional typography, and a visual approach that holds up at all common screen sizes.

Call to action (CTA) A prompt that asks the user to do something: "Get started," "Book a call," "Buy now." In template design, CTAs are buttons, links, or form inputs. What matters is how they're visually prioritised in the layout and whether the template's component system treats them consistently. A template with four different button styles used interchangeably is a sign of weak component design.

Negative space The empty or unmarked areas of a layout. Often called white space, though it doesn't need to be white. Negative space creates breathing room, directs attention, and communicates confidence in the design. Templates that cram content into every available pixel typically score lower on spacing and overall visual quality. Negative space is an active design choice, not a failure to fill the page.

Responsive design Design that adapts to different screen sizes and devices. A responsive template rearranges, scales, and hides or shows elements appropriately at different breakpoints. Responsive doesn't mean "it doesn't break on mobile." It means the layout was designed with multiple viewports in mind, not just retrofitted from desktop after the fact.

Mobile-first design A design approach that starts with the smallest screen and adds complexity as viewport size increases. Mobile-first templates tend to perform better on Core Web Vitals and have more thoughtful touch interactions. Many templates claim to be mobile-first but were clearly designed at 1440px desktop width and compressed down.

Breakpoint A specific viewport width at which a layout changes behaviour. Common breakpoints are around 480px (mobile), 768px (tablet), 1024px (desktop), and 1280px or 1440px (wide desktop). Templates define their own breakpoints, and how well a template handles transitions between them is a meaningful quality indicator.

Interaction design The behaviour of elements when users act on them: hover states, click responses, form validation feedback, modal behaviour, menu animations. In template evaluation, interaction design covers whether these behaviours are consistent, purposeful, and appropriately scoped. Interaction design is different from scroll animations: it covers all designed responses to user input.

Micro-interaction A small, contained interaction that gives feedback for a specific action: a button that changes colour on hover, a form field that highlights on focus, a navigation link that animates on click. Micro-interactions are the difference between a template that feels polished and one that feels static. They're easy to overlook and time-consuming to add after the fact.

Scroll animation An animation triggered by the user's scroll position, typically using Intersection Observer in JavaScript or a library like GSAP. Scroll animations are common in Webflow and Framer templates. Used well, they guide attention and add depth. Used poorly, they slow down the page and distract from the content. We penalise templates where scroll animations affect performance without adding meaningful experience value.

Section 3: Development Terms

Dev Score BestWebsiteTemplate.com's scoring axis for the technical quality of a template. It runs alongside Design Score because a template can look exceptional but be built on code that's fragile, slow, or hard to maintain. Dev Score is the averaged result of independent assessments by multiple team members, each reviewing the template separately before it is listed. It covers five areas: code quality (structure and cleanliness), responsiveness (how thoroughly the template handles different viewports), CMS structure (how well the data model is built out), performance (page load speed and Core Web Vitals), and class/architecture logic (specifically for Webflow, how the CSS class system is structured).

HTML The markup language that defines a web page's structure and content. In the context of templates, HTML quality matters because poorly structured HTML breaks accessibility, harms SEO, and makes maintenance harder. Webflow generates HTML from its visual editor; Shopify themes use Liquid that compiles to HTML; Framer outputs its own HTML. You rarely write HTML directly when working with templates, but the quality of the output HTML still affects your site's performance and indexability.

CSS The language that controls visual styling. In Webflow, CSS is managed through the Designer's styling panel. In Shopify, it lives in theme files. In Framer, it's abstracted into component properties. Template Dev Score is partly a proxy for CSS quality: consistent class naming, no excessive overrides, a coherent spacing and colour system implemented in variables.

JavaScript The programming language that handles interactivity and logic in the browser. In templates, JavaScript powers interactions, scroll animations, form handling, and third-party integrations. Poorly written JavaScript in a template can cause performance problems and conflicts when you add your own scripts. Templates that load unnecessary JavaScript by default are a common Dev Score issue.

Static site A website where every page is pre-built as an HTML file and served directly to the browser with no server-side processing at request time. Static sites are fast and cheap to host. Most Framer templates produce static output. Static sites can still have interactive elements through JavaScript; the term refers to how the server delivers pages, not whether the page itself is interactive.

Dynamic site A website where pages are generated on the server at request time, often pulling content from a database or CMS. Shopify storefronts are dynamic: product pages, collection pages, and cart states are generated using Liquid templates and Shopify's database. Webflow sites with CMS content are also dynamic. Dynamic sites are more complex to cache and host correctly, which affects performance.

Page load speed How quickly a page becomes usable in a browser. Measured in seconds from first request to interactive state. Page load speed is a Google ranking factor and a direct factor in conversion rates. Templates that load heavy fonts, large unoptimised images, or excessive JavaScript by default will score lower on Dev Score. Always test a template's live demo in PageSpeed Insights before buying.

Core Web Vitals Google's set of standardised metrics for page experience: Largest Contentful Paint (LCP, loading performance), Interaction to Next Paint (INP, interactivity), and Cumulative Layout Shift (CLS, visual stability). Templates that score well on Core Web Vitals are generally well-built. Templates that score poorly will start your SEO at a disadvantage and require remediation before launch.

Clean code In a template context, clean code means the codebase is structured so another developer can understand, maintain, and extend it without reverse-engineering it from scratch. For Webflow templates, this means consistent class naming, no stray inline styles, and logical nesting. For Shopify themes, it means well-commented Liquid, modular section files, and coherent schema structure. Clean code is partly subjective but consistently recognisable.

Class structure In Webflow specifically, class structure refers to how CSS classes are named, organised, and applied across the template. Webflow generates classes that apply styles directly through the Designer. A well-structured Webflow template uses a naming convention (BEM or something similar), avoids redundant classes, and makes it clear what each class does. Poor class structure makes a Webflow template extremely difficult to modify without breaking things.

Combo class A Webflow-specific term for a secondary class added on top of a base class to create a variation. For example, a base class "button" with a combo class "button-red" to create a red version. Combo classes are a legitimate and necessary Webflow pattern. The problem arises when a template is built with excessive combo classes that override base styles unpredictably. This is a common Dev Score failure point: templates that look polished but have fragile, combo-class-heavy CSS that breaks under modification.

Custom code Code added manually to a template, outside the platform's visual editor. In Webflow, this typically means JavaScript or CSS injected through the page settings or embed blocks. In Shopify, it means edits to theme Liquid files or custom app scripts. Custom code gives you capabilities the platform's native tools don't, but it also adds maintenance complexity and potential conflicts on template updates.

CDN (Content Delivery Network) A network of servers distributed geographically that serve a site's static assets (images, fonts, scripts) from the location closest to the user. Webflow, Framer, and Shopify all include CDN hosting by default. From a template evaluation perspective, CDN matters because templates that serve large unoptimised assets still perform poorly even on a CDN. A CDN reduces latency; it doesn't fix bloated assets.

SEO-ready A marketing claim that a template is built with SEO best practices. It typically means the template uses semantic HTML, has correct heading hierarchy, includes Open Graph tag support, and generates valid sitemaps. What it doesn't mean: that your site will rank. SEO-ready is a structural foundation, not a guarantee of search performance. What you publish on it matters more, and our study of what top-ranking blog posts have in common shows which content habits actually show up on page one. Check the actual heading structure and markup in the demo before trusting the label.

Schema markup Structured data added to a page's HTML using a vocabulary from Schema.org, which helps search engines understand content type and context. For e-commerce templates, this includes product schema (price, availability, reviews). For blog templates, it includes article schema. Templates that include correct schema markup give search engines better context, which can improve how results appear in SERPs.

Open Graph tags HTML meta tags that control how a page appears when shared on social media platforms. They define the title, description, and image used in link previews on platforms like LinkedIn, X, and Slack. A template that supports Open Graph tags means the fields exist in the CMS or page settings; it still requires you to fill them in with real content.

Lazy loading A technique where images and other media are only loaded when they're about to enter the viewport, rather than all at once on page load. Lazy loading reduces initial page load time significantly on content-heavy pages. Most modern templates include lazy loading by default; it's worth verifying in a template's demo using browser DevTools if performance is critical to your project.

Image optimisation The process of reducing image file size without unacceptable quality loss, typically through format choices (WebP over JPEG or PNG), compression, and serving correctly sized images for each viewport. In a template context, image optimisation refers to whether the template is built to serve images correctly: correct size attributes, appropriate format support, and responsive image handling. Webflow and Framer both handle WebP conversion automatically. Shopify's theme infrastructure supports it but requires correct implementation in the Liquid.

Accessibility In a template context, accessibility means the site can be used by people with disabilities: screen reader users, keyboard-only navigators, people with low vision or colour blindness. Accessible templates use semantic HTML, correct ARIA labels, keyboard-navigable interactive elements, sufficient colour contrast, and focus states on interactive components. Accessibility is also a legal requirement in many jurisdictions for commercial and public-sector websites. Templates that ignore it create liability and exclusion, not just technical debt.

Section 4: CMS and Content Terms

CMS (Content Management System) Software that lets you create, manage, and update website content without editing code directly. In the template world, CMS capabilities vary significantly by platform. Webflow has a built-in visual CMS. Framer has its own CMS. Shopify's product catalogue, blog, and pages are all managed through its built-in admin. Third-party CMSs like Contentful or Sanity can also be connected to templates via API, though this is outside the scope of most template purchases.

CMS template A template built around dynamic content that's managed through a CMS, rather than static, hardcoded page content. A CMS template typically includes collection structures (for blog posts, team members, case studies, products), and the template's pages pull from those collections dynamically. CMS templates are more complex to set up than static ones but are essential for any site where content is updated regularly.

CMS collection A Webflow-specific term for a structured content type. A CMS collection is roughly equivalent to a database table: it has defined fields, and each entry in the collection is a record. Common collections in Webflow templates include Posts (for blogs), Projects (for portfolios), Team Members, and Case Studies. Collections power dynamic pages: Webflow generates one page per collection item using a template layout you define.

Collection field A single data field within a CMS collection. Fields have types: plain text, rich text, image, number, date, switch (boolean), colour, reference, and multi-reference, among others. The field structure in a Webflow CMS collection determines what content you can store and display. A well-built CMS template has field structures that reflect realistic content needs, not just what was needed for the demo.

Reference field A Webflow-specific CMS field type that links one collection item to another. For example, a blog post collection with a reference field pointing to an Author collection. This creates a relational data structure. Reference fields enable things like author pages, category pages, and related content modules without duplicating data across collections.

Multi-reference field A Webflow CMS field type that allows a collection item to reference multiple items from another collection. A blog post tagged with multiple categories, for example. Multi-reference fields are more powerful than single reference fields but also harder to filter and display correctly in Webflow's native CMS. How well a template uses multi-reference fields is a reasonable indicator of CMS architecture depth.

Dynamic content Content that's pulled from a CMS or database at render time, rather than hardcoded into the page. Blog posts, product listings, team member profiles, and project case studies are all typically dynamic. Dynamic content is what makes a template scalable: you add a new blog post to the CMS and the index page, the archive page, and the related posts module all update automatically.

Static content Content that's fixed directly in the page or template, rather than pulled from a CMS. The site's main navigation, a legal disclaimer, or a fixed "About Us" paragraph might be static. Static content is fine for things that rarely change. The mistake is using static content for things that will need regular updates, which forces you to edit templates manually every time.

Rich text field A CMS field that stores formatted content: headings, paragraphs, bold, italics, links, images, and sometimes embedded media. Rich text fields are used for blog post bodies and long-form content. In Webflow, rich text styling is controlled by a Rich Text element with its own scoped CSS. One of the more common template quality failures is rich text elements that are unstyled or inconsistently styled compared to the rest of the design.

Slug The URL-safe identifier used at the end of a page's URL. For a blog post titled "How to Choose a Webflow Template," the slug might be "how-to-choose-a-webflow-template". Slugs should be human-readable, lowercase, and hyphen-separated. In CMS templates, slugs are usually auto-generated from the content title but should be reviewed and cleaned up before launch.

Sitemap A file (usually XML) that lists all pages on a site, used by search engines to discover and index content. CMS templates that generate sitemaps automatically are better positioned for SEO out of the box. Webflow, Framer, and Shopify all generate sitemaps for hosted sites. What matters is whether the CMS collection pages are included and whether the sitemap is submitted to Google Search Console.

Blog template A template built specifically for content publishing. It includes an index page (listing all posts), individual post pages with rich text layout, and often category or tag archive pages. Blog templates in Webflow use CMS collections for posts, with dynamic filtering for categories. Blog template quality is heavily determined by the typography of the post body, since that's where most reading happens.

Portfolio template A template built for showcasing work: case studies, projects, photography, or design. Portfolio templates typically use a CMS collection for projects with fields for images, descriptions, tags, and client information. Grid layout, image treatment, and the structure of the individual project page are the primary quality indicators.

E-commerce template A template built for selling products online. In the Shopify context, this means a theme with product pages, collection pages, cart, and checkout flow. E-commerce templates are evaluated differently from content templates because the primary goal is conversion: product photography layout, add-to-cart UX, and checkout clarity matter more than editorial typography.

Section 5: Platform-Specific Terms

Webflow

Webflow Designer The visual editor where you build and style Webflow sites. The Designer is a full-featured layout tool that gives you precise CSS control without writing CSS directly. It outputs clean, production-grade HTML and CSS. Working with a Webflow template means opening it in the Designer, modifying the layout, swapping content, and adjusting styles at the element or class level.

Webflow Editor A separate, simpler interface layered on top of a published Webflow site for content editing. It's designed for clients and non-technical editors who need to update text, images, and CMS content without accessing the Designer. The Editor doesn't expose layout controls, only content fields. Webflow templates designed for client handoff should have CMS structures that make the Editor usable without Designer access.

Webflow CMS Webflow's built-in content management system, built directly into the platform. It handles CMS collections, dynamic pages, and content relationships. Webflow CMS content is managed in the Designer and the Editor. The CMS has plan-based limits on the number of collection items and collections. Understanding Webflow CMS structure is essential for evaluating whether a Webflow CMS template is actually well-built or just visually polished.

Webflow Hosting Webflow's own hosting infrastructure, built on AWS and served via Fastly's CDN. Webflow sites hosted on Webflow's servers benefit from automatic HTTPS, asset optimisation, and global distribution. Webflow hosting is required for sites using the CMS, Memberships, or Logic. Static exports are possible for simpler sites but lose dynamic functionality.

Webflow Cloneable A Webflow project shared publicly so others can clone it into their own Webflow workspace. Cloneables are different from marketplace templates: they're free, shared by the community, and vary wildly in quality. Some of the best Webflow educational resources are cloneables; some are unstable demos not suited for production. BestWebsiteTemplate.com lists both marketplace templates and high-quality cloneables where they meet our scoring thresholds.

Webflow Marketplace Webflow's official marketplace for buying and selling templates built by third-party creators. Templates on the Webflow Marketplace are reviewed before listing, though the review criteria are primarily functional rather than deeply editorial. Purchasing a template from the Webflow Marketplace gives you a license to use it for one project and transfers a copy of the project to your workspace.

Made in Webflow Webflow's community showcase for websites built on the platform. It's a browsable gallery, not a template library. It's useful for inspiration and for seeing how templates perform with real content. Some sites listed there are built on templates; others are fully custom builds.

Symbol vs Component Webflow's terminology has changed. Symbols were the original term for reusable elements in Webflow: design once, use everywhere, and changes propagate across the site. Webflow renamed Symbols to Components with the launch of Component Properties, which added variant and property support similar to Figma components. If you're working with an older Webflow template, it may still use Symbols. Newer templates should be built with Components. The function is similar; the capabilities of Components are significantly more powerful.

Interaction In Webflow's system, an Interaction is a defined animation or behaviour triggered by a specific event: page load, element scroll into view, hover, click. Webflow's Interactions panel lets you chain multiple animations with timing controls. The quality of a Webflow template's interactions is a significant design differentiator. Interactions that are poorly timed, janky on certain devices, or triggered without purpose are a common quality issue.

Breakpoint (Webflow) Webflow handles breakpoints differently from code. The Designer has a set of predefined breakpoints: Desktop (base), Tablet, Mobile Landscape, and Mobile Portrait, plus an optional XXL breakpoint. Styles cascade downward from Desktop: if you set a padding on Desktop, it applies to all smaller breakpoints unless overridden. This means a Webflow template's mobile quality depends entirely on how thoroughly the designer built out the smaller breakpoints. Always test the Tablet and Mobile Portrait views before buying.

Framer

Framer Canvas The main workspace in Framer where you build pages and components visually. The Canvas is a freeform design environment with direct CSS output. Unlike Webflow's more constrained layout system, Framer's Canvas gives you pixel-precise positioning. Framer templates are published directly from the Canvas to Framer's hosting infrastructure.

Framer CMS Framer's content management system, built into the platform. It supports structured content collections, similar to Webflow CMS but with a simpler field set. Framer CMS is adequate for blog posts, team members, and project listings. It's less feature-rich than Webflow CMS, particularly around relational fields and dynamic filtering.

Framer Components Reusable, self-contained elements in Framer with their own properties and variants. Framer Components are similar in concept to Webflow Components and Figma components. They support variant states (default, hover, pressed) and configurable properties. Well-built Framer templates have a component set that covers the full range of UI patterns used across the template.

Framer Variants Defined visual states for a Framer Component. A button component might have a Default variant, a Hover variant, and a Disabled variant. Variants allow Framer to animate between states, creating smooth interaction feedback. The quality of a Framer template's variants determines how polished the interactive experience feels in production.

Framer Interactions Framer's system for defining animations triggered by user events or scroll position. Framer has particularly strong animation capabilities, partly inherited from the Framer Motion library. Framer templates often use scroll-linked animations, stagger effects, and transition animations that are more fluid than what's possible natively in Webflow without custom code.

Framer Template Marketplace Framer's built-in marketplace for buying templates directly within the Framer app. Templates are listed by third-party creators and by Framer itself. Purchases give you a copy of the template in your Framer workspace. The marketplace has grown significantly as Framer has expanded its creator ecosystem.

Override A Framer-specific concept where you attach custom code (a React component or function) to a Canvas element to control its behaviour beyond what the visual editor supports. Overrides are how Framer enables advanced interactions, custom animations, and dynamic data fetching that can't be done through the standard UI. Templates that use Overrides effectively are more powerful but require some code familiarity to modify.

Shopify

Shopify Theme The complete visual and functional layer of a Shopify storefront. A Shopify theme controls every aspect of the store's appearance and most of its frontend behaviour. Themes are built with Liquid, HTML, CSS, and JavaScript. They're packaged as a structured set of files and installed through the Shopify admin. Unlike Webflow or Framer templates, Shopify themes are deeply tied to Shopify's data model (products, collections, cart, checkout).

Liquid Shopify's open-source templating language, created by Shopify and used across all Shopify themes. Liquid inserts dynamic content into HTML using two types of tags: output tags ( {{ }} ) that render values, and logic tags ({% %}) that handle conditionals and loops. A line like {% for product in collection.products %} loops through all products in a collection. Understanding Liquid is required for any meaningful Shopify theme customisation beyond the theme editor.

Liquid Section A modular, reusable content block in a Shopify theme, defined in its own .liquid file. Online Store 2.0 themes are built around sections: the homepage, product pages, and most other templates are assembled from sections that can be added, reordered, and configured through the theme editor. Sections make Shopify themes much more flexible than the older, rigid Liquid template structure.

Section Schema The JSON configuration block within a Shopify section file that defines what settings appear in the theme editor. The schema controls which fields (text, image, colour, product reference, etc.) a merchant can edit without touching code. A well-designed section schema makes a theme highly configurable; a poorly designed one forces merchants to hardcode content or hire a developer for basic changes.

Shopify Theme Store Shopify's official marketplace for buying themes. Themes listed in the Shopify Theme Store have passed Shopify's review process. The store includes both free themes (like Dawn and its variants) and premium themes from third-party developers. Theme Store themes must meet Shopify's technical requirements, which sets a reasonable quality floor.

Shopify Online Store 2.0 The major architecture update Shopify introduced that moved themes from a rigid, template-based structure to a fully section-based one. OS2.0 added sections everywhere (not just on the homepage), JSON templates (replacing Liquid templates for page structure), and Metafields support. Any Shopify theme worth using today should be built on Online Store 2.0 architecture. Themes built on the older structure are harder to customise and receive less platform support.

Metafields Custom data fields that extend Shopify's standard product, collection, customer, and order data with additional structured content. Metafields let you store content like a product's material composition, care instructions, or a custom badge label, and display it through Liquid in the theme. OS2.0 themes that support Metafields well are significantly more flexible for complex product catalogues.

Dawn Shopify's official open-source reference theme, released as the default theme for new stores and as a foundation for theme developers. Dawn is built on OS2.0, is performance-optimised, and is maintained by Shopify's own theme team. It's not the most visually distinctive theme, but it's technically correct, well-documented, and heavily used. Many premium Shopify themes are built on or inspired by Dawn's architecture. Understanding Dawn makes it much easier to evaluate other Shopify themes.

Shopify POS Shopify's point-of-sale system for in-person retail. It's relevant to the template space when a merchant runs both an online store and a physical retail operation. Shopify themes don't directly affect POS behaviour, but product data, inventory, and customer records are shared across online and in-person channels. Themes built for omnichannel merchants should account for the product data structures that POS requires.

The template space moves quickly. Platform updates, new features, and terminology shifts happen regularly across Webflow, Framer, and Shopify. We update this glossary as platforms evolve and as we encounter terms that need clarifying in the context of current template evaluation.

Browse the full template library at: BestWebsiteTemplate.com

Every template in the library has been independently scored using our Design Score and Dev Score methodology. Read more about how we evaluate templates.