Your e-commerce store bridges the gap between customers and your products. This is the front of your business, displaying everything you offer.
Whenever you create a store, it will automatically add the Product List, think about it like virtual product shelves, where everything is displayed. It keeps a view of all products you’ve created, with the option to add to store toggled on.
How It Works #
General #
Open the settings on the right side, by clicking on Manage Products, you will be redirected to the products tab to edit or create more.
You can enable Filter and Sort to give clients more control over the results they see.
Expand the Sort & Filter options to limit the filtering to only do so based on Availability or Price, and set the default sorting option.
Typography options let you control the look of the text related to products, you can use Google Fonts to personalize this.
With Layout Options, you can control how many products show.
With Text Options, you can update the display labels to better align with your brand identity.
Enable the wishlist for products so logged-in clients can save the products they love to checkout at a later time.
Need to make any other color adjustments? Scroll to the bottom of the General settings to make your changes.
Styles #
Switch to the Styles tab to customize the Margin & Padding of the element for both desktop and mobile views.
You can also adjust the appearance of the border, including its color, thickness, radius, and style.
Apply box shadows to fit your design needs. Click the plus button to apply a default outer shadow with preset values, which can be further customized with specific settings.
Changing the Visibility you can make the element unavailable on desktop or mobile view.
Enter or paste your custom class code in the provided field and copy the CSS Selector if needed.
The Product List element will be the driving force for sales in your e-commerce store, and being able to customize it will give you an edge over other stores to promote your business and products and drive traffic over to your website!
Important Notes #
- If you don’t see a product listed, verify that you’ve toggled Include in Online store.
- The default sort order is Date – Old to new.
- All products will be shown without any filters by default.
Frequently Asked Questions #
Is the Product List added automatically? #
Yes. Whenever you create a store, the Product List element is added automatically and displays all products that have the Include in Online store option toggled on.
Why isn’t one of my products appearing in the list? #
If a product isn’t showing, verify that you’ve toggled Include in Online store for that product. Products without this setting enabled won’t appear.
How do I let customers filter and sort products? #
Enable Filter and Sort in the element settings, then expand the Sort & Filter options to limit filtering by Availability or Price and set a default sorting option.
What is the default sort order? #
The default sort order is Date – Old to new, and by default all products are shown without any filters applied.
Can customers save products for later? #
Yes. You can enable the wishlist so that logged-in clients can save the products they love and check out at a later time.
What styling options are available? #
In the Styles tab you can adjust margin and padding for desktop and mobile, border color, thickness, radius, and style, box shadows, visibility per device, and custom CSS classes.
