Submission Requirements

Required Practices

• Create a page called “Style Guide” with all of the tags (Headings, paragraphs, text links, lists, buttons, etc)
• Create a page called “Instructions” if advanced and hard-to-use interactions or hidden components are used in the site. This page should provide brief information on how to access and edit these components.
• Create a page called “Changelog” to track template versions and updates. Add the following code to the Changelog page's custom head code: <meta name="robots" content="noindex">
• Use the changelog to track all updates:
  • Use it to track updates such as fixing bugs, small layout adjustments, etc. It’s not required to notify the marketplace team about small changes that don’t affect the design or functionality.
  • If you wish to make larger changes to your design, it’s important to both track any changes in the changelog and notify the marketplace team of the changes. Failure to do so may result in having your template delisted. 

Test every link/component/interaction on every page and on every device so that there are no design or layout bugs.

Choose a Category and a Primary Tag

Pick a primary tag below that best fits your template. This will be the main way we describe your template throughout the template marketplace. The primary tag and the category should not be the same. Ex: Choose "Cafe" if it's a template for cafe businesses.

• Design Tags:
  Agency, Portfolio, Designer, Creative, Interior Design‍
• Business Tags:
  Small Business, Corporate, Consulting, Startup, Coaching, Real Estate, Architecture, Construction, Logistics, Transport, Delivery, Attorney, Law Firm, Finance, Accounting, Bank, Investment, Insurance, Recruitment, Retail, Cars, Agriculture, Farm, Florist, Pets, Kids, Furniture, Homeware
• Technology Tags:
  App, SaaS, Software, Startup, Dashboard, Admin, Mobile, Help Center, Support, IT Company, Dashboard, Mobile, App, Startup, Business, Small Business
• Blog Tags:
  Personal, Travel, Lifestyle, Food, Fashion, Beauty, Wellness, News, Technology, Photography, Magazine, Newspaper, Design, Music, Video, Podcast ‍
• Marketing Tags:
  Landing page, Newsletter, Social, Event, Conference, Marketing, Startup
• Photography & Video:
  Photography, Video, Movie, Film
• Entertainment Tags:
  Music, Musician, Band, DJ, Podcast, Radio, Book, Video, Movie, Film, Game, Dance, Artist, Magazine, Newspaper, News
• Food & Drink Tags:
  Food, Restaurant, Bar, Coffee Shop, Cafe, Recipe, Winery
• Travel Tags:
  Hotel, Tourism
• Education Tags:
  School, University, College
• Sports Tags:
  Fitness, Gym, Soccer, Wellness
• ‍Medical Tags:
  Health, Dentist, Doctor, Hospital, Veterinary‍
• Nonprofit Tags:
  Charity, Church, Religion, Political‍
• Beauty & Wellness Tags:
  Beauty, Wellness, Barber, Salon, Spa, Massage, Therapy
• Fashion Tags:
  Accessories, Jewelry, Fashion

‍Other Tags

These tags should be used as additional template tags:

UI Kit, Multi-layout, One Page, Multipurpose, Coming Soon, Countdown, Under Construction, Directory, Documentation, Resume, CV, Personal, Wedding

Combining tags from multiple categories

Templates should aim for a single business vertical but it is possible to add tags from a distinct category whenever it makes sense.

Examples:
1 - A Therapy App template should be under the Beauty & Wellness category but it can also have the App Tag.
2 - A Gym template should be under the Sports category but it can also have the Business and Small Business Tags.
3 - An Architecture template with multiple layouts should be under the Business category but it should also have the Ui Kit Tag.
4 - A Bank template with a single page should be under the Business category but it should also have the One page Tag.
5 - A template with several design elements should be under the Design category and have the UI Kit as the primary Tag.

‍One Page and Landing Page Tags

Not all single-page templates are Landing pages. Templates with a single page should be tagged as One page, but the Landing Page tag should only be used on single page templates that are oriented for conversion.

Multi-layout Tag

The Multi-layout tag should not be set as a primary tag. Instead it should be added as a secondary tag to templates with more than three layout variations for a minimum of three static pages.

Each layout needs to be unique and respect the template theme. In other words, it should only be related to one business vertical.

‍

Tag Styling

