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.
Add an Existing or New Product in Weebly
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.
Adding Products in Weebly Store
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.
Enable Legacy Mode for Weebly Product Element
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.
Product Element Display Style
Weebly Smaller Product Display Style
Weebly Regular Product Display Style
Weebly Larger Product Display Style
Weebly Product Element Display Styles
Weebly Product Block
Advanced Weebly Product Element Options
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.
Weebly Product Element Button Style
Button Style
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.
Weebly Logacy Mode is Off
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.
Example of Weebly’s Product Element
Old Style – Legacy Mode is On
New Style – Legacy Mode is Off
Leave a Reply
Your email is safe with us.