The product pages allow for more customization and better looking storefronts across all Ecwid stores. Check 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. If the JS code is called before loading the storefront, then you need to add a check using the Ecwid.refreshConfig && Ecwid.refreshConfig()
function.
To ensure you have the latest version enabled, check Ecwid Control Panel > Settings > What's new for new available features.
Set values for product options
Product details pages can have different product options for customers to choose from. Use the instructions below for changing product options for customer.
How to set value for product option
- Change the value of the input in DOM
- Send an event to Ecwid that value was changed
Changing values for different product option types
Radio button
Emulate click()
event on the text label of a radio button
Text inputs
Update .value
of text field, send 'input'
event
Checkboxes
Update the .checked
property of a checkbox, send 'input'
event
Drop-downs
Update .value
of a <select>
element, send 'change'
event
Example
Check out an example code:
// Product details page is opened
// Change value of select in DOM
document.querySelector('.details-product-option--select .form-control--select select').value = 'XLarge';
// At this moment the value was changed, but Ecwid doesn't know about it. So the changes are not applied yet
// Send 'change' event to Ecwid to record the change
document.querySelector('.details-product-option--select .form-control--select select').dispatchEvent(new Event('change'));
// Now if a customer adds this product to cart, it will be added with this user selection
Set main layout of product pages
Set different layout of product pages. Defines how many columns the page contains, the column width, etc.
Possible values: "TWO_COLUMNS_SIDEBAR_ON_THE_LEFT"
, "TWO_COLUMNS_SIDEBAR_ON_THE_RIGHT"
, "THREE_COLUMNS_SIDEBAR_ON_THE_RIGHT"
, "THREE_COLUMNS_SIDEBAR_ON_THE_LEFT"
.
Default value: "TWO_COLUMNS_SIDEBAR_ON_THE_RIGHT"
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.
window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.storefront.product_details_layout = "THREE_COLUMNS_SIDEBAR_ON_THE_RIGHT"; // set product page layout
Ecwid.refreshConfig();
Control visibility of elements in product details pages
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_details_show_product_name = false;
Ecwid.refreshConfig();
Fields:
Config name | Type | Description |
---|---|---|
product_details_show_product_name | boolean | Show or hide product name. Defines the visibility of the product name on product pages. Possible values: true , false . Default value: true |
product_details_show_breadcrumbs | boolean | Defines the visibility of breadcrumbs on product page. Possible values: true , false . Default value: true |
product_details_show_product_sku | boolean | Defines the visibility of SKU on product page. Possible values: true , false . Default value: true |
product_details_show_product_price | boolean | Defines the visibility of price on product page. Possible values: true , false . Default value: true |
product_details_show_sale_price | boolean | Defines the visibility of sale price on product page. Possible values: true , false . Default value: true |
product_details_show_price_per_unit | boolean | Defines the visibility of price per unit on product page. Possible values: true , false . Default value: true |
product_details_show_tax | boolean | Defines the visibility of tax on product page. Possible values: true , false . Default value: true |
product_details_show_product_options | boolean | Defines the visibility of product options on product page. Possible values: true , false . Default value: true |
product_details_hide_price_modifiers | boolean | Defines the visibility of price modifiers on product page. Possible values: true , false . Default value: false . Price modifiers are available for product options. See: Ecwid Control Panel > Catalog > Edit Product > Options tab > Price modifiers. |
product_details_show_buy_button | boolean | Defines the visibility of buy button block on product page. Possible values: true , false . Default value: true |
product_details_show_qty | boolean | Defines the visibility of 'Qty' on product page. Possible values: true , false . Default value: false |
product_details_show_attributes | boolean | Show or hide product attributes. Defines the visibility of the product name on product pages. Possible values: true , false . |
product_details_show_weight | boolean | Show or hide product weight. Defines the visibility of the product name on product pages. Possible values: true , false . |
product_details_show_number_of_items_in_stock | boolean | Defines the visibility of number of items in stock on product page. Possible values: true , false . Default value: true |
product_details_show_in_stock_label | boolean | Defines the visibility of 'In stock' label on product page. Possible values: true , false . Default value: true |
product_details_show_wholesale_prices | boolean | Defines the visibility of wholesale prices on product page. Possible values: true , false . Default value: true |
product_details_show_product_description | boolean | Defines the visibility of product description on product page. Possible values: true , false . Default value: true |
product_details_show_save_for_later | boolean | Defines the visibility of 'Save for Later' block on product page. Possible values: true , false . Default value: true |
product_details_show_share_buttons | boolean | Defines the visibility of all share buttons on product page. Possible values: true , false . Default value: true |
product_details_show_facebook_share_button | boolean | Defines the visibility of Facebook share button on product page. Possible values: true , false . Default value: true |
product_details_show_pinterest_share_button | boolean | Defines the visibility of Pinterest share button on product page. Possible values: true , false . Default value: true |
product_details_show_twitter_share_button | boolean | Defines the visibility of Twitter share button on product page. Possible values: true , false . Default value: true |
product_details_show_vk_share_button | boolean | Defines the visibility of VKontakte share button on product page. Possible values: true , false . Default value: true |
product_details_additional_images_has_shadow | boolean | Defines the shadow visibility for gallery images. If "true", adds shadow to gallery thumbnails. Makes the thumbnails slightly darker to make them stand out against the white background. Possible values: true , false . Default value: false |
product_details_image_carousel | boolean | Defines the shadow visibility for gallery images. If true , adds the ability to scroll product images without opening full-screen image viewer. Possible values: true , false . Default value: true |
product_details_show_qty | boolean | Hide the 'Qty' section for customers in product details pages. Possible values: true to show the 'Qty' section, and false to hide it |
product_details_show_in_stock_label | boolean | Hide the 'In stock' label for customers in product details pages. Possible values: true to show the 'In stock' label, and false to hide it |
product_details_show_number_of_items_in_stock | boolean | Hide the number if items in stock for customers in product details pages. Possible values: true to show the number of items in stock, and false to hide it |
show_sku | boolean | Hide or show the product SKU in the catalog (product list and product details page). Has less priority than product_list_sku_behavior |
product_details_show_subtitle | boolean | Defines the **visibility of product subtitles in product details pages. Possible values: true to show the subtitle, and false to hide it |
product_details_show_navigation_arrows | boolean | Enable or disable on hover navigation arrows to switch between product images inside product pages. Possible values: true to enable, and false to disable |
product_details_show_product_photo_zoom | boolean | Enable or disable on hover zoom of a main product image in product details pages. Possible values: true to enable on hover zoom, and false to disable |
If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig()
function.
Control the layout of product details page
window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.storefront.CONFIG_NAME = VALUE;
Ecwid.refreshConfig();
Fields:
Config name | Type | Description |
---|---|---|
product_details_show_product_name_always_first_on_mobile | boolean | Defines the position of the product name on mobile. If true , the product name always shows on top on the mobile version. Possible values: true , false . Default value: false |
product_details_cut_product_description_in_sidebar | boolean | If true , cuts long product description and displays only one paragraph and "Show more" link to see full info. If false , the description shows as is no matter its size. Possible values: true , false . Default value: true |
product_details_two_columns_with_right_sidebar_show_product_description_on_sidebar | boolean | If true , the product description shows in sidebar according to its position. Otherwise it shows below product image. For two column layout with sidebar on the right only. Possible values: true , false . Default value: false |
product_details_two_columns_with_left_sidebar_show_product_description_on_sidebar | boolean | If true , the product description shows in sidebar according to its position. Otherwise it shows below product image. For two column layout with sidebar on the left only. Possible values: true , false . Default value: false |
product_details_gallery_layout | string | Set different layout of gallery on product pages.
"IMAGE_SINGLE_THUMBNAILS_HORIZONTAL" |
product_details_additional_images_preview_on_click | boolean | Defines the gallery behaviour on image click. If true , shows the additional product image in the place of main product image when clicking on gallery thumbnail. If false , the image viewer opens when clicking on image thumbnails. Not relevant if product_details_gallery_layout ==IMAGE_FEED . Possible values: true , false . Default value: true |
product_details_thumbnails_aspect_ratio | string | Set the image aspect ratio for gallery tumbnails. If "AUTO" each thumbnails has the ratio that closest to its actual proportions. However you can force different ratio to all thumbnails. Possible values: "AUTO" , "PORTRAIT_0667" , "PORTRAIT_075" , "SQUARE_1" , "LANDSCAPE_1333" , "LANDSCAPE_15" . Default value: "AUTO" |
product_details_show_breadcrumbs_position | string | Possible values: PRODUCT_DETAILS_SIDEBAR - standard breadcrumbs navigation, NAVIGATION_CONTAINER - adds navigation arrows to product pages to switch between product pages |
If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig()
function.
Control position of elements on product details pages
window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.storefront.CONFIG_NAME = VALUE;
Ecwid.refreshConfig();
Config name | Type | Description |
---|---|---|
product_details_position_product_name | number | Defines the position of the product name. The less number, the higher the element on the page. Default value: 100 |
product_details_position_breadcrumbs | number | Defines the position of the breadcrumbs within the sidebar. The less the number is, the higher the element on the page**. Default value: 200 |
product_details_position_product_sku | number | Defines the position of the SKU within the sidebar. The less the number is, the higher the element on the page**. Default value: 300 |
product_details_position_product_price | number | Defines the position of the SKU within the sidebar. The less the number is, the higher the element on the page**. Default value: 400 |
product_details_position_product_options | number | Defines the position of the product options within the sidebar. The less the number is, the higher the element on the page**. Default value: 500 |
product_details_position_subtitle | number | Defines the position of the subtitle within the sidebar. The less the number is, the higher the element on the page. Default value: 500 |
product_details_position_buy_button | number | Defines the position of the buy button block within the sidebar. The less the number is, the higher the element on the page**. Default value: 600 |
product_details_position_wholesale_prices | number | Defines the position of the wholesale pricing table within the sidebar. The less the number is, the higher the element on the page**. Default value: 700 |
product_details_position_product_description | number | Defines the position of the product description within the sidebar. The less the number is, the higher the element on the page**. Default value: 800 |
product_details_position_save_for_later | number | Defines the position of the 'Save for Later' block within the sidebar. The less the number is, the higher the element on the page**. Default value: 900 |
product_details_position_share_buttons | number | Defines the position of the share buttons within the sidebar. The less the number is, the higher the element on the page. Default value: 1000 |
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 date picker on product details pages
window.ec.storefront.product_details_datepicker_options = {
'minDate': new Date(new Date().getTime() + 2 * 60 * 60 * 1000),
'maxDate': new Date(2022, 12, 31),
'showTime': true,
'incrementMinuteBy': 30
};
Config name | Type | Description |
---|---|---|
product_details_datepicker_options | boolean | Allows customization of product date picker options. Supports all the same fields as the date picker in extra fields |
Date picker gets settings at the moment the user clicks it. So there is no need in the Ecwid.refreshConfig()
function.