NAV

Customize appearance

Change store layout

Ecwid integration code provides a number of modifications to the store layout. See the details below.

Add new element for each product in product grid

Add button below each product in product grid

Ecwid.OnPageLoaded.add(function (page) {
        // Apply changes only to category pages
        if (page.type == 'CATEGORY') {

          // Remove any previously added elements when new page changes 
          // If you change class name here, make sure to update it below too
          var removingButtons = document.getElementsByClassName('custom_app_button');
          for (i = removingButtons.length - 1; i >= 0; i--) {
            removingButtons[i].parentNode.removeChild(removingButtons[i]);
          }

          // Loop to add new element to each product in product listing
          for (i = 0; i < document.querySelectorAll('.grid-product').length; i++) {
            var elem = document.querySelector('.grid-product:nth-child(' + (i + 1) + ') .grid-product__wrap-inner');

            // Create our custom element
            var container = document.createElement("div");

            // Set custom class to locate our new element
            // If you change class name here, make sure to update it above too
            container.setAttribute('class', 'custom_app_button'); 

            // Change vertical order position of new element using 'order' value. Bigger = lower; smaller = higher
            container.setAttribute('style', 'order: 6; padding:0;');

            // Set the content of our new element
            container.innerHTML = '<div><div class="label label--flag label--success"><div class="label__text">Sale 2018</div></div></div>';

            // (OPTIONAL) Show alert when user clicks on new container
            container.addEventListener("click", function (event) {
              event.stopImmediatePropagation();
              alert('SALE MESSAGE');
            });

            // Add new element to products
            elem.appendChild(container);
          }
        }
})

The latest version of product grid requires specific approach to adding new elements. Check out the example on the right.

How to enable latest version of product listing in your test store

Set default product or category page

Open “Surfboards” category of Ecwid Demo store by default

<div> 
  <script type='text/javascript' src='https://app.ecwid.com/script.js?1003'></script>
  <script type='text/javascript'> xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style=","defaultCategoryId=20671017"); </script> 
</div>

Open “PYZEL Amigo 6'2 Surfboard” product in Ecwid Demo store by default

<div> 
  <script type='text/javascript' src='https://app.ecwid.com/script.js?1003'></script> 
  <script type='text/javascript'> xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style=","defaultProductId=70178249"); </script> 
</div>

By default, the storefront widget opens with a list of root category. But you can configure it to show a different category or a particular product when user opens it for the first time.

You can do it by adding either option to the Product Browser integration code:

"defaultCategoryId=%categoryId%"

or

"defaultProductId=%productId%"

The example codes are available on the right.

Show or hide storefront elements

Using additional configuration code you are able to hide some storefront elements without any CSS rules. These settings will override user preferences set in the Ecwid Control Panel.

Place the codes anywhere on a page where Ecwid integration code is added to apply them.

Hide sign in link

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.show_signin_link = false; // hides the sign in link
</script>

Hide the sign in link for customers in a store using the code example on the right. Place the codes anywhere on a page where Ecwid integration code is added to apply them.

The config window.ec.storefront.show_signin_link accepts two values: true to show the sign in link, and false to hide it.

Hide breadcrumbs

Hide breadcrumbs

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.show_breadcrumbs = false; // hides the breadcrumbs
</script>

Hide the storefront breadcrumbs for customers using the code example on the right. Place the codes anywhere on a page where Ecwid integration code is added to apply them.

The config window.ec.storefront.show_breadcrumbs accepts two values: true to show the breadcrumbs, and false to hide them.

Hide ‘View as’ and 'Sort by’ options in product listing

Hide 'View as’ and 'Sort by’ options

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_show_sort_viewas_options = false; // hides the 'View as' and 'Sort by' options
</script>

Hide the options to 'View as’ and 'Sort by’ products for customers using the code example on the right. Place the codes anywhere on a page where Ecwid integration code is added to apply them.

The config window.ec.storefront.product_list_show_sort_viewas_options accepts two values: true to show the 'View as’ and 'Sort by’ options, and false to hide them.

