Back
How to Customise the Store Page

The Store Page is automatically added to your website, along with the Shopping Cart Icon, when you enable the Store option on your Sitebeat Editor.

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

If you haven't enabled the Store option yet, follow the steps below to get started:

  1. Log In to access the Sitebeat dashboard.
  2. Under My Sites, click the Edit Site option on the website or project card that you wish to manage.
  3. On the Sitebeat Editor, click Store from the left-side menu and click Get Started, then wait a few seconds for the Sitebeat Editor to add a Store Page and Shopping Cart Icon to your website.

Click on the corresponding links below to jump to the steps that you need to customise your Store Page:

Edit the Page Name

The Page Name is set to Store, by default. Edit this using the following steps:

  1. On your Sitebeat Editor, click Pages from the left-side menu. A list of all your Pages will appear here.
  2. Hover your mouse pointer over Store and click the Gear Icon.
  3. Replace Store with the Page Name you prefer, e.g. Shop.

Reorder Your Pages

The Store Page is strategically placed next to the Home Page by default for higher Store traffic and sales. However, you still have the artistic freedom to be different and create your own trend. Reorder your Pages using the following steps:

  1. On your Sitebeat Editor, click Pages from the left-side menu. A list of all your Pages will appear here.
  2. Under Pages, drag and drop Store to its new placement.

Customise the Store's Background

Change the Background of your Store Page using the steps below:

  1. Click on the system-generated Store Page on your website menu to open it.
  2. With the Store Page open on your Sitebeat Editor, hover your mouse pointer over the right edge of the Page and click the Background Icon that appears.
  3. Set a Photo, Color, Video, or Map as your Background:
    Photo Click on the Photo tab on the Background pop-up box, then click Add Photo or click on the existing Photo (if any) to open the Upload box.

    • Upload - Drag and drop your image here or browse through your folders to add it.
    • My Photos - Select an image that you've recently uploaded in Sitebeat.
    • Clouds - Connect to an online service to access your Photos.
    • Free Photos - Use any of our Free Photos.
    Color Click on the Photo tab on the Background pop-up box and delete the existing photo (if any), then click the box to the right of the Color option to set your preferred Background Colour and click Apply.
    Video Click on the Video tab on the Background pop-up box, then enter the Video Link in the space provided.
    Map Click on the Map tab on the Background pop-up box, then click Edit Map.

    • Address - Enter the address to show in the Map.
    • Type - Select the type of Map to use from the drop-down list.
    • Zoom - Click and drag to adjust the zoom visibility of the address in your Map.

    Note: For Photo, Video, or Map, click the box to the right of the Overlay option to select an Overlay Color, then use the bar below it to adjust its Opacity.

Customise Layout, View, & Design

Customise the Layout, View, and Design of your Store Page with the following steps:

  1. Click on the system-generated Store Page on your website menu to open it.
  2. With the Store Page open on your Sitebeat Editor, hover your mouse pointer over the Product's Display on your Page, then click the Edit option that appears on its top-right corner.
  3. On the pop-up box that appears, customise the following:
    Layout Under the Layout tab, set the following options:

    • Category - Set the specific Category of Products to show on your Page.

      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.
    View 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.
    Design 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, then click Apply.

      Use the bar under Border to adjust its thickness.
    • Products Spacing - Set the fixed distance between Products within your Catalog.

You’ve just customised the Store Page on your Sitebeat website.

Was this helpful?
100% of people found this helpful.
-