All tags on the site (All Paragraphs, All Ordered Lists, All H1 Headings, etc) should be styled so they create consistent and readable body copy whenever a Rich Text Element, Heading element, or any other text element is added to a page. Here are all Tags that should be styled:

• All Headings tags (H1 Headings, H2 Headings, etc)
• All Paragraphs tag
• All Unordered (bulleted) lists tag
• All Ordered (numbered) lists tag
• All Blockquotes tag
• All Figures tag (image and caption wrapper)
• All Figure Captions tag (image caption)
• All Links tag
• Special Headings, paragraphs or other text elements that look different than the default Tags defined above should have a class with those override styles. Ex: If a section heading looks different than the All H2 Headings tag then create a new class for that section heading.

Template name

• Choose a name that is not the same or includes the same name as a category or primary tag.
• Run a search through the Template Marketplace and make sure the template name isn't already in use.
• Preferably, choose a single word to name your template.

Layout

• Website layout should follow consistent spacing and not appear crammed or cluttered
• The main structure of the site should use sections,  containers, or properly-labeled/formatted divs as containers, grid and/or quick stack, and flexbox where appropriate.
• Sections should have a min-height instead of a height so that it can grow when there’s more content added. This problem is usually found in hero sections.
• Website should not have horizontal scrolling caused by elements falling out of the viewport.
• Layout should follow visual design requirements for “good” found in our quality rubric.
• Adhere to accessibility guidelines (see “accessibility and performance” section)

Interactions

• Follow requirements for “good” found in our quality rubric.
• Avoid using preloaders, in particular preloaders with interactions

Use of fluid units

• Layouts should be fluid and responsive across all viewports. Designers should test their layouts by dragging the viewport width in Webflow and should test the published site on mobile devices
• Ensure there is no side scrolling at any breakpoint
• Layouts should be optimized for mobile devices. This includes margins/padding, type sizes, button sizes, etc
• Fluid units are preferable over absolute units (e.g., pixels)
• Use consistent unit types for similar scenarios. For example, if you use the EM unit for padding, use the EM unit for all padding in the template.
• It is a best practice to use REM units for typography

New  Features

• Use variables where appropriate 
• Do not use Localization in templates

Multi Layout Templates

Many of today's templates offer multiple layout variations for home pages, contact pages, etc. Designers can add layout variations to their template but should follow these guidelines:

• The entire template should have a cohesive style.
• Content and design should fit within a set of related tags. In other words you should not target multiple verticals for one template.
• Good example: A business template with 5 different homepage variations, 5 different pricing page variations, and miscellaneous pages that fit the "business" vertical (like landing page, jobs page, etc).
• Bad example: A business template with a different homepage variation for a business, one for a phone app, one for an agency, one for a restaurant, and one for a portfolio. These are all different verticals.
• Templates with a minimum of three layout variations for three static pages are tagged with “Multi layout”

Content

• Very important: designers should create content and layouts that fit that template’s primary tag. For example: a Nonprofit template should have content, layout and database structure that is best suited for a nonprofit website. Familiarize yourself with the typical content found on that type of website.
• Visual and written content should be appropriate for a general audience. Offensive/inappropriate content for a general audience may result in an automatic rejection.
  • Language and imagery in all templates should be inclusive, appropriate for a global audience, and free from discrimination against any identifiable group
  • Should avoid reference to any particular political parties or religions
  • No obscene language
  • No culturally insensitive imagery or language
  • No nudity
  • No violent imagery
  • No imagery of drug use
    
• No trademarked logos or branded content. Use resources like logo ipsum and fake branding.
  • Good example: a template has a customer logo section and uses logo ipsum logos as placeholders
  • Bad example: a template has a customer logo section and uses logos from Google, Slack, etc., instead of placeholders
• Adhere to accessibility guidelines (see “accessibility and performance” section)

Conversion best practices

Since our template websites will be used as actual marketing websites for the customers that buy them, it’s important that templates are designed to convert as explained in our quality rubric.

