This is perhaps the most important part of the website building process if you're running an eCommerce store - adding products to it 👩 Under the Elements tab on your Subbly builder, you will find two elements which will enable you to use predefined layouts for the products view to your site. 

What's the difference between Product and Products element?

Difference is simple - Product element will make it possible for you to add 1 product and showcase it on your store (regardless of how many subscription or one-time products you currently have created on the back end). 

On the contrary, Products element will add all products you have created in a grid. Although you're able to make some changes to the Products element layout, please note that you won't be able to use custom layouts unless you don't create the layout yourself. This is also very important if you want to order the products here

For more info on how to build custom layout for the products section on your site, please refer to this article

Styling the Products element

Although products will always be displayed in a grid and under the same layout, you can apply some customization to it. 

All customization to the element is done under the Edit Products section (visible after you click on the element itself). Under Options tab, you will be able to change grid formatting and to filter products displayed on the element by choosing whether you're wanting to display only subscription or only one-time products. 

You can change which CTA buttons you want displayed on the element and change their styling through the buttons tab. 

Please note that you can change/create styling of the buttons from inside Designer Tools/Layout section of the Dashboard.

Finally, you can change color palette or font styling for the entire element from the correspondent section with the Edit panel on the element. 

Don't forget that you're able to add your custom fonts and to add/remove fonts from the free Google font repository from the Fonts app on the Dashboard. 

How to reorder the order of elements?

This is perhaps the most frequent question we're getting đŸ˜”

Basically, if you're about to use predefined Products element to display your products, you won't be able to change the order that products display, as the element will display your products randomly based on pre-set filters (you can choose whether you'd want to display only subscription or only one-time products, or products that are only tagged with certain tag etc..., but they are generally distributed and presented in random order). 

Solution here would be creating your own products layout as explained here