The design of an online store is one of the first things that catches a customer's eye and can powerfully impact its sales figures. Lightspeed eCom gives you many flexible options to modify your store's design and to create a beautiful and compelling experience for your customers.
This article contains instructions for:
- Installing a new theme
- Changing your theme's settings
- Adding custom CSS to your theme
- Modifying your theme's code
- Troubleshooting missing features/settings
Buying and installing a new theme from the theme store will erase all current customization settings of your current theme and give a fresh start.
Lightspeed offers 3 professional free themes and over 40 paid themes to make sure there's a design that's right for you. Paying a monthly fee encourages the development of new themes and ensures that our partners are there to support you by email.
To go to the Theme Store, on the left menu of the Back Office, click Design > Theme store.
Themes are built with settings that can affect visual and functional parts your design. The theme manual explains the available settings in a theme. Visit Locating theme manuals to locate information related to your theme.
To edit your theme settings, on the left menu of the eCom Back Office, click > Design > Theme settings.
You can change the code of your theme by opening the theme editor. Doing so will:
- Create a copy of the original theme's code. This means your theme will no longer receive new updates.
- It will also make it difficult for our Support team and partners to assist you with issues related to design.
- For more information, click here.
Making custom changes using the Template Editor requires sufficient knowledge of web development. Lightspeed support can provide contact information for customization partners to assist you with making custom changes. To obtain this information, Contact us.
If you have HTML and CSS knowledge, for more information visit our Advanced Web Development section.
Activate the Template Editor by navigating to your eCom Back Office > Design > Theme editor. A popup box displays, enable I understand the risks and wish to proceed to confirm you understanding and click Continue.
CSS (Cascading style sheets) control how elements of your website are displayed. With the correct knowledge, you could add custom CSS to change many parts of your website without the consequences of unlocking the theme editor.
If you are unfamiliar with web development, read the theme manual to see if it's possible to make the style change using the theme's built in settings. Visit Locating theme manuals to locate information related to your theme.
Otherwise, Contact us. Our support team will be happy to assist you and/or direct you to a third party customization partner.
Add or edit custom CSS by navigating to eCom Back Office > Design > Theme settings > Custom CSS.
Lightspeed's goal is to empower you with the knowledge you need to make changes to your eCom website independently. When your theme appears to be missing certain design features, follow these steps:
- Check the theme's manual and confirm all design features and settings have been discovered and understood. See Locating theme manuals for more information.
- Contact the developer who created your theme. Our partners are there to support you if you have any questions or requests. Although our partners will assist you with their theme in any way they can, fixing issues or adding feature requests is based on their discretion alone. The developer's contact information is located above the link to the theme manual. Locate the theme manual by following the instructions here.
- Look for a comparable feature in another theme. If you have made design changes that you don't want to lose and/or have a live website, it's recommended you go to Lightspeed's website and create a new eCom demo using a new email address. Once created, you can install any theme to research if it has the settings that are right for you.
- If you cannot find a theme that has the features or setting you need for your eCom store, you may need a 3rd party web developer. In order to make an informed decision, review the table below and Contact us for assistance. Our Support team will be able to recommend a customization partner to you if needed.
Installing a theme
Hiring a web developer