Hide 'Qty’ selection in product details

Hide 'Qty’ selection in product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_qty = false; // hides the 'Qty' selection
</script>

Hide the 'Qty’ section for customers in product details using the code example on the right. Place the codes anywhere on a page where Ecwid integration code is added to apply them.

The config window.ec.storefront.product_details_show_qty accepts two values: true to show the 'Qty’ section, and false to hide it.

Hide 'In stock’ label in product details

Hide 'In stock’ label in product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_in_stock_label = false; // hides the 'In stock' label
</script>

Hide the 'In stock’ label for customers in product details using the code example on the right. Place the codes anywhere on a page where Ecwid integration code is added to apply them.

The config window.ec.storefront.product_details_show_in_stock_label accepts two values: true to show the 'In stock’ label, and false to hide it.

Hide number of items in stock in product details

Hide number of items in stock in product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_number_of_items_in_stock = false; // hides the number of items in stock
</script>

Hide the number if items in stock for customers in product details using the code example on the right. Place the codes anywhere on a page where Ecwid integration code is added to apply them.

The config window.ec.storefront.product_details_show_number_of_items_in_stock accepts two values: true to show the number of items in stock, and false to hide it.

Center popups in iframe storefronts

Example of centering popups

<script src='https://d1e443hvef5jf2.cloudfront.net/static/iframeintegration.js'></script>
<script type='text/javascript'>

window.addEventListener('load',  function(e) {
  setupEcwidPopupCentering('#myframe');
});

</script>

Ecwid can be embedded to a website in many ways. Sometimes a storefront can be inserted in an iframe container due to the limitations of a platform. To make sure that all popup windows such as customer account login popup are displayed in the center of an iframe, use the example code on the right in a main frame of your page.

setupEcwidPopupCentering() function accepts one argument, which is the ID of an iframe element, where Ecwid storefront is loaded. In order to work, setupEcwidPopupCentering() function needs to have iframeintegration.js file loaded for that frame.

Product listing

Enable latest product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.enable_new_product_list = true;
</script>

The recent version of product listing allows for more customization and better looking storefronts across all Ecwid stores. You can enable it in your Ecwid store using the example code on the right.

Customizing product listing

Check out all the customization options for the product listing available out of the box 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.

Table of contents:

Adding new elements to product grid

Ecwid’s latest version of product listing (category pages) works in a different 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
Control display mode of product title in product listing

Control display mode of product title in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_title_behavior = "SHOW_ON_HOVER"; // show product title on hover
</script>

Control the way product title is displayed in product listing (category pages).

Possible values: "SHOW", "HIDE", "SHOW_ON_HOVER".

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Control display mode of SKUs in product listing

Control display mode of SKUs in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.window.ec.storefront.product_list_sku_behavior = "HIDE"; // hide product SKU in product listing
</script>

Control the way product SKU is displayed in product listing (category pages).

Possible values: "SHOW", "HIDE", "SHOW_ON_HOVER".

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Control display mode of prices in product listing

Control display mode of prices in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_price_behavior = "HIDE"; // hide product SKU in product listing
</script>

Control the way product price is displayed in product listing (category pages).

Possible values: "SHOW", "HIDE", "SHOW_ON_HOVER".

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Control display mode of 'Buy now’ buttons in product listing

Control display mode of 'Buy now’ buttons in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_buybutton_behavior = "HIDE"; // hide product SKU in product listing
</script>

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

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Show frame / border for products in product listing

Show frame / border for products in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_show_frame = true; // show frame / border for products
</script>

Show or hide the frame / border for products in product listing (category pages).

Possible values: true, false.

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set align of SKU, price, name in product listing

Set align of SKU, price, name in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_product_info_layout = "LEFT"; // align name/sku/price to the left
</script>

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".

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set custom breadcrumbs separator in product listing

