Getting Started, Step 3 - Homepage Design

Click to go back to Step 2 - Add Products.


Homepage Design

Note: to get to this section through the menu choose Menu > Customise > Theme Pages.

In the Theme Pages section you can customise your Homepage as well as other pages in your store. In this guide we’re going to concentrate on the Homepage design, but if you want to explore some of the other settings there is a dropdown menu in the top-right of the page. This dropdown will let you edit a range of settings for your store, including things like turning product image zoom on or off (it is ON by default), what details to show on the contact page, and more.

Your Homepage content will by default have no Header or Supporting Images present. The process for adding them is the same, so we’ll start with the Header Image.

Important note: This document describes the Kong Default Theme - if you have another theme installed there may be a different setup process. Consult your theme’s documentation for more details.


Header Image


Click Add Image and select a file from your computer to upload. In the dropdown below you can decide whether it links to a collection, product, store page, an external link or no link at all. If you select a product or collection it will use the first image from that product or collection, but you can add a different image in its place. If there is an image already there you will get a dialog box letting you choose whether to replace the image, keep the image or cancel. By default Kong will display the name for a Collection and the name and Price for a Product. You can also add an Image Caption, which will override the name with your custom text.

Click Add Image and Kong will ask you what you would like this image to link to. You have a wide range of options so you can customise your homepage to fit your business’s needs. The options available are:

  • Collection
  • Product
  • Custom Store Page
  • Built-in Store Page
  • External Link
  • No Link

We’ll start by choosing Product. Kong should automatically select the product we created in the previous section, and this will pull in the product image (if your product has multiple images it will select the first one). You can also upload a custom image - for example, you might have designed a banner image featuring a product or collection that you want to use instead of the normal image. To do this click Choose Image and select the file from your computer. You will get a confirmation message telling you that Uploading a new image will replace the existing one - click Replace Image to confirm and upload the new one.

You can also add an Image Caption. This is text that will display when a customer hovers their cursor over the image. If this is blank, Kong will display the Product (or Collection) Name.

Once the first image is set up you can add additional links/images to the Header Images section. You can also go back and edit the existing image settings at any time. You can delete an image by clicking on the trashcan icon. If you delete all Header Images then the section will not appear on your homepage. You can also drag and drop to reorder the Header Images.

Below that you have the option to turn Auto-rotate on and choose the slide length in seconds. If this setting is on your images will automatically slide every x seconds. If it is off a user will need to click left and right to look through the Header Images.

Remember, you can use product images for these Header Images, or you can design and upload custom banners and choose where they link to - for example you can have a banner linking to a collection of sale products, and another linking to a single new product. Selecting No Link is useful for showing branding and graphics.


Supporting Images


Adding supporting images uses the same process as Header Images, but they are displayed smaller on the homepage. You can add, edit, delete and reorder in the same way as above.

For Products Kong will default to showing the product name and price, and the Collection name for a collection. Entering a caption will override this information with whatever text you choose.

If you turn the Supporting Images Rollover State OFF then the images will not be clickable as links. If you want users to be able to click directly into the link (e.g. product, collection, store page or external link) then leave the Rollover State button ON.

The Number of Columns setting changes how many Supporting Images will be shown side by side. Please be aware that this will depend on the user’s screen - if they have a lower resolution screen or the site is in a window the number of columns displayed to them may be lower. This is your Responsive storefront changing to make best use of the customer’s screen.


Homepage Text


At the bottom of the page you can customise the homepage strapline and description. This might be the first time someone sees your store, so make it punchy and memorable - let them know what you do and why they should buy from you. It can also help your ranking in online search so it’s well worth taking the time to fill it in.

Click Save to commit your changes and you’re done! Click Menu > Back > Dashboard to get to the next step.


Go to Step 4 - Customise Theme

Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk