Lightspeed Web Store Customization

How to customize your Lightspeed eCom or Omnichannel website solution.

There are a few different areas of your new website that you may want to customize in order to achieve the look and feel that more adequately represents your store. Lightspeed omnichannel and ecom customers can range from vape stores and bicycle shops to pet stores and apparel shops. Therefore, a generic template might leave some design areas to be desired. In this article, we will walk you through some of the customization capabilities in-built into your Lightspeed ecom or omnichannel web store.

Before we get started, click on your dashboard to make sure you are viewing the same screen. From the dashboard you should see a button in the top right of your screen that says “View Webshop”. Click on that button and your website should open in a new tab by itself. This will allow you to check on your changes in a new tab as you work on your website.

 

Now, return to the tab with your website’s dashboard. In the menu on the left, click on the option labelled “Design”.

 

This will take you into the portion of Lightspeed eCom’s CMS (content management system) where you can control the look of your website. Now you’re ready to get started.

 

Ways to Customize Theme in Lightspeed eCom CMS

Theme Store

The most important first step is selecting a theme for your website that offers the features and layout that you desire for your new website. Consider factors such as the location of the menu items, whether or not the website has a fixed width or takes up the full screen. These will be important decisions that may be difficult to change after you’ve installed and customized your new theme.

 

Theme Editor

Customize Theme

Under the Customize Theme tab the developer or web development company that created your website will outline the key features of the theme that you’ve selected for your web store. The following components are the key areas where you can use the Lightspeed eCom Content Management System to change things yourself!

*Note- CMS varies by theme. These are some examples of different aspects you may have control over, dependent upon the theme you’ve selected.

• Layout- Choose between different pre-built website layouts such as full width, bordered or boxed.
• Background- This area can be used to make a number of different changes to the look of your website including:
  • Background Image
  • Background position
  • Color Sidebar
  • Header Color
  • Footer Color
  • Background Color
  • Container Color

*Quick Note about Colors- In order to change the colors you will need to familiarize yourself with the Hexidecimal Color system used by web developers and graphic designers. These are colors that are determined by a scale and begin with a hashtag or # symbol. The best part of this feature is that you can match your brand colors exactly in the places you want them throughout your website.

• Contact Details
  • Name – As it will appear in your websites footer
  • Description – As it will appear in your websites footer
  • Phone Number – For your footer
  • Email – contact email in footer
• Features
  • Reviews- Choosing to display or not.
  • Homepage Tags- Choosing to display or not.
  • Products in category- Display products in a specific category or not.
• Logo
  • Upload a Logo or Favicon to display on your website.
• Slider
  • Adjust the size, type and position of your websites main image.
• Social
  • Facebook, Twitter, Google+, Pinterest, YouTube, Tumblr, Insagram- Paste in the links to your company’s specific social media pages.
• Typography
  • Google Fonts- Choose the font to display on your website based on the Google fonts that have been installed with your theme.
  • Body Color
  • Highlight Color
  • Button Color
  • Sidebar Heading Color
  • Footer Color
  • Heading Color
  • Sidebar Color
• Collection/Product Overview – Select how images associated with your product collections display.
• Banners- Select the size, image and links associated with the banners on your site.
• USPs -Identify and display your company’s Unique Selling Propositions on your website.
• System Colors- Control the colors of the all aspects of your Lightspeed eCom site including:
  • Text, Title, Link, Highlight, blocks, buttons, CTAs
• Email Colors – Control the color, text and link colors with hexadecimal color codes.

 

Theme Editor

To the left of the ‘customize theme’ button, you’ll notice a button that says ‘Theme editor’. This is the place where your web developer can make more advanced customization of your web store. If you realize that something doesn’t quite work the way you hoped, looked the way you wanted it to or there is no way to control it in the ‘Customize theme’ section, then it’s probably something that a developer can work on for you in the ‘Theme editor’ portion.

 

When you are selecting a web developer to work in the theme editor portion of your website make sure they are familiar with some basic languages as well as the programming languages specific to Lightspeed eCom.

HTML- The basic building blocks of a website. Controls content.

CSS- Styling language for websites.

Javascript- Creates interactivity on your website.

Draft– A framework for building themes on Lightspeed eCom.

Rain– The template editor language specific to Lightspeed eCom.

Bootstrap– A framework frequently installed in ecom and web store themes.

 

For more information regarding Lightspeed eCom and Omnichannel customizations or to learn about our services call us at 954-361-5284.