4 b. Validating your theme [NB]

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:

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. 

iosguide.png

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 NOT entered by users. 

ex: {{ 'This string can be translated' | t }}

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: 65 (mobile) and 85 (desktop) : https://developers.google.com/speed/pagespeed/insights/
No Javascript errors in Console
No 404 errors in Console
SEO check (ex: https://www.lipperhey.com/en/)
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 & Conditons at the last step should work.
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 have 

  • 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 }}" />    

 

What's next?

Have more questions? Submit a request