Knowledge Base

How To Use the Catalog Feature in Website Builder

The Catalog Feature is an Online Store Feature that lets you easily display a listing of all your Products on your website page, along with their details, or customise it to show only the Products from a specific Category, allowing your viewers to easily browse through it and shop 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 Catalog Feature in Website Builder, 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 Catalog 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:
    Category Set the specific Category of Products to show in your Catalog, or select All Products.
    On-Click Set the action to take once visitors Click on your Product.
    Products Per Row Set the number of Products you want to be displayed per row.
    Total Rows Set the total number of rows you want for your layout.
  12. On the same pop-up box, click on the View tab to customise the following options:
    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.
    Price It is recomemended to Show the Product Price, however, you also have the option to Hide it.
    Buy Now Button Choose whether you want to Show or Hide this button.
    Image Aspect Ratio Set the fixed Aspect Ratio of your Products' photos.
    Additional Image on Hover Choose whether you want to Show or Hide this add-on detail when viewers hover over the Products.
    Product Spacing Set the fixed distance of your Products from one another, the way you want it to appear in the layout.
  13. Click on the Design tab, then hover your cursor over the image and click Change Style.
  14. Select the Style you want for your Catalog from the expanded list.

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

Other Actions:

  • To delete a Catalog 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 Catalog 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 Catalog 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