To ensure that merchants using the Lightspeed eCom platform have access to themes of the highest quality, we require that themes uploaded to our Theme Store adhere to a minimum set of standards and requirements; these include:
- Localisation requirements
- Front-end requirements
- Back-end requirements
- Code requirements
- Preset / Demo shop requirements
- Performance requirements
- Mandatory Files
Please make sure your theme meets all requirements listed in this article before submitting your theme for validation. Contact your partner manager if you need more information about a particular requirement or requirements.
NOTE: Our theme publishing requirements are also available as part of our iOS App in the App Store.
IMPORTANT: You should treat all requirements listed in this article as mandatory, meaning your theme may not get published if you don't respect our publishing criteria. All themes need to be created from a global perspective. English must be the default language in all locations.
Localisation requirements
These criteria must be respected to ensure an international rollout of your theme.
| Languages : [NoAm cluster: English, French (optional)] [EU cluster: English, Dutch, German] |
|---|
|
Demo store language : The language of the shop where your theme is developed must be English first and you must use the ‘t’ translation filter for all strings
|
|
Currencies : Different currencies are displayed and work correctly ($, £, €) |
| Back-end settings language : The language of the user customization settings (There is currently a bug affecting back-end settings - please enter your settings in English only) |
| Documentation : The language of the theme documentation |
| Theme Store description : The description users will see when choosing a theme, please respect the correct structure (see Publish a theme - point 2) |
| German laws : [EU cluster only] Unit Price, Tax included/excluded and a link to Shipping Rules must be present everywhere a price is displayed on your theme. |
| Changelog : A Maximum of 5 recent additions or bug fxies with dates located in the theme description and documentation. |
Front-end requirements
These criteria must be respected to ensure merchants have every default shop element active as they install your theme on their shop.
| Requirements |
|---|
| Cart is present on all pages |
| Payment methods are present on all pages |
| Links to Service Pages are present on all pages :About us, Terms and conditions, Disclaimer, Privacy Policy, Payment Methods, Shipping & Returns, Customer service, Sitemap |
| A link to the Blog functionality is present on all pages |
| Links to Account / Registration / Login are present on all pages |
| Newsletter form is present on the home page |
| Search field is present on every page |
| All elements are properly aligned (pixel-perfect) |
| Distinctive and Relevant Theme |
| All elements have sufficient contrast |
| Optimized for mobile : On top of being responsive, text needs to be large enough to be easily clickable, especially in the footer. |
| Price and discounts are displayed in the collection and home page (shop.url/collection) |
| Multiple image dimensions (vert, horizon) possible in collection (shop.url/collection) |
| Sort by grid/list option in collection (shop.url/collection) |
| Filter options and custom filters displayed in collection (shop.url/collection) |
| Pagination in collection(shop.url/collection) |
| User Text (from Text pages in Content > Pages) displayed on homepage |
| Tags are present on the homepage |
| RSS / Sitemap link are present |
| Product zoom or enhancement present |
| Product details are present: Description, Custom fields, Stock levels, Delivery times, Specifications, Brands, Tags |
| Product links are present: Social Media (share this product), Add to Wishlist, Add to Compare list |
| Product reviews are present and can be added |
| A tutorial is present (optional but recommended) |
Back-end requirements
These criteria must be respected to ensure merchants get a clear representation of all the customization settings available to them.
| Requirements |
|---|
| Settings are cleanly laid out and there aren’t too many or too few displayed |
| Settings are explained clearly and in detail : ex:Footer image - choose your footer image is not clear or useful, a better example would be Footer image, this image will be displayed at the bottom-left of every page |
| All colors present in the front-end can be customized |
| Background image can be customized |
| Background image option to repeat (no repeat, repeat, horizontal, vertical) |
| Logo & Favicon can be customized |
Code requirements
These criteria must be respected for security reasons and to cut down on the number of possible bugs
| Requirements |
|---|
| All required templates are present :layout/custom.rain, layout/fixed.rain, page/brands.rain, page/catalog.rain, page/collection.rain, page/index.rain, page/product.rain, page/tags.rain, page/textpage.rain, snippet/messages.rain |
fixed/custom.rain - Responsive GUI files are present : {{ 'gui-2-0.css' | url_core }} , {{ 'gui-responsive-2-0.css' | url_core }} , {{ 'gui.js' | url_core }} , {{ 'gui-responsive-2-0.js' | url_core }} |
| fixed/custom.rain - Include only url_core or Scheme-Less urls in head |
| fixed.rain - snippets/messages.rain may not be included |
| fixed/custom.rain - HTML5 Semantic tags < header >, < nav > , < main > and < footer > are used |
| product.rain - Discount rules are present |
| Bundle products are present in either collection.rain or product.rain |
Preset / Demo shop requirements
The differences between Presets and Demo shops can be a little difficult to understand:
Presets are made inside your main theme, through Design > Theme Editor > More (top-right) > Manage Presets. These are a copy of your Theme Settings with different defaults from your main theme, cohesively modifying the whole look of your theme with one click.
Demo shops are a visual representation of your presets. They are working examples of what your theme, with a preset installed, could look like. They need to be populated with demo products, blogs, banners etc.
For example, the "Bright" preset could have pink and orange colors with a cartoony font, while the "Toys" demo shop could have the Bright preset installed and display various children's toys for sale.
| Requirements |
|---|
| Different color scheme used for each preset |
| Different fonts used for each preset |
| Different navigation and/or logo placement for every preset |
| A unique logo for every shop preset |
| Headlines with active link (english or lipsum if text present) (no text inside the actual image please) |
| Banner with link present (english or lipsum if text present) (no text inside the actual image please) |
| Brand images are present |
| Banners and USPs have options for multiple languages |
| About 20 Products added to about 5 Categories minimum |
| Products have descriptions (english or lipsum), tags, custom fields, specifications, brand, stock, and delivery times (please pick the first product in /collection do display this) |
| A few products have Old / New prices |
| Related products are displayed (please pick the first product in /collection do display this) |
| Blog should be activated and designed (English or lipsum) |
| Complete text pages (customer service, about us, etc) in English or lipsum |
| Activate payment methods & hallmarks |
| Have good screenshots for each preset (set through |
| Display clear screenshots in the documentation |
Performance requirments
These criteria must be respected to ensure your page adheres to the most widely accepted internet conventions
| Requirements |
|---|
| All pages are W3C validated - We are aware of the shortcomings of this test and of some issues triggered by the Lightspeed eCom platform, but we do ask that there are minimal errors here : http://validator.w3.org/ |
| Google PageSpeed Insights: We require an acceptable pagespeed (from average to fast is preferred) based on https://developers.google.com/speed/pagespeed/insights/ |
| No Javascript errors in Console |
| No 404 errors in Console |
| SEO check (through Lighthouse or similar |
| No Google Structured Data (snippet) errors (please see Rich Snippets page) : https://developers.google.com/structured-data/testing-tool/ |
| Go through a dummy order to verify the process works - Links to Terms & Conditions at the last step should work correctly. |
| Third level nested categories (sub sub categories) work |
| Theme can handle very long text values |
| Theme can handle very small and very large images |
| Theme works well on all current Devices |
| Theme works well on all current Browsers |
Mandatory files
Lightspeed has a series of files that help to make a bridge between the platform and your theme. Make sure you have all the necessary core files for your theme.
If any of the core files are missing, your theme may not perform as required.
Blocks are required in order to let users or apps inject code in your theme. There are two files, one should be within the <head> of your theme while the other should be inserted inside the <body>, preferably towards the bottom. The custom.css file allows users to include their own css without enabling the theme editor.
- head.rain
- custom.css
- body.rain
GUI files are used for core page (checkout, user pages, etc) functionality and look. You can overwrite these classes or functions using your own scripts and css files, but we ask that you include these files for basic platform functionality.
- gui-2-0.css
- gui-responsive-2-0.css
- gui.js
- gui-responsive-2-0.js
Examples:
{% include 'blocks/head.rain' %}
<link rel="stylesheet" href="{{ 'custom.css' | url_asset }}" />
<link rel="stylesheet" href="{{ 'gui-2-0.css' | url_core }}" />