How to Use Product Element in Weebly?
Weebly offers simple way to sell your products online and convert your site into an online eCommerce store. Adding products to Weebly store is done using a Product element available under "Commerce" section. You can just drag and drop the element to your site content area to add products. When a product element is dragged and dropped, you will see the below popup window offering you the possibility of connecting any existing products or adding a new product.
Clicking on "New Product" button will take you to the "Add Products" section under "Store" tab. This means product element is no more used to create a product (as previously available) and is used to link the already created products.
Enabling Legacy Mode
Weebly offers new and old style for the product element which can be enabled under "Store > Settings > Display". Enable or disable legacy mode to toggle between the new and old style as shown in the below picture. If the legacy mode is switched on then all existing and new product elements will be switched to an old style.
Customizing Product Element When Legacy Mode is On
You can customize the product element in order to suit your site style. Click on the element to see the options available for customizing. The options will vary based on legacy mode settings.
Display Style Selection
There are two display style options available under “Display Style” drop-down.
- Product block
- Normal style
The normal style can be a smaller, regular and large size as per your selection. Click on the below images to see the enlarged look of each style.
Weebly Product Element Display Styles
Click on the “Advanced” link to see the further customizing options for the product element. Following are the three options available:
- Show Image
- Show Price
- Show Description
Disabling any of the checkbox will hide that option from the element.
Clicking on the “Button” link will provide two options.
- Button Type
- Button Size
You can select button type as “Buy Now” or “View Details” and choose size as small or big.
When Legacy Mode is Off
Similar customizing options are available for the product element when the legacy mode is off. The major difference here is that you don’t have an option to change the display style.
The look of the new product element will also be different based on the legacy mode is on or off.