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 create a beautiful and compelling experience for your customers.
This article explains how to begin:
- Modifying the theme's settings
- Choosing a design in the theme store
- Modifying your theme's code to:
- Remove or adjust the zoom function of product images.
- Change the header and footer of your online store.
- Adjust page elements to display in different sequences.
You can modify the colors of your online and mobile store and your emails, upload logo and header images and modify CSS codes. To modify the built in design settings of your online store, click Design > Theme settings on the left menu of the Back Office.
NOTE: This page may differ from your own configuration page, as these settings are theme-specific. For more information, refer to the appropriate theme documentation.
|Preset||Choose from pre-programmed color settings.|
|Color||You can configure the background color.|
|Image||Upload a background image. The maximum size is 1200 x 1200 pixels.|
|Position||Configure the image position.|
|Repeat||Use this option to repeat the image on-screen, in order to fill the screen. Repeat - the image is repeated both horizontally and vertically.|
|Horizontal - the image is repeated from left to right.|
|Vertical - the image is repeated from top to bottom.|
|Background color||Some themes use blocks to graphically display your products. You can modify the background color of blocks.|
|Add to cart||You can modify the color of the order button next to a product.|
|Info||Modify colors of buttons, such as Login, Subscribe (to the newsletter) and View (the cart contents).|
|Default||You can modify the color of all other buttons, for example Add to add tags.|
|Favicon||Icon displayed in your browser's tab or next to the URL of your online store. The Lightspeed eCom logo is displayed by default.|
|Header||Bar displayed at the top of a page. It contains a link to your homepage. Many customers opt for incorporating their logo into the header. The Back Office indicates the appropriate header size per separate theme.|
|Hide brands||Use this option to remove the brands element from your navigation. Normally, brands displays an overview of the brands added to your online store.|
|Hide RSS feeds||With RSS customers can see any changes, such as when you add new products to your online store. Activate this to hide these feeds from your customers.|
|Hide tags||By default, tags are displayed at the bottom on every page. If you select this check box, tags will not be shown. These are not the tags that are displayed on every product page.|
From the eCom Theme Store you can choose from a variety of themes, enabling you to immediately modify your online store's design. To go to the Theme Store, on the left menu of the Back Office click Design > Theme store.
Most design elements can be changed through the use of custom CSS or the Template editor.
Making custom changes using custom CSS or the Template Editor requires sufficient knowledge of HTML and CSS. Lightspeed can provide contact information for customization partners to assist you with making custom changes.
To obtain this information, Contact Lightspeed support.
If you have HTML and CSS knowledge, for more information visit our Advanced Web Development section.
- Custom CSS - Add or edit custom CSS by navigating to eCom Back Office > Design > Theme settings > Custom CSS.
- Template Editor - 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.