The product listing allows for more customization and better looking storefronts across all Ecwid stores. Check out the available customization options below. If you apply any of the changes below after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.
To ensure you have the latest version enabled, check Ecwid Control Panel > Settings > What's new for new available features.
Adding new elements to product grid
The product listing (category pages) works in a specific way, which requires different approach to adding new elements to a page.
Check this page for code example: Add new element to products in category pages
Control display of elements in product grid
window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.storefront.CONFIG_NAME = VALUE;
Ecwid.refreshConfig();
window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.storefront.product_list_sku_behavior = "SHOW_ON_HOVER"; // shows product SKU on hover in product list
Ecwid.refreshConfig();
Fields:
| Config name | Type | Description |
|---|---|---|
| enable_catalog_on_one_page | boolean | true to display store catalog on a single page (list of multiple categories with products). false to display a list of categories and display one category at a time only |
| enable_simple_category_list | boolean | Defines the configuration of the option that makes the same number of cards in all rows. Possible values: true to enable this option, false to disable it. |
| product_list_title_behavior | string | Control display mode of product title in product listing (category pages). Possible values: "SHOW", "HIDE", "SHOW_ON_HOVER" |
| product_list_sku_behavior | string | Control display mode of product SKU in product listing (category pages). Possible values: "SHOW", "HIDE", "SHOW_ON_HOVER" |
| product_list_price_behavior | string | Control display mode of product price in product listing (category pages). Possible values: "SHOW", "HIDE", "SHOW_ON_HOVER" |
| product_list_subtitles_behavior | string | Control display mode of product subtitle in product listing (category pages). Possible values: "SHOW", "HIDE", "SHOW_ON_HOVER" |
| product_list_buybutton_behavior | string | Control the way 'Buy now' buttons are displayed in product listing (category pages). Possible values: "SHOW", "HIDE", "SHOW_ON_HOVER". Important: the 'Buy now' button must first be enabled in the Ecwid Control Panel > Settings > General > Cart > Show "Buy now" buttons on products list pages |
| product_list_show_frame | boolean | Show or hide the frame / border for products in product listing (category pages). Possible values: true, false |
| product_list_product_info_layout | string | Set align of sku/price/name section in product listing (category pages). Works for name/sku/price shown below the image. Doesn't apply to name/sku/price shown on hover.. Possible values: "CENTER", "LEFT", "JUSTIFY", "RIGHT" |
| breadcrumbs_separator | string | Set custom breadcrumbs separator in product listing (category pages). For example: Store / SubCategory / SubSubCategory or Store -> SubCategory -> SubSubCategory or any other custom string. Possible values: any string, e.g. "/", "*", "->", etc |
| product_list_category_title_behavior | string | Control the way category names are displayed in product listing (category pages). Possible values: "SHOW_ON_IMAGE" – default, "SHOW_BELOW_IMAGE", "HIDE", "SHOW_ON_HOVER" |
| product_list_show_product_images | boolean | Show or hide product images in product listing. Defines the visibility of the product name on product pages. Possible values: true, false. Default value: true |
| product_filters_position_category_page | string | Set product filters position on category pages. Possible values: "RIGHT" – default, "LEFT". |
| product_filters_position_search_page | string | Set product filters position on search results pages. Possible values: "LEFT" – default, "RIGHT". |
| product_filters_opened_by_default_on_category_page | boolean | true to show product filters by default on category pages. false to hide them by default. |
If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function. If the JS code is called before loading the storefront, then you need to add a check using the Ecwid.refreshConfig && Ecwid.refreshConfig() function.
Customize images in product listing
window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.storefront.CONFIG_NAME = VALUE;
Ecwid.refreshConfig();
window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.storefront.product_list_image_has_shadow = true; // shows shadow for products in product list
Ecwid.refreshConfig();
Fields:
| Config name | Type | Description |
|---|---|---|
| product_list_image_size | string | Control the size of product image in product listing (category pages). Possible values: "SMALL", "MEDIUM", "LARGE" |
| product_list_image_aspect_ratio | string | Control the aspect ratio of product image in product listing (category pages). Possible values: "PORTRAIT_0667", "PORTRAIT_075", "SQUARE", "LANDSCAPE_1333", "LANDSCAPE_15" |
| product_list_image_has_shadow | boolean | Show or hide the shadow effect for product images in product listing (category pages). If true, it also makes images slightly darker to make them stand out against the white background. Possible values: true, false |
| product_list_show_additional_image_on_hover | boolean | Show or hide the additional image on hover in product listing (category pages). Possible values: true, false |
| product_list_image_position | string | Set product image display mode in product listing (category pages).
"AUTO", "COVER", "FIT". Default: "AUTO" |
| product_list_category_image_aspect_ratio | string | Controls the aspect ratio of category image in category listing. Possible values: PORTRAIT_0667, PORTRAIT_075, SQUARE, LANDSCAPE_1333, LANDSCAPE_15 |
| product_list_category_image_position | string | Set category image display mode in product listing (category pages).
"AUTO", "COVER", "FIT". Default: depends on the setting in Ecwid Control Panel – category name position. "COVER" if category name is shown on image, "AUTO" for other values |
| product_list_category_image_size | string | Controls the size of category image in category listing. Possible values: SMALL, MEDIUM, LARGE |
| product_list_show_on_sale_label | boolean | Show or hide the "ON SALE" label in product listing (category pages). Label will be displayed only when product has "compare to" price set. Possible values: true, false. Default: true. If both "SOLD OUT" and "ON SALE" labels are enabled, the "SOLD OUT" label will be shown only. |
| product_list_show_sold_out_label | boolean | Show or hide the "SOLD OUT" label in product listing (category pages). Label will be displayed only when product is out of stock. Possible values: true, false. Default: true. If both "SOLD OUT" and "ON SALE" labels are enabled, the "SOLD OUT" label will be shown only |
| product_list_show_name_your_price_label | boolean | Show or hide the “name your price” label in product listing (category pages). Label will be displayed only when the "name your price" function enabled for the product. Possible values: true, false. Default: true. If both "SOLD OUT" and “name your price” labels are enabled, the "SOLD OUT" label will be shown only. |
If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.
Set custom spacing between grid elements
window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.storefront.product_list_category_cell_spacing = 20;
Ecwid.refreshConfig();
Fields:
| Config name | Type | Description |
|---|---|---|
| product_list_category_cell_spacing | integer | Set your custom spacing between categories in product listing (category pages) in pixels. If applied, categories will become smaller to allow for the set spacing. Default: not set. |
| product_list_cell_spacing | integer | Set your custom spacing between products in product listing (category pages) in pixels. If applied, products will become smaller to allow for the set spacing. Default: not set |
If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.