This article is for merchants who have added their eCom online store to a custom website.
If you’re selling on Lightspeed eCom sitebuilder (Instant Site), you design your storefront in the Site Editor →
If you’re selling on WordPress, you design your storefront in your WordPress Dashboard →
If you’re selling on Wix, you design your storefront in your Wix Website Editor →
Your Lightspeed eCom (E-Series) storestorefront is where customers explore and shop for products you sell online. Storefront includes several essential elements: a product list displaying product cards, individual product pages, organized store categories, navigation tools to help customers browse with ease, etc.
To tweak the storefront's look and feel, you can use the built-in design options in the Webstore > Design section of the Online tab in Retail POS (X-Series). Choose whatever size images, product card layout, category name position, and many more you want. Once you update the settings, they are immediately reflected on the store within your website.
Changing online storefront design in your Retail POS
In the Webstore > Design section of the Online tab in Retail POS (X-Series), you’ll find built-in native settings that allow you to change how your eCom storefront looks, including:
- How the product list looks: The size of the product cards, whether prices are shown or hidden, and more.
- How the product page looks: The layout of key elements like descriptions, images, the Buy button, navigation, and others. You can set the product page layout and determine whether or not to show subtitles, SKUs, social media buttons, and other information depending on your business needs.
- How the category page looks: Choose where to display category names or hide them completely.
- How to adjust navigation: Hide or show elements like “Previous” and “Next” arrows to switch between products, breadcrumbs, product filters, and the store bottom navigation menu, including the “Sign in” link.
The Design page in the Online tab
To adjust eCom storefront design:
- From Retail POS, go to the Online tab > Webstore > Design.
- Customize your online storefront to your liking. The preview is shown on the right.
The changes are saved automatically and will apply to all websites where you've added your eCom storefront.
To add dropdown choices, custom text fields, and more to product pages, you can adjust product attribute view and use input fields.
Your online store’s fonts and colors automatically adapt to match your website’s style, making it look like a natural part of your website. If you'd prefer to create a custom design and adjust the store fonts and colors manually, you can disable color adaptation in the Online tab > Webstore > Design in Retail POS.
More ways to tweak your online storefront design
Customizing your online storefront is just a matter of your imagination and determination. For a more detailed setup of your store’s design, you can use additional tools:
- To label products with deals, use product ribbons and subtitles →
- Explore the Lightspeed eCom App Market to find apps that can help you customize your online store just the way you want.
- Enhance your product pages by adding videos alongside images in the product gallery to showcase your product's details more effectively.
- Add CSS codes to your online storefront's theme by going to Online tab > Webstore > Design > Create your CSS theme in Retail POS.
If there is no setting for a change that you want to make, you can further customize your storefront by using the eCom (Ecwid) API.