Ecwid (Premium) — Storefront — Product Grid

Learn more about the Ecwid (Premium) — Storefront — Product Grid Adobe Muse widget

Product Grid customizes the section of your store that displays all of your store's categories and products in a grid or list view.

Buy Now $19.99

Table of contents

  1. How to use
  2. Documentation
    1. Removables
    2. Layout
      1. List View
      2. Table View
      3. Grid View
      4. Miscellaneous
    3. Images
    4. Product URLs
    5. Category URLs
    6. Product Styling
  3. Discussion

How to use

Ecwid (Premium) — Storefront — Product Grid
Removables
Remove Category Page Titles Enable this feature to remove the category page titles.
Remove Sorting Dropdown Enable this feature to remove the sorting dropdown. This will remove the ability to sort products by data or alphabet.
Remove Product Labels Enable this feature to remove the product labels from the products in grid view.
Remove Product Price Enable this feature to remove the price from the products in all view.
Layout
List View
Add 'List View' Enable this feature to add the List View
List Count Adjusts the amount of products that are on a page in List View.
Table View
Add 'Table View' Enable this feature to add the Table View
Table Count Adjusts the amount of products that are on a page in Table View.
Grid View
Categories Per Row Adjusts the amount of categories that are in a row in grid view.
Products Per Row Adjusts the amount of products that are in a row in grid view.
Rows Per Page Adjusts the amount of rows that are on a page in grid view.
Spacing
Horizontal Spacing Adjusts the amount of horizontal spacing between products in grid view.
Vertical Spacing Adjusts the amount of vertical spacing between products in grid view.
Default Page
Opening Page You have 3 options:
  1. Default Page
  2. Specified Category
  3. Specified Product
Product ID The ID of the product that you would like your store to open in.Tip This feature is commonly used to create unquie pages for different categories of your store. For example, if you had a 'Fishing' category and a 'Camping' category, you could create themed pages that match the corresponding categories.
Category ID The ID of the category that you would like your store to open in.TipSpecified Product — This feature is commonly used to create unique pages for individual products of your store.
Search Results
Display search results in This will change the layout that search results will be displayed; you have 3 options:
  1. grid view
  2. list view
  3. table view
Miscellaneous
Show View Options On Mobile Devices By default, Ecwid hides the view options on mobile devices. Enable this feature to force them to always be displayed.
Images
Opacity (Normal) This will adjust opacity of product/category images in the normal state.
Opacity (Hover) This will adjust opacity of product/category images in the hover state.
Border Radius (Normal) This will adjust border radius of product/category images in the normal state.
Border Radius (Hover) This will adjust border radius of product/category images in the hover state.
Product URLs
Use this section if you like to change the URL that opens when a user clicks on a specific product.
Product ID The ID of the product that you are wanting to change.
Product URL The new URL that the user will be taken to when the specified product is clicked.
Category URLs
Use this section if you like to change the URL that opens when a user clicks on a specific category.
Category ID The ID of the category that you are wanting to change.
Category URL The new URL that the user will be taken to when the specified category is clicked.
Product Styling
Border
Width Adjusts the width of the border around each product.
Color (Normal) Adjusts the color of the border around each product in the normal state.
Color (Hover) Adjusts the color of the border around each product in the hover state.
Background
Color (Normal) Adjusts the background color of the products in the normal state.
Color (Hover) Adjusts the background color of the products in the hover state.
Opacity (Normal) Adjusts the background opacity of the products in the normal state.
Opacity (Hover) Adjusts the background opacity of the products in the hover state.

Discussion