Product/Products Element

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. There is a video included in it as well 😉

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 😵

We've introduced some sorting functions/options inside the Products element that can help you sort the products in a certain order: 

  • newest to oldest or vice versa
  • highest to lowest price or vice versa

This can prove really powerful if used in conjunction with setting up a grid for your products to display (for example, 2x2 or 3x3 grid for the products etc.). 

If you're still not satisfied with the flexibility the Products element is giving you, please note that you can always opt to create your own layout for the products to be displayed as explained here. 

How did we do?

Map element

Breadcrumb element

Contact