Knowledge Base

How To Use the Product Feature in Website Builder

The Product Feature is an Online Store Feature that allows you to instantly display and highlight a certain Product on your website page, and lets your viewers shop for it without having to go to your actual Website Builder Store.

Important: The Store option is only available for the eCommerce Website Builder plan and will not appear on all other Website Builder plans. If you want to easily set up an Online Store with complete SSL protection and easy setup and monitoring of Products and Orders, you will need to upgrade your current Website Builder plan or purchase a new eCommerce Website Builder plan.

To customise the Product Feature in your Website Builder webpage, follow the instructions below:

  1. Click Sign Up / Log In at the top of this page.
  2. Select Account Manager from the drop-down menu.
  3. Enter your username and password then, click Log In.
  4. Click the Visit My Account button.
  5. Click Website Builder from the menu at the top of the page.
  6. Click on the Website Builder plan that you wish to manage.
    If you only have one Website Builder plan, you will automatically be redirected to its management page.
  7. Hover your mouse pointer over the [+] Icon at the upper right-hand section of the page and click Build Now.
  8. On the Sites page of your Website Builder Dashboard, hover your mouse pointer over the project/website that you would like to customise and click Edit.
    Or, if you haven't started one yet, click the Create Site button at the top-right corner, then select a template and click Create This Site to start building one.
  9. On the Website Builder Editor, click Build from the left-side menu and click Online Store to expand the list.
  10. Drag and drop the Product icon onto an available placeholder on your website, hover over it and click Edit.
  11. Under the Layout tab, customise the following using their respective drop-down lists:
    Product Select the Product that you want to display on your website.
    SKU SKU, or Stock Keeping Unit, is the unique number assigned to each Product for Inventory Management.
    Set whether you want to Show or Hide your Product's SKU.
  12. On the same pop-up box, click on the Settings tab to customise the following options:
    Button Label Hover cursor over the option under Button Label and click Edit, then replace the text with your desired label to modify it.
    Image Aspect Ratio Select the Aspect Ratio of your Product's photo.
    On-Click Set the action to take once visitors Click on your Product.
    Product Details Enable this option if preferred, then select which action would prompt the Product Details to display.
  13. Click the Design tab to customise the following:
    Hover Effects Enable this option if preferred, then set where you'd like to apply the effects from the first drop-down list, and set what type of effect to use from the second drop-down list.
    Style Hover your cursor over the image and click Change Style, then select your preferred style from the expanded list.

Congratulations! You have just customised your Product Feature in Website Builder.

Other Actions:

  • To delete a Product Feature, hover your mouse pointer over it and click the [x] Icon that appears on the upper-right corner of its placeholder.
  • To move a Product Feature to another placeholder, hover your mouse pointer over it and click the bar that appears above it, then drag and drop it to a new placeholder.
  • To resize the Product Feature's placeholder horizontally, hover your mouse pointer over its left or right vertical lines until it becomes [↔], click on the line then drag to the left or right to adjust and release when done.
Did you find this article helpful?

* Your feedback is too short