How to customise your store design

Here at Techsembly, building and designing your store page is that easy. Follow this step-by-step guide to begin building your own property store.

To access the page builder, follow these simple steps:-
​Step 1: On the main admin CMS navigate to and click on the ‘Stores’ tab on the left-hand menu side.
​
​Step 2: Navigate to the store in question and , click on the link ‘ Page Builder’, on the right hand side.

This will open up the page builder interface that corresponds as direct representation of the current front end storefront.

Like the CMS, the page builder has a menu tab on the left-hand side:

Each of the segments on the left are elements of the homepage and can be dragged and dropped into place with respect to their positioning on the storefront home page.
They are aligned from top down in the same linear aspect as that of the home page.
​
When clicking on each of the elements it will open up that element to reveal its editing features, as in the example below for the custom carousel.

Click ‘+Add New Item’ to add each new item, although if you add more elements than number of images, then the products revert to a scrolling carousel on the storefront.

Brand logo tells people about your business. It is a visual representation of your brand and we hope to help you communicate that to your visitors. Add your brand logo by selecting ‘Logo’ on the side bar. A pop-up box (as shown below) will ask you to upload your logo as image and the image alt text.

Page menu appears at the top of your page. The menu contains link to each of your pages and is great for navigation. Add your links by selecting ‘Nav Bar’ on the side bar. A pop-up box (as shown below) will show you how to build your menu.

The field ‘Name’ will appear on your menu bar with the associated link entered in the ‘Link’ field. If you already have products, categories or pages set up, you have the alternative to select the them from the dropdown.

More often than not, your menu will have more than one link. To add, click on ‘Add New Item’ at the bottom of Menu Items. Fill in ‘Name’ and ‘Link' just like you did for the first one.

Once you have added all your links to the menu, click on ‘Save’ at the bottom to create. A success message with the menu bar will be displayed.

Image Alt Text - Text appears in place of an image on the page if image fails to load on user’s screen. You may input “Brand Logo” in this section.

Fill in the required text fields for headings. The number of images for the carousel refers to the number of mages that display on the website.
​
As one can see that each element on the left-hand side of the window, when clicked on, is opened in more detail on the right hand side that allows you to load images, links, products or categories.
Image: Allow images to be chosen from a file on your computer or via the media gallery in the CMS
​Image Alt Text: Allows one to add SEO text for each image that is loaded.
​Title: Add the title of each of the images to be shown.
​Link Banner: Allows the image in the banner to be linked to either a Products, Categories or any Pages link. When you click on any of these three links you may enter the relevant product or category or hyperlink in the link banner filed.
​
To help, start typing the category or products and a list of the those items will be provided in which to choose. Alternatively, if you add ‘#’ the page will return itself.
​

When you are pleased with how the page menu looks, we can have a look at the page footer.

Just like page menu, page footer contains links to reference pages. In the page footer, we encourage you to include your social media accounts for visitors to stay connected with your business. To build your footer, select ‘Footer’ from the side bar.

The field ‘Name’ appears as the header of the section in the footer. In the ‘Type’ dropdown, select between links, site configurator and social icons. ‘Type’ reflects what that section will be in the footer - see image.

In this newly added section, you wish to add site configurations. Fill in ‘Name’ and select ‘Site Configurator’ as Type. By adding site configurator, visitors of your page will be able to change the site language and currency to their preferred choice.

To customise your page, click on ‘Add New Section’ at the bottom of the sidebar. You will see multiple options (as shown below) as you add new section. Logo, Nav Bar and Footer are in the set up by default.

Hero Banner is a large web banner image pinned to the header section. It is usually placed at the top of the page and is often the first thing visitors see.
​

By selecting ‘Hero Banner’ and hitting the ‘Add Section’ button, you will now see it added in your sidebar.

Click on ‘Hero Banner’ on the side bar to insert banner image and information.

Link Banner - Insert URL of the page you wish the banner is linked to.

Click on ‘Save’ at the bottom once you’re done to preview your hero banner. A success message will be displayed.

Product Carousel allows you to show multiple products at the same time. It is an excellent way to showcase the latest or hot products in your home page.

By selecting ‘Product Carousel’ and hitting the ‘Add Section’ button at the bottom, you will see it in your side bar.
​

Similarly, click on ‘Product Carousel’ to add images and information you would like to display.

Carousel Heading - The heading appears at the top of your carousel section.

Title - Title appears at the bottom of the image in the carousel.

Once you have input the image and information for the first item, click on ‘Add New Item’ to populate the rest of the carousel.
​

You may add as many items you wish for the carousel. Click ‘Save’ at the bottom right once you’ve added all items.

Single Banner

While hero banner is pinned to the top of the page, a Single Banner can be added to any part of your page.

Similar to hero banner, select ‘Single Banner’ from the side bar to upload banner image and to fill in necessary fields.

Click on ‘Save’ at the bottom right and you will see the banner appearing on your page.

Multi Banner allows you to add up to 2 banner images in a section. The 2 images will be displayed next to each other in a row.

Upon adding ‘Multi Banner’, select it from the side bar and you will see the following by displayed. Upload your banner images and fill in the fields accordingly.

Once you are done with both banners, click ‘Save’ and you will be able to see both banners displayed in a row with the contents.

Info Text

Info Text allows you to add text such as introduction to your page. The section is useful as you will be able to plain text to your page.

To add text, select ‘Info Text’ from the side bar and you will see the following pop-up box being displayed.

Heading - The heading appears as the title of the section.

Click ‘Save’ once you’ve added the text and title in the respective fields. Your page will appear as the one shown below.

Lastly, add a Newsletter section for your page to stay in touch with your visitors.

Lastly to add the section, select ‘Newsletter Signup’. The section allows you to customise your lines to encourage more sign ups as well as button.

​

Once you’ve filled the fields, click on ‘Save’ and you will be able to see the section being displayed.
Lastly click ‘Publish’ in which to push all those changes to the storefront, which may sometimes take a few minutes before they are reflected.
​

Please Note: You have the ability to restore older, previous version of the page building by clicking on ‘Exit’ to get back into the main admin CMS, navigate back to ‘Stores’ and click on ‘Older Versions’.

Clicking on older version will allow you to choose from a drop-down menu, all the previous dated versions of the page builder that has been published.
​
Click on a previous version from the drop-down and then click ‘Preview’ which will open up a new page showing the version that was saved.

If you decide to restore the version you have previewed then simply click ‘ Restore this Version’ on the top right hand side.