Your Lightspeed eCom (E-Series) online storefront is where customers browse for products. On the eCom site (Instant Site), they access it via a direct link ending with /products (for example, mystore.com/products).
The storefront includes several essential elements:
- Product grid with product cards on it
- Product pages
- Store categories
- Navigation elements
To customize your online storefront's look and feel, you can use the built-in design options in the site editor.
In the Online tab > Settings > General > Cart & Checkout page in Retail POS, you can additionally customize your online store’s checkout, set default product sort order, choose where and how “Compare to” price is displayed, enable favorites, and more.
Designing product grid on catalog pages
The product grid is a list of product cards that gives customers a brief overview of the items in your online catalog. It appears on all category pages as well as on the front page of your catalog, as it is seen via a direct link ending with /products.
Example of a product card in the product grid
You can adjust product card size and aspect ratio, change the spacing between cards, hide or display elements like price or the “Buy Now” button, and more. For example, portrait image orientation is ideal for showing apparel, and large-size images are best for showcasing jewelry details, home decor elements, and so on.
To adjust product grid design:
- From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
- In the Page dropdown at the top, select Catalog.
- Click Categories & Product grid.
- Expand Catalog page settings and Product card settings to make the changes.
- Click Publish.
The same image size, aspect ratio, and grid spacing that you set for product cards will be used for category images in your store.
Designing product pages
A product page in your online storefront includes a gallery, a description, and all product details. It’s where customers can study the item and read reviews for it.
You can set the product page layout and decide which card elements to show based on your business needs. For example, if you have a gallery of high-quality product photos, it’s better to show full-size images so customers can pay attention to all of them. Additionally, you can zoom in on the main product image on hover.
To adjust product page design:
- From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
- In the Page dropdown at the top, select Product.
- Click Product details.
- Expand the settings to make changes to the product page layout and details.
- Click Publish.
The changes will be applied to all product pages in your online storefront.
Setting up category name display
Categories that you decide to use in eCom make it easier for customers to navigate your online catalog. On your storefront, they are displayed as a list:
You can choose where to display category names or hide names or category images completely.
To set up category name display:
- From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
- In the Page dropdown at the top, select Catalog.
- Click Categories & Product grid and expand Categories settings.
- Choose your option from the Name position dropdown.
- Click Publish.
The changes will be applied to all pages in your online storefront that feature categories.
Under Categories & Product grid → Catalog page settings → Category view in the site editor, you can expand root categories to display products they contain right on the catalog’s front page. For example, if you’re running a restaurant and want to showcase all the menu sections right away.
Adjusting navigation elements in your store
Each eCom storefront has a number of navigation options, including breadcrumbs and “Previous” and “Next” arrows to switch between products. Showing these elements can make it easier for buyers to make a purchase.
To adjust product page navigation:
- From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
- In the Page dropdown at the top, select Product.
- Click Product details.
- Expand Navigation to make the changes.
- Click Publish.
To improve store navigation, consider managing visibility of the “Sign in” link in your storefront and customizing filter panel orientation.
More ways to tweak your storefront design in eCom
Customizing your storefront is just a matter of your imagination and determination. For a more detailed setup of your online storefront’s design, you can use additional tools:
- To label products with deals, use product ribbons and subtitles.
-
To create an animated image, upload the .gif file as your prime product image, and it will appear on the storefront.
- Use sliders and promo bars on the storefront to grab customers’ attention for hot deals, seasonal sales, social media promotions, or anything else.
- Explore the eCom App Market to find apps that can help you customize your storefront 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.
If there is no setting for a change that you want to make, you can further customize your storefront by using CSS or the API settings.