Page Builder | Product Components

Page Builder has launched the Product Type component. This powerful component helps you easily create beautiful product cards that display product information in a visually appealing and intuitive way. These cards effectively capture customers' attention, encourage purchase decisions, and thereby enhance your store's conversion rate. We invite you to try the Product component to optimize your store's browsing and shopping experience.

Add Product Type Cards to Your Theme

Step 1: Add a Card

• Log in to your Shoplazza admin, go to Online Store > Theme Editor > Edit to enter the theme editor. Scroll to the bottom of the card list on the left panel, click the Add Card button, and then select Advanced Card Plaza in the secondary panel.

Step 2: Advanced Widgets

• In the Advanced Widgets, click the primary category "Product" in the card section. From the list, select the desired card template and click on it to automatically add the card to your theme. This will also open the Page Builder editor, allowing you to edit the card.

Step 3. Bind the data source

• On the canvas, click to locate the "Product List" group. In the left configuration panel, click Select Products/ Select Collection. Complete your selection in the pop-up window to bind the products.

Step 4. Save the card

After finishing the edits, click the "Save" button at the top right of the Page Builder editor to save the card to your theme.

Step 5. Publish the theme

After finishing the theme edits, publish the theme to make it effective on the storefront.

Component Description

1. Basic Product Component

2. Product Blocks / Product Lists

Overview of General Editing Operations

Customizing Product Type Cards

The product list/single product components by default only include the product image, title, and price to allow for quick setup. At the same time, they also support custom combinations of product components, adjusting component styles, and layout customization.

1. Add Product Components

Product components are located in the left component panel. Switch to the "Product Components" category, select the desired component (e.g., Discount), and drag it onto the canvas, placing it within the product block of the product list.

2. Remove Product Components

On the canvas, click to select the product component you want to remove, then click the delete icon in the top-left quick actions to delete it.

3. Adjust Component Style

Example: To modify the product title's color or font size, click to select the product title component on the canvas. In the left configuration panel, switch to the Style tab, then click the text color picker to customize and choose your desired color.

4. Adjust List Layout

Common Setup Tips

• Flexible Adjustment of Product Component Layouts

Changing Product List Layout

• Different components within the product module have default layout styles, such as horizontal/vertical product blocks or horizontal product lists. Product information is displayed in a default two-column layout (left and right). You can flexibly adjust the layout using the capabilities of the product block container.

1. Add or Remove Sub-Containers: On the canvas, click to select a single product container (blue outline). In the left-side configuration panel, click Add/Delete Column, and the corresponding sub-containers (yellow outline) within the single product container will be added or removed accordingly.

2. Add or Remove Sub-Containers: On the canvas, click to select a single product container (blue outline). In the left-side configuration panel, click Add/Delete Column, and the corresponding sub-containers (yellow outline) within the single product container will be added or removed accordingly.

3. Switch Sub-Container Arrangement Direction: On the canvas, click to select a single product container (blue outline). In the left-side configuration panel, click Switch Arrangement Direction to quickly complete the operation. Example: Change a horizontal arrangement to a vertical arrangement.

• Product Information Layout Adjustment

In the product component, the arrangement of product information can only follow the parent container (the sub-container of a single product – yellow outline) and supports a single direction: horizontal or vertical. If you want to create a layout where the overall arrangement is vertical, but the price and discount components are arranged horizontally (as shown in the figure below), additional configuration is required.

1. On the canvas, click to select the sub-container of a single product (yellow outline). In the left-side component panel, drag a 2-column layout container into the sub-container of the single product container.

2. Drag the Price and Discount components into the left and right sub-containers (columns) of the upper layout container, respectively.

3. Click to select the left sub-container of the layout container, then drag the container's size adjuster to set an appropriate spacing between the Price and Discount components.

Data Binding

All product components support binding to a product data source. For a single product component, the data source must be bound within the single product container. For a product list component, the data source must be bound within the list container. Once bound, all product components inside (such as product images, prices, etc.) will follow the parent container's data source and cannot be modified individually.

• Binding Product Image / Price / Discount / View Product Details to a Product Data Source (Example: Product Price):

Click to select the product price component on the canvas. In the left-side configuration panel, click Select Product, then check the products you want to bind in the popup window.

• Binding a Single Product Component to a Product Data Source:

Click to select the single product container on the canvas (blue outline). In the left-side configuration panel, click Select Product, then check the products you want to bind in the popup window.

• Binding a Product List Component to a Product Data Source (Example: Vertical Product List):

Click to select the product list container on the canvas (blue outline). In the left-side configuration panel, click Select Product, then check the products you want to bind in the popup window.

At this point, all product components within the single product container will follow the product data source bound to the parent container, and the "Select Product" option will be disabled, preventing any changes to the product data source.

FAQ:

1. How to understand the reserved padding for Single Product and Product List components?

A: Both Single Product and Product List components consist of a container plus product information components (such as product images, product prices, etc.). The container components have a two-layer box structure. Taking a Single Product as an example: there is the parent container (blue outline) and the sub-container (column – yellow outline).

When components are dragged onto the canvas, the reserved padding is only for convenience in selecting and editing within the editor. It will not be displayed as padding on the customer-facing side (C-end). Therefore, the padding and margin configuration values of the component are initially set to 0. Only after manually entering padding values will the styles take effect on the C-end.

2. Why can't the Product List component display the loading effect in the editor after binding a product data source?

A: The Page Builder editor environment does not support previewing the loading effect. It will load correctly in the theme editor and on the customer-facing side (C-end).