Using the Storefront Editor

We know that it's quite a hassle customising your storefront website if it involves a lot of coding. So, we have made a huge leap forward to revamp our white-labelled storefront website to make it easier and quicker to build and at the same time appealing to your customers. We have also made it into a responsive design that will automatically adjust to all screen sizes and devices.

Our new storefront has been developed using tried and tested patterns and design that we know will significantly increase your conversation rate and bookings through smart upsell cards on the shopping cart flow.

In this section, we will be guiding you through every single step you need to take to customise your storefront in less than an hour. We have also added videos to help you navigate the Storefront Editor seamlessly.

Please note, at this time the body area of each product page cannot be updated or changed, but will be coming in a future update.

Setup Website Preferences

Theme Settings

The first thing we need to do is set up the theme of your storefront by setting your logo, favicon and main theme colour.

1. Log in to the Reseller Console.
2. Hover your mouse over Account Settings, then Storefront and select Storefront Setup.
3. Click on Launch Editor.
4. At the bottom left side, click on Website Preferences.
5. Click on Upload Logotype for your Storefront Logo.
   Note: Make sure that the image size does not exceed 256x256, 1MB and is in .svg, .png, or .jpg format
6. Click on Your Favicon for your Storefront Favicon.
   Note: Make sure that the image size does not exceed 32x32 and is in .ico format
7. Select the main colour of your storefront by clicking the Colour picker icon.
8. Click the drop-down menu to select the font type for your Heading and Body Font.
9.  Press the Save button

Add Menu Items

This feature will allow you to add up to 2 custom pages that redirect to the services you offered on your existing website. To do this, follow the instructions below:

1. Log in to the Reseller Console.
2.  Hover your mouse over Account Settings, then Storefront and select Storefront Setup.
3. Click on Launch Editor.
4. At the bottom left side, click on Website Preferences.
5. At the top, beside Website Preferences, click on Navigation.
6. Click the blue plus icon to add a new menu.
7. Enter your title and URL, and select your icon for that menu.
8. Press the Submit button.

SEO

We know how important it is to your business when you have frequent visitors to your website and to be found online. To add your SEO information to the Storefront, simply enter the Meta Title, Description, and the Keyword(s) that will allow the Storefront to be found by all search engines.

This area is to set global SEO settings that will affect all page of your Storefront. To set SEO page by page, please see the guide here.

Custom HTML Snippet

Another awesome feature we have added to our white-labelled Storefront is allowing you to integrate any HTML code you need. This will allow you to add Google Tag Manager control, tracking code and software or live chat widgets into your storefront as another means of communication with your customers. Simply add the HTML snippet of your third-party live chat software and you are good to go.

Updating your Storefront Contact Information

To make sure that your existing and potential clients get to reach you whenever they have questions or need help, it is imperative to update your contact information that is visible on your website.

1. Log in to the Reseller Console.
2. Hover your mouse over Account Settings, then Storefront and select Storefront Setup.
3. Click on Launch Editor.
4. At the bottom left side, click on Contact US.
5. Select the settings that you want to customise
   • Phone Header - allows you to display/remove your phone number at the top of your page
   • Header Banner - allows you to customise your title, description and banner animation settings. 
   • Page Form - allows you to add/modify/remove contacts by clicking each contact form.
   • Contact Footer - allows you to select the contacts that will appear at the bottom on all pages
6. Click the Save button every after the changes you make. 

Now that we have gone through the basic parts of setting up the theme of your storefront, it is now time to focus on customising each page that will reflect your brand and identity.

Customising your Home Page

TLD Placeholder

You can now change the default TLDs advertised on your Home page using this feature. Simply do the following:

1. Log in to the Reseller Console.
2. Hover your mouse over Account Settings, then Storefront, and select Storefront set up.
3. Click on Launch Editor.
4. Click on the Home page.
5. Click on TLD Placeholder. 
6. Click the TLD you want to change and use the search bar to look for your TLD.
7. Tick the radio button beside your desired TLD and then press the Save button. 

Carousel

You can add and edit up to 3 Carousel slides on your homepage to make it stand out when promoting your site. To achieve this, do the following:

1. Log in to the Reseller Console.
2. Hover your mouse over Account Settings, then Storefront and select Storefront Setup.
3. Click on Launch Editor.
4. Click on the Home Page.
5. Click on Carousel.
6. Hover your mouse on each slide and click Edit the slide or click the + icon to add a new slide.
7. Upload your custom image (or select from one of our preset images!), enter your title, link to and button name then press the Save button.

Product Cards

We have added the Product Cards feature on your homepage to highlight to your customers the best products you would like to sell or that they might need. A minimum of 3 product cards is required. Simply do the following:

1. Log in to the Reseller Console.
2. Hover your mouse over Account Settings, then Storefront and select Storefront Setup.
3. Click on Launch Editor.
4. Click on the Home Page.
5. Click on Product Cards.
6. Select the products you would like to appear on your homepage by ticking the boxes on the left side of each product.
7. Drag the Products up to and down to change the order priority.
8. Click the Pencil icon to enter the Card name, Description, and Button Name for the product card.
9. Click the Save button.

Customising your Product Pages

By default, preset themes and images have already been added to every product page. If you wish, all you need to do is update the Title and Description of each product page and your storefront is ready to go. But if you want to use your own images and text, you can also fully customise this area. Below are the steps to take for either of the two.

Set up your Product Page using Preset Images

1. Log in to the Reseller Console.
2. Hover your mouse over Account Settings, then Storefront and select Storefront Setup.
3. Click on Launch Editor.
4. Select the Productyou want to edit on the left side menu. (For example, click + Hosting and select DNS Hosting.)

   Note: You won't be able to edit the Product if it has been disabled inside your Reseller Console. To enable it please refer to this article.

5. Click the Header Banner.
6. Click the Pencil icon and select your preferred preset image from a category.
7. Enter your Title and Description.
8. Click the Save button.

Set up your Product Page using Custom Images

1. Log in to the Reseller Console.
2. Hover your mouse over Account Settings, then Storefront and select Storefront Setup.
3. Click on Launch Editor.
4. Select the Productyou want to edit on the left side menu. (For example, click + Hosting and select DNS Hosting.)

   Note: You won't be able to edit the Product if it has been disabled inside your Reseller Console. To enable it please refer to this article.

5. Click the Header Banner.
6. Click Custom from the top.
7. Upload your custom image for that product page. It is recommended to:
   • Use images that has a white or fade to white background on the left side so the overlay text is easily readable.
   • Upload a different image per device (desktop, table, mobile), or images may be cut off due to resizing.
   • Use 1920x592 for desktop, 1024x384 for tablet & 425x231 for mobile images.
8. Click the Save button.
9. Enter your Title and Description.
10. Click the Save button.

Set up your Product Page SEO

Every page on your site will have its own individual URL, so we have made sure to also add SEO to each of your pages so they can get a chance to rank up as well apart from your website’s main page.

1. Log in to the Reseller Console.
2. Hover your mouse over Account Settings, then Storefront and select Storefront Setup.
3. Click on Launch Editor.
4. Select the Product you want to edit on the left side menu. (For example, click + Hosting and select DNS Hosting.)
5. At the top, click Settings beside Live Preview
6. Enter the Page Title, Description, and Keywords
7. Click the Save button.