Skip to main content

    Website builder

    Little Big Shop was created primarily to give small to medium business owners the ability to create a shop easily and quickly – with no tech skills required!

    What we found however, was that aside from an online shop, our customers often had no online presence at all, including a basic website that helped to inform their customers about their brand, what they stood for and how to contact them.

    So we developed the website builder to fill that void, with the aim to make building a website as simple and easy as it was to add a product to a shop!

    Read further for a detailed guide on how to build your website with our custom Website Builder.

    Website & Branding

    From your Little Big Shop admin Dashboard, click on the ‘Website & Branding’ menu item in the left hand navigation.

    You will land on the Website Builder tab and landing page.

    • This first page you land on is a landing page that provides you with some information about the Website builder.
    • Next to the Hi! button, you will see a button for Shop and New Page

    Shop default page

    The Shop button is the default page on your website – if you don’t add any other pages in the website builder, your customer will land on your shop/products page when they visit your website.

    Click on the ‘Shop‘ button.

    • You will see a ‘Page‘ field where you can rename your ‘Shop’ link (e.g. Store, Browse, Products…).
    • To the right is an ‘Add content panels‘, ‘Preview‘, ‘Save as draft‘ and ‘Publish‘ buttons, as well as an ellipsis – we will go into more detail about these below, when adding a new page.
    • The default header comes next, which contains your logo (if you have uploaded one) and any pages/links you have added to your shop.
    • Following is a ‘placeholder’ content panel which gives you a guideline of what your product catalogue may look like. NOTE: this is not editable. It has been placed there so you can get an idea of the layout of your Shop page. Once you add a product to your shop, the placeholder will disappear. You may want to add extra ‘Content panels‘ above or below this placeholder image which will also appear in your shop. We go into more detail about how to Add content panels below.
    • Finally is the default footer, which just like the header, will always remain in the same place in your page layout.

    Add a new page

    Go back to the top of the screen and next to the ‘Hi!’ and ‘Shop’ buttons, you will see a ‘New page‘ button.

    Click on the ‘New page‘ button. A section will open up for you to select a page (the page options are highlighted in the green box in the image below)

    • Home > a template will load with a header, editable content panel and footer. If you save this page, it will become the Home or main page that your customers will land on when they go to your website
    • Contact Us > a template will load with a header, editable content and map and footer. NOTE: The best way to populate the address in your Contact Us page is to ensure that your Business Details are filled out in Settings (Dashboard > Settings > Shop details > Business details. Once you’ve added this information and saved, come back to the Website builder and select the Contact Us page template – you will see that your address details and corresponding map will be dynamically updated.
    • Postage > a template will load with a header, 4 panels of editable content and footer.
    • Blank page > a free template with a header, generic content panel and footer.

    NOTE: All content panels in these pages can be edited, deleted or moved. Only the header and footer cannot be deleted or moved.

    Select the Home page

    As outlined above, when you select the ‘Home’ page template, a page will load that will have the header, editable content panel and footer.

    First of all, let’s look at the top of template:

    • Page: this is an editable field that enables you to rename your page to whatever you like. NOTE: This name is what will appear as the link for this page in your navigation menu, which is in the header and also on one of the footer templates (not all)
    • Add content panels: This will bring up a modal window with a choice of different templates containing text and images for various categories.This is discussed in the next section
    • Preview: This is a static view of your website and useful for when seeing how changes to content panels will look, before saving or publishing.
    • Save as draft: You can save your work as a draft and work on it later. This ensures any changes you make doesn’t affect your website which is accessible to your customers, until you are ready to publish.
    • Publish: Clicking this button will publish the changes to your website

    The Ellipsis are the three dots at the very end of this section. When you click here, there are three options:

    • Current version: This tells you the current version in your website builder, however if you have saved a draft, it will be displayed here instead.  To edit a draft, click on it. To make your draft live, you will need to click ‘Publish’.
    • Version history: This displays the last five changes you have published. Click on a version to revert back to these changes.
    • Delete page: click this icon to delete your page.
    camera

    Add content panels

    Next, let’s look at how you can ‘build’ this page out to suit the information you want to put in it.

    A ‘content panel‘ is really another way to describe the sections of a page. You would normally have a ‘header’ and ‘footer’ section, as well as a variety of other sections on the page that might contain just an image, just text, a combination of the two or maybe some testimonials from your customers.

    Click on the ‘Add content panels‘ button. A modal window will open up for you to select a template. You have a choice of the following:

      • Header > when you click on ‘Header’ you are given a variety of different header layouts to choose from.
      • Image only > again, some templates with various layouts displaying images – some full width, two column or three column. Replace the images with your own once you’ve added the template to your page.
      • Content > this section provides you with a variety of different layouts that contain both images and text. Once you add it to the page, you can replace the images and update the text as you see fit.
      • Features > the content panels in this section make it easy for you to highlight the features of your product/s, service/s and/or business
      • Pricing > these content panel options allow you to display pricing options for your products/services.
      • Teams > this section allows you to introduce your team to the world, or you can even use these panels to display products
      • Testimonials > do you have some customers praising your products? Add a testimonial section to your page
      • Call to Action > if you want people to complete a certain action (for example, follow you on social media), use these panels to make it easy for them
      • HTML/Blank panel > you can add a ‘free content area’ panel that you can add images and text to and style as you wish.
      • Footer > different layouts of footer panels to finish off your page.

    To begin with, go back to the ‘Header’ templates and select one of the options by clicking on the image. Once you click on the image, you are taken back to the ‘Home’ page and your selection will appear in place.

    DON’T FORGET TO SAVE

    Related Articles