With the Featured Products component, you can display a list of products on any page of your website. To get started, click on Add Content at the top of the editor, then drag the component to a page of your site. Next, click on the component to open the options panel.
Managing Products
At the top of the options panel you’ll see several options related to managing products within the component.
- Type - With this option, you choose how you want to select products for the component. You can choose either specific products, or automatically show all products from particular categories.
- Page Size - This option controls how many products will show in the component before it adds pagination. For example, if you have 10 products in the component but select 5 for this option, it will show five products in the component and then include links to view the next five.
- Manage Products - This option only shows if you select Specific Products for the Type option. To add products, click the Add Products button and select those you want to display with the component. To remove a product, click on the Pencil icon and click the Remove Product button. If you want to rearrange the order, click on a product and drag it to a new position in the list.
- Manage Categories - This option only shows if you select Categories for the Type option. To add categories, click the Add Categories button and select those you want to display with the component. To remove a category, click on the Pencil icon and click on Remove Category. If you want to rearrange the order, click on a category and drag it to a new position.
- Product Sort - This option is only shown when the Type option is set to Categories. Setting this option will automatically sort the products from your chosen category by Name, Price (Low to High), or Price (High to Low).
Layout
There are multiple options that control how products are displayed within the component. These options affect all products within the component:
- Columns - With this option you can choose to display products in 1 to 12 columns. This can be set separately for different screen sizes by clicking the desktop/mobile icon.
- Product Spacing - This option controls how much space there is between products, and can be set separately for different screen sizes.
- Show Image - To hide the image from products, toggle this option off.
- Show Name - To hide product names, toggle this option off.
- Show Price - To hide the prices of products, toggle this option off.
- Show Description - To hide product descriptions, toggle this option off.
- Image Aspect Ratio - With this option you can holistically set the image ratio of all product images. For example, you could choose Square (1:1) so all the images are square-shaped.
- Image Placement - To control where the image is placed relative to the product, change this option. By default, the image is placed Above the rest of the product information.
- Text Align - Use this option to align text to the left, right, or center.
Button
Each product includes a button in addition to product information. The following options are used to control different aspects of the button:
- Show Button - To hide the button entirely from products, toggle this option off. Each product will remain a clickable link so visitors can still view individual product pages.
- Button Label - Edit the field for this option to change the text shown on buttons.
- Button Shape - By default, buttons use the shape setting set in your site settings. With this option you can override that to something else. You can also set this separately for different screen sizes by clicking the desktop/mobile icon.
- Button Text Color - With this option you can customize the color of the button text.
- Button Background - Use this option to customize the background of the button. You can choose color, gradient, image, or image with overlay.
- Button Border - Edit this option to add a border to the button. You can set the width, color, and style of the border.
Spacing
The Margin option controls how much space there is around all of the products as a whole within the component. This can be set individually for each side or all together, and can be set separately for different screen sizes.