Submission Guidelines

Overview

The template must meet all of these requirements to be added to the Webflow Marketplace. Go through this checklist before sending your template for the first review.

Choose a Category and a Primary Tag

Pick a primary tag below that best fit 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, Multy 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.

Multy Layout Tag

The Multy 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.

UI Kit Layout Tag

The UI Kit tag should not be set as a primary tag. Instead it should be added as a secondary tag to templates with several designs for modular elements only (ex. Navbars, Sliders, Forms).

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, grid, and flexbox when possible.
• 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 variations

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 "UI Kit".

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. Do some research to find out what kind of content that type of website usually has.
• Avoid using generic content patterns. Ex: Progress bars for professional skills

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 a 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.

Tags

• 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.

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 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.
• Paragraphs can use “lorem ipsum”
• Text needs to be legible (background and font colors should have enough contrast on all device screens)
• 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 be set on individual tags, and then on individual classes.

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.

Responsive Behavior

• Important: Layouts should be fluid and percentage based for the most part. 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
• Generally layout spacing should be tighter on mobile devices.

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.
• Exception: Preloaders should have Initial Appearance set to display:none, so that the element doesn't block the access to the page content.
• 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.
• 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.

Symbols

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

Naming Conventions

• Classes should be Title Case and not abbreviated. Do not use dashes or other traditional css conventions (e.g. camelCase). Class names should follow correct spelling.
• Page names should be Title Case and should be consistent with navigation link names for those pages.
• Symbols should follow Title Case
• Interactions should follow Sentence case and be descriptive e.g. use "Slide nav down on scroll" instead of "Show nav"
• 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 one word and singular tense. They should also describe what the collection item is. Ex: article, project, member, author, client, tag, category, event, location, property, etc.
• Field names should be Sentence case and should have correct spelling
• Collection item names should be Sentence case.

Classes and Styles

• When possible don't create new classes and styles when you could re-use or cascade styles from another class to create the same design.
• Combo classes should be carefully used and not more than two levels deep.
• Class names should describe the element. Bad: "column2", "text1" or “section-6”. Good: "Social Icon" or "Author Title" or “Testimonial Section.”
• Unused styles should be cleared.
• Delete styles if they aren’t needed. Ex: Setting float: none has no purpose unless you are overriding float: left.

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 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.
• Images should be crisp on retina devices and cropped nicely
• All images should be sharp (@2x) on retina devices.

Logo

• The logo in the navigation should have 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. 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.

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.

Recommended 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">
• Test every link/component/interaction on every page and on every device so that there are no design or layout bugs.
  

Site Settings

• Favicon and webclip should be custom and match the template's theme.
• 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.
  

Custom Code

• Custom code (in site settings, in embeds, in page settings) is not allowed in Templates, except for:
• Font smoothing in the project settings - Example: {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
• No-index code in the Licensing and Changelog pages: <meta name="robots" content="noindex">
• 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.