Add a Product Grid to a Website Page

Want more control over how you display products on your website? With product grids, you can showcase items in an organized and visually appealing layout.

With product grids, you can control how products display on a page by specifying the number of products shown per page, the number of columns in a grid, and how the product thumbnail appears.

Shoppers can see a well-organized layout where products are displayed in a grid format with a specified number of columns and have a consistent and visually appealing browsing experience, making it easier to compare products at a glance.

Adding a product grid widget has three steps:

1. Add a product grid widget to a page
2. Customize the widget
3. Publish the widget to your website and/or mobile app

Step 1: Add a Product Grid Widget to a Page

1. Hover over the side menu of your CommentSold dashboard, then select Site Creator.
2. Select Pages from the options listed at the top of the page.
3. Select the three-dot icon to the far right of the desired page.
4. Select Edit from the options listed.
5. Select + Add Section at the top of the list.
6. Select the Product Grid widget.

Step 2: Customize the Widget

1. Locate the Product Grid widget, then select the pencil icon on the right side of the widget row.
2. Customize widget title, products, layout, and other controls. We detail these sections below.
3. Your site preview will update to reflect the changes to the widget. When you are satisfied, select Publish in the top-right corner of the Site Creator to save the widget.

Title

In the Title field, enter a name for the widget.

Product Selection

Expand this section to select and customize the desired product collection.

1. Using the Collection drop-down, select the desired product collection.
2. Using the Sort By drop-down, select the desired property of the product.
3. Select if the products must be arranged in Ascending or Descending order based on the product property selected above.

Layout Selection

Expand this section to customize the layout of the widget.

1. Select the Number of Columns on Desktop using the slider.
2. Select the Products per Page using the slider.
3. Select how you wish to display product images. Options include Portrait and Square.
4. Select the checkbox if you wish to Show second image on hover.
5. Customize the Product Grid.
   • Enable the toggle to Show Filters.
   • Enable the toggle to Show Sorting Options.
6. Customize the Mobile Layout.
   • Using the Number of Columns on Mobile drop-down, select the desired number of columns.

Controls

Enter an Anchor Name, this will create a unique URL for this section.

Step 3: Publish the Widget to Your Website and Mobile App

Once you customize the widget, you have the option to publish the widget to your Website, App or both. 

1. Hover over the side menu of your CommentSold dashboard, then select Site Creator.
2. Select Pages from the options listed at the top of the page.
3. Select the three-dot icon to the far right of the desired page.
4. Select Edit from the options listed.
5. Select the pencil icon on the right side of the desired widget row.
6. Scroll down to Show Section On and choose where you wish to publish this section. Options include All, Web, or App (website and mobile app).
7. Your site preview will update to reflect the changes to the widget. When you are satisfied, select Publish in the top-right corner of the Site Creator to save the widget.