• Put CTAs in high-traffic, easy-to-find locations
• Write leading headlines that create space for credibility, objection handling, social proof, ease-of-use, and results of products or services
• Overall, implement good conversion-centered design:
  • Good example: A template for a company where the main conversion goal is for the user to fill out a contact form, so CTAs for the contact page stand out. (Likewise for other conversion goals, such as buying a product - the cart will be easy to find.) Additionally, every section of the website is dedicated to luring the end user into the conversion goal, showing social proof to promote trust, creating space for objection-handling, explaining ease-of-use w/products or services, and/or showing results of products or services. Here’s a great Example of a site with great, straight forward navigation, and here’s another  Example of a site that has great leading headlines and sections designed to convert.
    
  • Bad example: A template for a company where the main conversion goal is for the user to fill out a contact form, but the user journey makes it difficult to navigate to the contact form

CMS

CMS Structure

• Collections should match the type of content that would normally exist in that category of a website. Ex: a Band website may have a collection of Songs, Albums, Shows, and Photos.
• Collection Fields should match the type of content that would normally exist in that category of a website. Example: the Shows collection in a Band website may have the Name of the show, a venue name, a venue location, a date, and a link to purchase tickets or a link for more info.
• Collection slugs should be singular. Ex: website.com/article/page
• Collection fields should be in a logical order with well-written help text on how to use them.
• Collections should have at least 3 items and a maximum of 7 items per collection. These items should have dummy content that makes sense for that category of a website.

CMS Design

• Conditional visibility should be added to items that are dependent on if a field value exists or not. Ex: only show Facebook link under a team member if the Facebook link field has a value.
• Dynamic lists that are grids should be tested with long item names to make sure the layout doesn't break.
• All Dynamic pages should have content and design matching the template category.

Ecommerce

Ecommerce Structure

• Do not add a business address or configure any Ecommerce settings (including store currency, shipping or tax zones, etc.). This will ensure, among other things, that all our stores will start with default currency settings.
• In Ecommerce tab > Setup Guide, the following steps should remain unchecked:
• Business address
• Shipping method
• Tax settings
• Payment provider
• Hosting
• Checkout

‍Note about business address

• Once a business address has been added, it cannot be removed, so it is very important that the business address is not added when creating a template. For this reason, we can not also allow existing templates with a business address to stay in the template marketplace.

Ecommerce Design

The following Ecommerce template pages shouldn't have any preloaders:

• Products template
• Categories template
• Checkout
• Order confirmation

Cart

• Should be in the Navbar or otherwise visible on each page
• Should contain standard elements (items, subtotal, checkout buttons) and be functional‍
• Ideally, should contain all major supported payment methods

1. Regular checkout button
2. Webpayments (optional)
3. PayPal checkout

Checkout page should include:

• Checkout form
• Order items
• Order summary

Checkout PayPal page should include

• PayPal checkout form
• Order items
• Order summary
• Styling should be consistent with Checkout page

Order confirmation page

• Should include order confirmation element

Product template page should include:

• Add to Cart element
• Product description
• Product image

Category template page should include:

• Product categories list
• Links to listed product pages

Product management

• Products and categories should use consistent casing, correct spelling, and names that make sense, especially in custom fields
• There should be a sufficient number of dummy products and categories included in the template for the design to look good
• We recommend making sure at least some products have variants, when it makes sense for your template.

Rich Text

• Rich Text elements should have every text type showcased when used in the template detail page. Example: Evermore Template blog page.
• As mentioned in the Tags section above, when a user adds any text element inside of a Rich Text, it should look good and be styled correctly in the Tag selectors.
• If there is special styling on elements inside of a specific Rich Text element, add a class to that Rich Text and then style tags for that class. Ex: If a text link is supposed to look different in a specific Rich Text compared to All Links on the site.
• Spacing between each text element inside of a Rich Text should be consistent. Ideally this spacing should be set on Tags so they're consistent throughout the site.
  

Typography - Legibility, spelling, and grammar

• All text should have proper spelling and grammar
• Headings need unique wording (not "lorem ipsum") for the type of website it is made for. (See section on conversion best practices when writing headings.)
• Paragraphs should use “lorem ipsum” from https://www.lipsum.com/
• Text needs to be legible (background and font colors should have enough contrast on all device screens)
• Use percentages rather than pixels to set line height to help with responsivity
• Long and short heading titles should be used to test line height bugs
• Text line-height should avoid text crashing on itself on all devices
• Set the primary font on the Body element. Secondary fonts, like for Headings, should then be set on individual tags, and then on individual classes.
• Adhere to accessibility guidelines (see “accessibility and performance” section)

