How to Use the Catalog Feature

The Catalog Feature allows you to easily display a listing of all your products on your website page or display products under a specific Category, giving your visitors easy browsing and shopping without having to go to your actual Sitebeat Store.

Note: The Store option is only available for the Sitebeat eCommerce plan and will not appear on all other Sitebeat plans. Suppose you want to set up an online store with complete SSL protection as well as easy setup and monitoring of products and orders. In that case, you will need to upgrade your current Sitebeat plan or purchase a new Sitebeat eCommerce plan.

Add the Catalog Feature on any website page in Sitebeat and customise it using the steps below:

  1. Log In to access the Sitebeat dashboard.
  2. Under My Sites, click the Edit Site option on the website that you wish to manage.
  3. Note: If you want to edit a new site, you have to unpublish the current website and make your new site as your primary website.

    Under My Sites, click the [...] Ellipsis Icon on the top-right corner of the website to unpublish the current site. Click Unpublish Site, and then click Yes, Unpublish to confirm.

    Under My Domains, click the [...] Ellipsis Icon of the website that you want to replace as your primary website, then click Replace Primary. In the pop-up window, select the domain of the new website in the New Primary Domain list, then click Replace Primary. You can also click the Domains tab under My Sites to perform the necessary steps mentioned.

    You can now edit the new site that you wish to manage.

  4. On the Sitebeat Editor, click Build from the left-side menu, and then click Online Store.
    Note: If you're using Sitebeat eCommerce but can't find the Online Store option, you may follow these steps first to get started with your store:

    1. Click Store from the left-side menu of your Sitebeat Editor.
    2. Click the Get Started button, and then wait a few seconds for the Sitebeat Editor to add a Store page and Shopping Cart icon to your website.

    Once done, you can go back to Build. The Online Store option will now be available.
  5. Drag and drop the Catalog icon onto an available placeholder on your website. Hover your mouse pointer over it, and then click Edit.
  6. Under the Layout tab, customise the following options:
    Category Set the specific Category to show in your Catalog using the drop-down.

    If the option is greyed-out, this means that you haven't created any Category yet to choose from. Learn how to create a Product Category.
    On-Click Set the action to take once visitors click on your product.
    Products Per Row Set the number of products to display per row.
    Total Rows Set the total number of rows you want for your layout.
  7. 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 We recommend showing the Product Price, however, you also have the option to hide it here.
    Buy Now Button Choose whether you want to Show or Hide this button.
    Image Aspect Ratio Set the fixed Aspect Ratio to use in displaying your product photos.
    Hover Effects When enabled, you may customise where to apply the effect and which effect to use.
  8. Click on the Design tab to customise the following options:
    Style Hover your pointer over the image under Style, then click Change Style. Select the option you want for your Catalog from the expanded list.
    Border Click on the box to the right of the Border option to select a border color and adjust its opacity, and then click Apply.

    Use the bar under Border to instantly adjust its thickness.
    Products Spacing Set the fixed distance between products within your catalog.

You’ve just customised the Catalog Feature on your Sitebeat website.

Other Actions:

  • To resize the Catalog Feature’s placeholder horizontally, hover your mouse pointer over its left or right edge, click the [↔] Arrow Icon that appears, and then drag it sideways.
  • To move a Catalog Feature, hover your pointer over it, click the Moving Tool on its upper edge, and then drag and drop it onto a different placeholder on your page.
  • To delete a Catalog Feature, hover your pointer over it, and then click the [x] Delete Icon on its top-right corner.
Was this helpful?
100% of people found this helpful.