Set custom breadcrumbs separator in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.breadcrumbs_separator = "/"; // set breadcrumbs separator as '/', so it will look like: Store / Shoes / Children
</script>

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.

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Customize images in product listing
Control the size of images in product listing

Control the size of images in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_image_size = "LARGE"; // set large product image size in product listing 
</script>

Control the size of product image in product listing (category pages).

Possible values: "SMALL", "MEDIUM", "LARGE".

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Control the aspect ratio of images in product listing

Control the aspect ratio of images in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_image_aspect_ratio = "PORTRAIT_075"; // set portrait aspect ratio for images in product listing 
</script>

Control the aspect ratio of product image in product listing (category pages).

Possible values: "PORTRAIT_0667", "PORTRAIT_075", "SQUARE_1", "LANDSCAPE_1333", "LANDSCAPE_15".

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Apply shadow effect for images in product listing

Apply shadow effect for images in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_image_has_shadow = false; // hide shadow effect for product images
</script>

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.

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Show additional image on hover in product listing

Show additional image on hover in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_show_additional_image_on_hover = true; // show additional image on hover
</script>

Show or hide the additional image on hover in product listing (category pages).

Possible values: true, false.

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set product image display mode in product list

Set product image display mode to fit the block in product list

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_image_position = "FIT"; // Set product image display mode to fit the block in product list
</script>

Set product image display mode in product listing (category pages).

COVER: product image is set as block background proportionally to remove any empty spaces.

FIT: product image is set to fit into block. Any empty space is filled with an image background color.

AUTO: Ecwid fits the image based on its parameters.

Possible values: "AUTO", "COVER", "FIT" Default: "AUTO"

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set category image display mode in product list

Set category list image display mode to fit the block

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_category_image_position = "FIT"; // Set category image display mode to fit the block in product list
</script>

Set category image display mode in product listing (category pages).

COVER: category image is set as block background proportionally to remove any empty spaces.

FIT: category image is set to fit into block. Any empty space is filled with an image background color.

AUTO: Ecwid fits the image based on its parameters.

Possible values: "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.

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Show “ON SALE” label on product image

Show “ON SALE” label on product image in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_show_on_sale_label = true; // show "ON SALE" label on product image in product listing
</script>

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.

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Show “SOLD OUT” label on product image

Show “SOLD OUT” label on product image in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_show_sold_out_label  = true; // show "SOLD OUT" label on product image in product listing
</script>

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.

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
Set spacing between categories in product listing

Set spacing between categories in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_category_cell_spacing = 20; // set custom spacing between categories in product listing in pixels
</script>

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.

Possible values: integer numbers. 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.

Set spacing between products in product listing

Set spacing between products in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_cell_spacing = 20; // set custom spacing between categories in product listing in pixels 
</script>

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.

Possible values: integer numbers. 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.

Control display mode of category names in product listing

Control display mode of category names in product listing

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_category_title_behavior = "HIDE"; // hide category name in product listing
</script>

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".

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Product pages

Enable latest design of product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.enable_new_product_details = true;
</script>

The most recent version of product pages allows for more customization and better looking storefronts across all Ecwid stores. You can enable it in your Ecwid store using the example code on the right.

Customizing product pages

Check out all the customization options for the product details pages available out of the box 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.

Table of contents:

Setting values for product options

Set value for product options on product pages

// 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

// Sent '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

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 'change’ event to Ecwid that value was changed

Example

Check out an example code on the right.

Set layout of product pages

Set layout of product pages

<script>
  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
</script>

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".

Defalut 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.

Product name on product pages
Hide product name on product pages

Show or hide product name

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_product_name = false; // hide product name on product page
</script>

Show or hide product name. Defines the visibility of the product name on product pages.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Product name position on product pages

Set product name position

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_position_product_name = 500; // position product name lower in sidebar
</script>

Defines the position of the product name. The less number, the higher the element on the page

Defalut value: 100

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Product name position on mobile on product pages

Show product name always first on mobile

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_product_name_always_first_on_mobile = true; // position product name always on top on mobiles
</script>

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

