Articles in this category

GOOD STUFF!

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 that will enable you to use predefined layouts for the products view on your site. 

What's the difference between Product and Products element?

Product element helps you showcase a single product with all its details and description, making it more suitable to be part of a product detail page. 

On the contrary, Products element will add all products you have created in a grid, making it suitable for a category hub page, or a products listing page. 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 customizations to the products element are done under the Edit Products section (visible as the settings wheel after you click on the element itself). Under Options tab, you will be able to change grid formatting and filter products displayed on the element by choosing whether you want to display only subscription or only one-time products. 

You can change which CTA buttons you want to be 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 for the corresponding section within 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/sort the products in products element?

This is perhaps one of the most frequently asked questions.

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.). Sorting the products with highest price to come first gives them more visibility, and it's likely that they'll convert better. Same with new products - if you want customers to check out your newest products and wish to sell more of those, sorting them by newest first will ensure the best conversions for those products.

Filtering options for products

There are 2 main filtering options for the Products element on Subbly:

  1. filtering by tags
  2. filtering by type

Filtering products by tags

By default, the products element lists out all the active products you've set up within Subbly. But you can also filter the products to be displayed if you're trying to show products only from a specific category, for example. You can achieve this by tagging your products within Admin dashboard, and filtering the products by tags within the products element in your Subbly website.

Here's how you can add tags to your products:

  • Navigate to your Subscription or One-time Product page within your Admin dashboard.
  • Click on the contextual menu(the three dots) and click on Edit tags.
  • You'll see a window pop-up, allowing you to input the tags for that product. Type in a new tag, or select from an existing one, then click Save.

Once you've tagged all the products you want to filter, you can then change the settings within the products element to only display products belonging to a certain tag.

  • Click on your product element within the website builder, and select the Settings menu that pops up along with other options.
  • Click on Options > Filter By Tag. It's set to "All tags" by default, which essentially lists all the products.

Then you need to use the drop-down from Filter By Tag option as in the picture below:

  • All the tags you added to your products will be listed in the drop down menu here - select any one, and click save. Only the products carrying the tag you've selected here will be displayed by the products element.

Filtering products by product type

Using Filter by Type option, you can filter the products element to just show subscription products, or one-time products - by default, it's set to "All types", which will display both subscription and one-time products in your store.

You can also combine both Filter by Tag and Filter by Type options to create a more granular filter for your products element.

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free