SEO

• Use H1 heading elements once on the page for the most important heading. It has the highest ranking. Note: You can use multiple H1's if nested inside of section or article tags.
• Use H2-H6 subheading elements in a correct hierarchy on the page. These subheading elements rank in importance according to the number in their name, so assign correct subheadings for importance of content.
• SEO settings need to match the template name on the home page settings. SEO Title should read "{Template Name} - Webflow HTML website template" for Static and CMS templates or "{Template Name} - Webflow Ecommerce website template" for Ecommerce Templates.
• Include "Powered by Webflow" in the footer and link to Webflow's homepage.
• Set alt tags for decorative images
• Check your main pages on https://pagespeed.web.dev/ for a passing SEO score as specified in our quality rubric

Responsive Behavior

• Important: Layouts should be responsive. Designer should test their layouts by dragging the viewport width in Webflow and test the published site on mobile devices.
• Components should work across all media queries. Ex: tabs should become stacked on mobile
• Use a spacing system that spans appropriately across screen sizes
  • Good example: A website uses 60px of top and bottom padding on desktop, and 20px of top and bottom padding on mobile
• Ensure typography classes (H1s, H2s, H3s, etc.) have specified sizing for different screen sizes (i.e., mobile usually requires smaller heading sizes than large screens)

Webflow Usability

• When possible use initial appearance on elements with Interactions so that it’s visible to customers. Detail: Some elements use display:none, visibility:hidden, or opacity:0 and other elements are visible by default and have display:none set on an Initial Appearance.
• Components (tabs, sliders, etc) should not be nested. Ex: slider inside of a slider.
• Links and buttons need hover states to show that they are clickable.
• Elements that aren't clickable/interactive should not have hover states.
• All links/button should link somewhere. No empty links, with the exception of “buy template” CTAs that can only be activated after publishing
• The main images inside repeating grid items should be links instead of just having small hidden text links
• Maps should not have the API key added
• Do not use legacy interactions in your template designs.

Forms

• Form fields should have correct settings. Ex: email fields should not be text fields
• Success messages should be customized to fit website design
• Input focus states should be customized to fit website design
• Input fields text and placeholders should be legible
• Give appropriate names to the Forms and Field elements (in form settings). These names will appear in form email notifications and form reports.
• Forms should always include field labels for accessibility

Components 

• Components should be used for navigation, footers and repeating sections.

Naming conventions

Classes and styles: 

• Maintain consistent class naming structure throughout the template, ensure all class names and combo class names in the template use only one of the below class naming formats:
  • Default: Hero Container Element 
  • Snake Case: hero_container_element
  • Pascal Case: HeroContainerElement
  • Camel Case: heroContainerElement
  • Kebab Case: hero-container-element
  • BEM: block__element--modifier
• Except in the case of using a premade system or framework such as "Client First", "Mast', "Knockout' etc., all class names and combo class names in a template should use only one of the above class naming formats to maintain consistency.
• Ensure no instances of auto generated class names like Div Block 45, Image 4 etc. 
• Use descriptive names that convey the purpose or content of the element for class names and combo class names. 
• Re-use classes for elements with the same styles to maintain consistency and reduce redundancy. 
• Clear unused styles to keep the stylesheet clean and efficient. 
• If you want to differentiate the style of an element from all others, you can add a combo class:
  • Combo classes should not be more than two levels deep.
    • Bad example: section  testimonials  dark  customers  horizontal
    • Good example: section  testimonials  dark
• If you're going to add a combo class to "hero_container_element", then it should be in a matching format such as "service_dark" (both use Snake Case in this example)
• Don’t apply redundant styles  e.g., (setting text-align: left on a paragraph inside a container that has text-align: left)

Components

• Components  should follow Title Case

Interactions

• Interactions should follow sentence case and should be descriptive (e.g., "Slide nav down on scroll" instead of "Show nav")

Pages

• Page names should be Title Case
• The page name should be consistent with it’s slug

CMS

• Collection names should be Title Case and should have the singular and plural versions defined correctly. This sentence should sound natural: “This is a Collection of {{plural-version}}” and “Create a new {{singular-version}}”
• Collection slugs should be short and singular tense. They should also describe what the Collection item is(e.g., article, project, member, author, client, tag, blog-category, event, location, property, etc.)
• Collection field names should follow sentence case
• Collection fields should include a short description