Defalut value: false

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Hide breadcrumbs on product pages

Hide breadcrumbs on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_breadcrumbs = false; // hide breadcrumbs on product pages
</script>

Defines the visibility of breadcrumbs on product page.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set breadcrumbs position on product pages

Set breadcrumbs position on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_position_breadcrumbs = 200; // change breadcrumbs position on product pages
</script>

Defines the position of the breadcrumbs within the sidebar. The less the number is, the higher the element on the page**.

Defalut value: 200

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

SKU on product pages
Hide SKU on product pages

Hide SKU on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_product_sku = false; // hide SKU on product pages
</script>

Defines the visibility of SKU on product page.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set SKU position on product pages

Set SKU position on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_position_product_sku = 300; // set SKU position on product pages
</script>

Defines the position of the SKU within the sidebar. The less the number is, the higher the element on the page**.

Defalut value: 300

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Price on product pages
Hide price on product pages

Hide price on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_product_price = false; // hide price on product pages
</script>

Defines the visibility of price on product page.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set price position on product pages

Set price position on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_position_product_price = 400; // set price position on product pages
</script>

Defines the position of the SKU within the sidebar. The less the number is, the higher the element on the page**.

Defalut value: 400

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Sale price on product pages
Hide sale price on product pages

Hide sale price on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_sale_price = false; // hide sale price on product pages
</script>

Defines the visibility of sale price on product page.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Hide price per unit on product pages

Hide sale price on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_price_per_unit = false; // hide price per unit on product pages
</script>

Defines the visibility of price per unit on product page.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Tax on product pages
Hide tax on product pages

Hide tax on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_tax = false; // hide tax on product pages
</script>

Defines the visibility of tax on product page.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Product options on product pages
Hide product options on product pages

Hide product options on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_product_options = false; // hide product options on product pages
</script>

Defines the visibility of product options on product page.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set product options position on product pages

Set product options position on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_position_product_options = 500; // set product options position on product pages
</script>

Defines the position of the product options within the sidebar. The less the number is, the higher the element on the page**.

Defalut value: 500

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Hide price modifiers on product pages

Hide price modifiers on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.config.product_options.hide_price_modifiers = true; // hide price modifiers on product pages
</script>

Defines the visibility of price modifiers on product page.

Possible values: true, false

Defalut value: false

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Buy button block on product pages
Hide buy button block on product pages

Hide buy button block on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_buy_button = false; // hide buy button block on product pages
</script>

Defines the visibility of buy button block on product page.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set buy button block position on product pages

Set buy button block position on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_position_product_options = 600; // set buy button block position on product pages
</script>

Defines the position of the buy button block within the sidebar. The less the number is, the higher the element on the page**.

Defalut value: 600

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

'Qty’ block on product pages
Hide 'Qty’ on product pages

Hide 'Qty’ on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_qty = true; // hide 'Qty' on product pages
</script>

Defines the visibility of 'Qty’ on product page.

Possible values: true, false

Defalut value: false

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Hide number of items in stock on product pages

Hide number of items in stock on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_number_of_items_in_stock = false; // hide number of items in stock on product pages
</script>

Defines the visibility of number of items in stock on product page.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

'In stock’ label on product pages
Hide 'In stock’ label on product pages

Hide 'In stock’ label on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_in_stock_label = false; // hide 'In stock' label on product pages
</script>

Defines the visibility of 'In stock’ label on product page.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Wholesale pricing table on product pages
Hide wholesale prices on product pages

Hide wholesale prices on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_wholesale_prices = false; // hide wholesale prices on product pages
</script>

Defines the visibility of wholesale prices on product page.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set wholesale pricing table position on product pages

Set wholesale pricing table position on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_position_wholesale_prices = 700; // set wholesale pricing table position on product pages
</script>

Defines the position of the wholesale pricing table within the sidebar. The less the number is, the higher the element on the page**.

Defalut value: 700

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Product description on product pages
Hide product description on product pages

