Content Controls
Content
This section lets you control what products are displayed and how they’re presented. Choose to show products manually or based on a query, manage product count, and specify the order in which they appear for a customized display.
- Show Products – Decide whether to manually select products or display them based on a query.
- Products – Choose individual products to show when ‘Show Products’ is set to ‘manually’. This control provides precise product selection.
- Query – Define criteria for automatically selecting products to display when ‘Show Products’ is set to ‘query’.
- Product Count – Set the number of products to display in the list.
- Order By – Choose the parameter for ordering products, like date or price.
- Order – Select the order direction, either ascending or descending.
Filter Bar
Enhance user experience with a filter bar, allowing customers to easily sort and access products. Enable it, choose its type, and further customize it to fit your site’s design and user needs.
- Enable – Turn on the filter bar to allow users to sort products.
- Type – Select the type of filter bar. This control is available when the filter bar is enabled.
- All Filter – Toggle the option to include a filter for ‘All’ products. Available when the filter bar is enabled.
- All Label – Set the label for the ‘All’ filter. This control is available when both the filter bar and ‘All Filter’ are enabled.
Design Controls
Elements
Customize the individual elements of your product list, such as images, titles, prices, and more. Tailor each element’s appearance to create an attractive and cohesive product display.
- Image – Customize the product image display.
- Include – Decide whether to include the image.
- Space Before – Set the space before the image.
- Space After – Set the space after the image.
- Order – Determine the display order of the image.
- Borders – Adjust the borders around the image.
- Radius – Set the border radius for the image.
- Styling – Style the image borders.
- Shadow – Add a shadow effect to the image.
- Title – Customize the product title display.
- Include – Decide whether to include the title.
- Space After – Set the space after the title.
- Order – Determine the title’s display order.
- Typography – Adjust the typography settings for the title.
- Price – Customize the product price display.
- Include – Decide whether to include the price.
- Space After – Set the space after the price.
- Order – Determine the display order of the price.
- Old Price Typography – Adjust the typography settings for the old price.
- Current Price Typography – Adjust the typography settings for the current price.
- Rating – Customize the product rating display.
- Include – Decide whether to include the rating.
- Space After – Set the space after the rating.
- Order – Determine the display order of the rating.
- Review Count – Toggle the display of the review count.
- Count Typography – Adjust the typography settings for the review count.
- Sale Badge – Customize the sale badge display.
- Include – Decide whether to include the sale badge.
- Position – Set the position of the sale badge.
- Background – Choose a background color for the sale badge.
- Typography – Adjust the typography settings for the sale badge.
- Borders – Adjust the borders around the sale badge.
- Padding – Adjust the padding inside the sale badge.
- Nudge – Slightly adjust the position of the sale badge.
- X – Nudge the sale badge horizontally.
- Y – Nudge the sale badge vertically.
- Excerpt – Customize the product excerpt display.
- Include – Decide whether to include the excerpt.
- Space After – Set the space after the excerpt.
- Order – Determine the display order of the excerpt.
- Typography – Adjust the typography settings for the excerpt.
- Categories – Customize the product categories display.
- Include – Decide whether to include the categories.
- Space After – Set the space after the categories.
- Order – Determine the display order of the categories.
- Typography – Adjust the typography settings for the categories.
- Quantity Input – Customize the quantity input display.
- Include – Decide whether to include the quantity input.
- Space After – Set the space after the quantity input.
- Button – Customize the button display.
- Include – Decide whether to include the button. (This control is only available when the Include control is set to “enable”)
- Space After – Set the space after the button.
- Styles – Style the button appearance.
- Custom Areas – Customize additional content areas.
- Areas – Add and configure custom content areas.
- Global Block – Choose a global block for the custom area.
- Position – Set the position of the custom area.
- Space Before – Set the space before the custom area.
- Space After – Set the space after the custom area.
- Order – Determine the display order of the custom area.
Layout
Control the overall layout of your products list. Choose between different layouts like grid or slider, and customize slider settings for a dynamic product presentation.
Product Wrapper
Adjust the appearance of the individual product wrappers within the list. Customize alignment, background, borders, and padding to make each product stand out.
Filter Bar
Design the filter bar to match your site’s aesthetics. Adjust its layout, style, spacing, and typography for a seamless user interface.
Spacing
Manage the spacing around the entire product list for a clean and balanced layout. Adjust top and bottom margins to ensure the list integrates well with other page elements.
- Margin Top – Set the space above the products list.
- Margin Bottom – Define the space below the products list.
Advanced
The Advanced section offers further customization options for the Products List Element. Access detailed settings for specialized requirements and fine-tune the product list’s behavior and appearance.
