The Layout & style tab is really where you get to define the general ‘look and feel’ of your brand and website. The styles you set here will become the defaults for your website, including what logo you will be using, the header and footer background colours, font colours and the shop layout.
Site Margins
The layout for your website and shop is broken up into 4 separate sections:
- Header: which contains your logo and main menu and in some templates, social media links
- Shop: the pages that your products are displayed in. This includes the catalogue page (which displays thumbnail views of your products), product detail page, wishlist and the checkout process.
- Content: consists of any extra information you add via the Website Builder. These could include images, text and extra pages such as Contact us and Postage.
- Footer: will contain links, address and company information and legal pages, depending on the template that you choose.
By default, the width for each of these sections is 100% of the browser width. In Global Margins, you can adjust whether you want to keep the default or reduce some or all of the sections to 80% of the browser width.
Logos
There are three different logos you can add to your Little Big Shop:
- Site logo: This logo will appear on the header of your shop and any pages you add.
- Invoice Logo: An ‘invoice logo’ is an alternative logo to your website one. One reason this may be required is if your website logo is white, and it doesn’t show up on the white background of the invoice.
- Browser icon (Favicon): A favicon is the small custom image that appears in the browser tab, and is associated with a particular website or brand. It is usually a small square icon, as small as 16×16 pixels in size.
Site logo
Personalise your shop with your branding, by uploading your own logo.
- Click on the image
- A box will appear with 2 actions – click on the first icon ‘Replace’
- Then either click on the ‘Drop Image’ section or drag an image directly into the box
Browser Icon (Favicon)
A favicon is the small custom image that appears in the browser tab, and is associated with a particular website or brand. It is usually a small square icon, as small as 16×16 pixels in size.
Products Grid Layout
The settings for ‘Products Grid Layout’ refer specifically to the main shop page, or catalogue, which contains thumbnails of all your products. Changing the grid layout will determine how your catalogue is displayed.
Product grid layout
- Masonry: Thumbnail images of your products are a fixed width, but the height is fluid. This means that each row is not symmetrical and some images will display longer and others shorter (based on whether the image uploaded is portrait or landscape).
- Tile boxes: Thumbnail images of your products are fixed height and width. Each row is symmetrical, and your images are cropped in this view, but the full image will display once in the product detail.
Maximum items per row
The items per row refers to the number of products that will be displayed in the main shop/catalogue view. You can select 3, 4 or 5 items/products to display for each row. The lower the items per row, the larger the thumbnail image will be.
Note: your shop and website are responsive, so the number of items/products per row will increase or decrease depending on the width of your browser, and can reduce down to 1 item if the browser width is narrow or is displaying on a smaller mobile device.
Typography and Colours
In this section, you get to set the overall font you want to use, as well as the font colour, link colour and background colour. The settings you make here are made across the whole of your website. The ‘PREVIEW’ section shows how your choices will appear.
Typography
To change the font, click on the arrow to the right of this field and click on a font to select it.
Colour palette
Site background colour, Text and Link
- One way to change the background, font or link colours is to enter a HEX Code. A hex code is a way of specifying colour using a six-digit combination of numbers and letters. To enter the hex code, click into the field and type the HEX code in.
- In the example below, we’ve changed the site background colour to #ffe6ee. The light pink colour background is now visible in the ‘PREVIEW’ section.
- If you click on the colour dropdown, a box will appear to create a custom colour.
- The ‘Basic Colors’ tab gives you colour starting points, and you can adjust the lightness/darkness by moving the toggle. Once you’ve made a change to a colour, make sure to click on either the colour name or ‘Select’ to apply the colour you’ve created.
- The ‘Saved Colors’ tab will save any previous colours you’ve applied and saved.
- The ‘Advanced’ tab gives you the options to adjust Hue, Lightness and Saturation. As you make changes, the colour in the Preview changes. Make sure to click on ‘Select’ to apply the colour you’ve customised.
Navigation
The selections you make to this section will determine the font type and colour that is applied to the elements below, across your website:
- Header: this is the top of your website which contains your logo, page links and social icons (depending on the type of header you’ve chosen)
- Footer: located at the bottom of your website and contains links to Legal pages, company info and links to pages (depending on the type of header you’ve chosen)
- Utility section: this is the section above your header, which contains links to Log in/Register for your customer, as well as the Search bar, Wishlist and Cart/bag
- Category navigation: this sections sits under your header, which contains the categories you’ve created for the products in your shop
Buttons
In this section, you can select the primary and secondary colours for the buttons in your shop/website. You can also select the text colour and outline colour of your buttons. The outline buttons link/text takes the same colour of the outline (border).
Advanced CSS
For users that know CSS code, you can add custom css here to override the default Little Big Shop css.
As a word of caution, don’t enter anything here unless you have some coding knowledge.
Banner
In this section, you can add a banner to the top of your website.
To activate this option, click on the toggle to the right of ‘Banner’.
You will notice the text section contains a piece of code. If you wish to add a link to your banner, do not delete this code.
To add a link, delete the text that says ‘link’ and add your URL.
To change the copy, delete the placeholder copy and add your own.
In the below example, we’ve changed the banner to ‘Check out our new blog: littlebigshop.com.au’. This is also reflected in the ‘PREVIEW’ section.
In this section, you can also change the text, background and link colour of your banner, as well as the font, font size and text alignment.
DON’T FORGET TO SAVE