Hide product description on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_product_description = false; // hide product description on product pages
</script>

Defines the visibility of product description on product page.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set product description position on product pages

Set product description position on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_position_product_description = 800; // set wholesale pricing table position on product pages
</script>

Defines the position of the product description within the sidebar. The less the number is, the higher the element on the page**.

Defalut value: 800

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Cut product description to one paragraph

Cut product description to one paragraph

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_cut_product_description_in_sidebar = true; // cut product description on product pages to one paragraph
</script>

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

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Show description under main image (for right sidebar layout)

Show description under main image (for right sidebar layout)

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_two_columns_with_right_sidebar_show_product_description_on_sidebar = false; // Show description under main image (for right sidebar layout)
</script>

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. See product page layout

Possible values: true, false

Defalut value: false

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Show description under main image (for left sidebar layout)

Show description under main image (for left sidebar layout)

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_two_columns_with_left_sidebar_show_product_description_on_sidebar = false; // Show description under main image (for left sidebar layout)
</script>

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. See product page layout

Possible values: true, false

Defalut value: false

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

'Save for later’ block on product pages
Hide 'Save for Later’ block on product pages

Hide 'Save for Later’ block on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_save_for_later = false; // hide 'Save for Later' block on product pages
</script>

Defines the visibility of 'Save for Later’ block on product page.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set 'Save for Later’ block position on product pages

Set 'Save for Later’ block position on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_position_save_for_later = 900; // set 'Save for Later' block position on product pages
</script>

Defines the position of the 'Save for Later’ block within the sidebar. The less the number is, the higher the element on the page**.

Defalut value: 900

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Share buttons on product pages
Hide share buttons on product pages

Hide share buttons on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_share_buttons = false; // hide share buttons on product pages
</script>

Defines the visibility of share buttons on product page.

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set share buttons position on product pages

Set share buttons position on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_position_share_buttons = 1000; // set share buttons position on product pages
</script>

Defines the position of the share buttons within the sidebar. The less the number is, the higher the element on the page**.

Defalut value: 1000

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set layout of gallery on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_gallery_layout = "IMAGE_FEED"; // set product gallery layout on product pages
</script>

Set different layout of gallery on product pages.

  • "THUMBNAILS_HORIZONTAL" shows them below image in a classic way with small thumbnails next to each other.
  • "THUMBNAILS_VERTICAL" shows additional product images on the left from the main image.
  • "FEED" shows the them as feed with large detaied images.

Possible values: "IMAGE_SINGLE_THUMBNAILS_HORIZONTAL", "IMAGE_SINGLE_THUMBNAILS_VERTICAL", "IMAGE_FEED".

Defalut value: "IMAGE_SINGLE_THUMBNAILS_HORIZONTAL"

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Preview gallery images in full screen on click

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_additional_images_preview_on_click = false; // Preview gallery images in full screen on click
</script>

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==FEED’

Possible values: true, false

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Add shadow to gallery images

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_additional_images_has_shadow = true; // add shadow to gallery images
</script>

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

Defalut value: false

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Set aspect ratio for gallery thumbnails

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_thumbnails_aspect_ratio = "PORTRAIT_075"; // Set aspect ratio for gallery thumbnails
</script>

Set the image aspect ratio for gallery tumbnails. If "AUTO" each tumbnails has the ratio that closest to its actual proportions. Hovever you can force different ratio to all tumbnails.

Possible values: "AUTO", "PORTRAIT_0667", "PORTRAIT_075", "SQUARE_1", "LANDSCAPE_1333", "LANDSCAPE_15".

Defalut value: "AUTO"

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Allow scroll of gallery images on product pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_image_carousel = false; // allow scroll of gallery images on product pages
</script>

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

Defalut value: true

If you apply the change after storefront has loaded, you can update its look on the fly using the Ecwid.refreshConfig() function.

Change storefront labels

Format example