Transitions

• Transitions should be applied to specific properties, not “All”.
• Transitions should be set on all properties that change on hover. E.g. If text color changes on a button hover it should have a transition.
• Transitions should be consistent. Ex: input focus and button hover transitions should have the same timing.

Images and Licenses

• Images, icons and other assets used in the template should be allowed for resale by the copyright holder. We will ask about the licenses of the assets used in the template.
• Large background images should be less than 300kb and small assets should be less than 20kb.
  • Where possible, use WebP formatting
• Images should be crisp on retina devices and cropped nicely
• All images should be sharp (@2x) on retina devices.
• Main subjects of images, such as faces, should not be blocked by other content
  • Good example: a portrait of a person has a heading overlapping with the blurry top corner of the image, but does not overlap any subject matter or focal points of the image
  • Bad example: a portrait of a person has a heading overlapping directly over their face or any other main subject matter in the image

Logo

• The logo in the navigation should have the same name as the template. The logo should be an image so it’s easy to replace.

Licensed Assets

• The use of premium or trademarked graphics assets are not allowed. (With the exception of social media icons that link to relevant accounts.) Use only free assets that are allowed for resale and free redistribution or CC0-licensed graphics from sources like:
  - Stock Up
  - Pexels 
  - Unsplash
• Create a page called Licenses at the slug /licenses
• Include the following text at the top:
  “All graphical assets in this template are licensed for personal and commercial use. If you'd like to use a specific asset, please check the license below”.‍
• Display graphic sources on this page (images, icons, fonts, illustrations) with a link for each, pointing to the page where the license is defined (see example).
• Add the following code to the page’s custom head code:
  <meta name="robots" content="noindex">
• Include a "Licensing" link in the footer and link to License page. (License page should include typography, imagery, iconography and any other licensed assets.)

Pages

• Pages should have unique layouts (designers should avoid redundant page designs with little structural differences).
• Dynamic collection page templates should have appropriate fields added to the SEO and OG fields.

Site Settings

• Favicon and webclip must be included, should be custom and match the template's theme, and display properly.
• Form Notifications settings should be empty
• Only Google fonts or free (OFL) fonts can be used - no Typekit or custom fonts.
• All Integration settings should be as default. Do not generate an API token or add any third-party integrations to the project
• The site's total weight should be less than 10mb.
• Minify CSS

Custom Code

Custom code (in site settings, in embeds, in page settings) is not allowed in Templates, except for:

1. Font smoothing in the project settings - Example: {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
2. No-index code in the Licensing and Changelog pages: <meta name="robots" content="noindex">‍
3. SVG's - If you're using SVG's code it is required to add an Instructions page to the template with clear guidelines about how to use it.
   

Accessibility and performance

• Check all main pages on Pagespeed Insights to ensure your template has passing scores for core web vitals for both desktop and mobile

• Follow Webflow’s accessibility checklist as referenced in the quality rubric. For templates, pay special attention to the following:

• Avoid excessive motion behind text
• Allow zoom without forcing horizontal scrolling
  • People with low vision use zoom to scale content, sometimes up to 400%. As they zoom, content should reflow vertically (as a column) and remain fully legible and logical without a need for horizontal scrolling.
• Check legibility on landscape and portrait
• Ensure content has appropriate structure and relationships
• Ensure that text can be resized without the loss of content or functionality
• Layout is simple, straightforward, and consistent
• Make sure that color is not the only  way information is conveyed 
• Check the contrast for all borders, icons, text and overlap on photos/videos
  • Color contrast guidelines indicate that there should be at least a 4.5:1 ratio between the foreground content and the background content. However, this guideline is not applicable if:
  • The content is large. If the text is large enough to exceed 18 pt. font size or 14 pt. font size if bold, a contrast ratio of 3:1 can exist.
  • The content is decorative
  • The content part of a logo or wordmark
• Use inclusive language
• Use plain language
• Use unique and descriptive link labels 
• Include alt text for every important imagesome text
  • In templates, some of the most important images may be decorative, in which case check “decorative” option on these images in media library
• Avoid auto playing media