Product

The Product element allows you to add a product card to any project page except the Store page.

Adding Product

Option 1

Hover over the desired section and click Add Element:

Choose the Product element from the modal that appears:

After you choose the element from the list, drag it to the desired section and drop it using the grid.

Please Note: There's a limit of 25 Product elements per page. If you need to add more products per page, please use the Catalog element.

Option 2

Hover over the left sidebar of the Site Editor and click Build (+) button:

Choose the element:

After you choose the element from the list, drag it to the desired section and drop it using the grid.

Moving and Resizing Product

Please refer to the Elements Management (New Grid) article to learn more about moving and duplicating elements.

Customizing Product

To edit, duplicate or delete the element, click on it and switch between the buttons that appears in its toolbar:

Editing the Product

Click the product to display the Edit button to be able to modify the product's View and Design:

View Tab

Product Picker. Click the Select button to open the pop-up and select a product to display.
Image Aspect Ratio. Choose the image aspect ratio from the drop-down.

Switches

Configure the data on the product cards by turning on/off the following switches:

Banner. Turn on the banner toggle to enable the product banner.
Badges. Turn on the Badges toggle to enable the On Sale, Sold Out, Few Left, and Digital badges for your Online Store.

On Sale. If the product is on Sale, its price changes, and the relevant information and badge are displayed.
Sold Out. If no items are left, the Add to Cart button will be hidden, and the Sold Out badge will be placed first (if there is no On Sale badge).
Few Left. The Few Left badge automatically shows when less than ten items are in stock.
Digital. You can set this badge to show that the product is digital and that there are no shipping options.

Product Name. The information will be displayed from the Ecomdash dashboard.
SKU. This will load in your SKU set from the Product Details screen. If you want to track this under a different ID, you can change it in the Ecomdash dashboard.
Price. The information will be displayed from the Ecomdash dashboard.
Excerpt (short description of the product). The information will be displayed from the Ecomdash dashboard.

Buttons

The Button settings include several options:

Turn Off Button. Turn on the toggle to show the Button on a product card. Turn off the toggle to disable the Button and remove it from the card:

Button Text. Specify the text that will appear on the Button.
Full-Width. Switch the Full-Width toggle on to stretch the Button across the entire width of the card:
On Click Event. Choose the following action from the drop-down: Buy Now, Add to Cart, Open Product Page:

Buy Now: Opens a cart with added product.
Add to Cart: Adds a product to the cart.
Open Product Page: Opens the Product Page with details.

Please Note: Clicking on a card (for example, on a photo) will open the Product Page.

Modifying the Design Tab

Background. Set the background color of the product card by clicking the Square icon on the right.
Border. Change the value in the Slide Control to set the border width and select the color by clicking the Square icon on the right of Slide Control.

Please Note: If the value on the Slider Control is set to zero, the Border element is disabled.

Hover Effects. Hover Effects add dynamic visual effects to the website. It helps to create more engaging and modern experiences for visitors. Enable the toggle, and choose the following options: Show Additional Images, Highlight Border, Highlight Background, Highlight Shadow.

Duplicating the Product

To duplicate the product, click on the element and choose the Duplicate button that appears in its toolbar:

The duplicate of the element will appear immediately.

Deleting the Product

To delete the product, click on the element and choose the Remove button [Bin] that appears in its toolbar:

The element will be removed immediately.