<script type="text/javascript">
  ecwidMessages = { 
    "LABEL_NAME":"LABEL_VALUE", 
    "LABEL_NAME-2":"LABEL_VALUE-2", 
    "OTHER_LABEL_NAME":"OTHER_LABEL_VALUE" 
  }; 
</script>

Every text in Ecwid (that is not added by a merchant) is a label. You can change these labels yourself to translate your storefront or to make the wording more fitting a merchant’s individual Ecwid setup.

This translation includes adding of a special JavaScript code with the updated labels before the Ecwid integration code.

Replace “Shopping Bag” with “Shopping Cart”

<script type="text/javascript">
  ecwidMessages = {
    "BreadCrumbs.your_bag" : "Your shopping cart",
    "Minicart.shopping_bag" : "Shopping Cart",
    "ShoppingCartView.shopping_bag" : "Your Shopping Cart",
    "EmptyShoppingCartPanel.empty" : "Your Shopping Cart is empty"
  };
</script>

The format of this code is presented on the right. LABEL_NAME is the internal name of the text label. LABEL_VALUE is the text that is shown in the storefront.

For example: to replace the “Shopping Bag” text with “Shopping Cart” in the bag widget and “your bag” page, we need to add the following code before this line: <script type='text/javascript' src='http://app.ecwid.com/script.js?store_id'></script>

on your web page. See the example one the right!

Important notes:

  • each line must be ended with comma except the last line
  • do not leave empty lines in the Javascript code
  • the special chars should be escaped. For example if the value of a label has double quote(“) it should be escaped with the slash(\”)
  • some buttons are actually images, so you cannot translate them using JavaScript. Use CSS code to replace the images
  • keep HTML tags in the label values, they’re necessary for correct Ecwid work
  • mind the spaces after the label values. Some labels have it. So make sure that they won’t be loaded during the translation.
  • UTF-8 charset is strongly recommended
  • if you don’t like to insert many JavaScript lines to your store page, you can move them to the external JavaScript file: www.ecwid.com/forums/showthread.php?p=2337#15

If you’re not familiar with JavaScript, but want to translate a store or change its labels, you can use Storefront Label Editor or the Ecwid Translate Tool. It will make the translation much easier.

Change default colors and fonts

Change any color and main font for user’s storefront

Apply colors and fonts to storefront automatically from a website

Set storefront colors and font automatically

<script>
window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.chameleon = window.ec.config.chameleon || Object();
window.ec.config.chameleon.font = 'auto';
window.ec.config.chameleon.colors = 'auto';
</script>

Ecwid can automatically detect the main colors and fonts of a surrounding website and match the storefront automatically. To apply the colors and font automatically for a store, use the code on the right.

Set storefront colors

Set storefront colors automatically

<script>
window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.chameleon = window.ec.config.chameleon || Object();
window.ec.config.chameleon.colors = 'auto';
</script>

Set storefront colors manually

<script>
window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.chameleon = window.ec.config.chameleon || Object();
window.ec.config.chameleon.colors = {
  'color-background':'#D3D3D3',
  'color-foreground':'#4EA3F0',
  'color-link':'#FF0606',
  'color-button':'#4EA3F0',
  'color-price':'#FF0606'
}
</script>

Set storefront colors and font example

<script>
window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.chameleon = window.ec.config.chameleon || Object();
window.ec.config.chameleon = {
  colors: {
    'color-button':'#4EA3F0',
    'color-price':'#FF0606'
  },
  font: {
    'font-family': 'arial,sans-serif'
  }
}
</script>

Using the global Ecwid config object window.ec.config you can control the colors in user’s storefront. To pre-define colors for a storefront, add JavaScript code on the right in the same frame, where Ecwid integration code is added.

auto value allows Ecwid to detect the website colors around Ecwid storefront to adapt its colors automatically. Use the fields below to set colors manually.

Fields:

NameTypeDescription
color-backgroundstring (HEX and RGBA color)Background color for storefront and small buttons (“Clear bag”, “Apply”, etc.)
color-foregroundstring (HEX and RGBA color)Color of all texts in storefront
color-linkstring (HEX and RGBA color)Color for links in storefront (breadcrumbs, “Sign In”, “Favourites”, etc.)
color-buttonstring (HEX and RGBA color)Color for main buttons in storefront (“Add to bag”, “Checkout”, etc.) and small buttons on mouse hover (“Clear bag”, “Apply”, etc.)
color-pricestring (HEX and RGBA color)Color for product prices in storefront

Set storefront font

Set storefront font automatically

<script>
window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.chameleon = window.ec.config.chameleon || Object();
window.ec.config.chameleon.font = 'auto';
</script>

Set storefront font manually

<script>
window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.chameleon = window.ec.config.chameleon || Object();
window.ec.config.chameleon.font = {
  'font-family': 'arial,sans-serif'
}
</script>

Set storefront colors and font example

<script>
window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.chameleon = window.ec.config.chameleon || Object();
window.ec.config.chameleon = {
  colors: 'auto',
  font: {
      'font-family': 'arial,sans-serif'
    }
  }
</script>

Using the global Ecwid config object window.ec.config you can control the fonts of all texts displayed in user’s storefront. To pre-define a font for a storefront, add JavaScript code on the right in the same fram, where Ecwid integration code is added.

auto value allows Ecwid to detect the website’s main font to adapt its font automatically. You can also set a specific font-family for a storefront manually.

Custom themes

Example of custom CSS to modify storefront

/*
 * Change Ecwid buttons style 
 */
button.gwt-Button, #wrapper button.gwt-Button { 
  border-radius: 13px; 
  -moz-border-radius: 13px; 
  -webkit-border-radius: 13px; 
  height: 28px; 
  background-color: #e4e4e4; 
  padding: 0 15px; 
}  

button.gwt-Button:active,
#wrapper button.gwt-Button:active { 
  background-color: #999999; 
}  

div.ecwid-productBrowser-details-rightPanel div.ecwid-productBrowser-backgroundedPanel {
  min-width:185px; 
  width:auto; 
}

Add custom CSS theme in Ecwid Control Panel (for a single store)

Ecwid provides a merchant with a built-in CSS customization tool in their control panel in the 'Design’ section: Ecwid automatically loads the CSS code entered by user in their storefront. This allows merchants to customize their store look and feel flexibly. See also “How to change Ecwid design” article in our knowledge base.

Add custom CSS theme in an app (for multiple stores at once)

Ecwid API allows you to do the same in more convenient way: you simply specify the URL of file with your custom CSS code and Ecwid automatically loads that code in the user storefront. So you don’t need to put the CSS on user site manually or ask a merchant to do that.

In more details:

  1. After your app is registered, contact us and provide the https URL of the .css and file you’d like to load in the user storefront.
  2. When asking a user to install your app, Ecwid will request the customize_storefront permission from them. (If your app is for a specific store, make sure to add customize_storefront scope in the OAuth process.)
  3. The next time merchant’s storefront is loaded in any browser or website, your external CSS file will be automatically appended, loaded, and executed on that page.

Q: Can I create new themes as apps?

Yes, you can! Please check out this page for more details: How to create a theme

Store-specific custom CSS

You may want to apply different CSS codes depending on the store your application is loaded.

For example, if your application provides new design themes for merchant storefront, you may need to give a merchant ability to choose the theme they want to enable and change the applied CSS code according to their choice.

In such cases, you will need to use custom JS files to dynamically detect merchant store ID and load different styles depending on the user store ID. See Custom JavaScript files for details.

Storefront interface translations

When the app adds new features to storefront that need translations, most likely the app loads its external JavaScript code too.

The app can determine the current language of storefront using the JS API method: Ecwid.getStorefrontLang

To translate the app in storefront, use these steps:

1/ Determine storefront language before initializing the app 2. Set/load the required translated text labels for app interface

If the current language is not supported, use the fallback labels. For example, load English texts if user is Spanish and you don’t have Spanish translations yet.