Product pages

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

1. Change the value of the input in DOM
2. 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:

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:

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();

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
};

Date picker gets settings at the moment the user clicks it. So there is no need in the Ecwid.refreshConfig() function.