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

The latest version of product grid requires specific approach to adding new elements. Check out the example: https://gist.github.com/riq363/13730a82dbee20bb464daf0713ca1997

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("defaultCategoryId=20671017"); </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

Apply new storefront configuration template

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.CONFIG_NAME = VALUE; 
</script>

Hide sign in link example

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

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.

Config nameTypeDescription
show_signin_linkbooleanHide the sign in link for customers in a store. Possible values: true to show the sign in link, and false to hide it
show_breadcrumbsbooleanHide the storefront breadcrumbs for customers in a store. Possible values: true to show the breadcrumbs, and false to hide them
product_list_show_sort_viewas_optionsbooleanHide the options to ‘View as’ and 'Sort by’ products for customers in a store. Possible values: true to show the 'View as’ and 'Sort by’ options, and false to hide them
show_footer_menubooleanHide or show footer menu with the Bag / Sign in / Favs links is shown in the new storefront
show_skubooleanHide or show the product SKU in the catalog (product list and product details page). Has less priority than 'product_list_sku_behavior’

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.

P.S. this solution also works for the popups in the Ecwid Control Panel embedded in an iframe container.

Product listing

The product listing allows for more customization and better looking storefronts across all Ecwid stores. Check out the available customization options below.

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

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

Apply new storefront configuration template

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.CONFIG_NAME = VALUE; 
</script>

Show product SKU on hover example

<script>
  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
</script>
Config nameTypeDescription
product_list_title_behaviorstringControl display mode of product title in product listing (category pages). Possible values: "SHOW", "HIDE", "SHOW_ON_HOVER"
product_list_sku_behaviorstringControl display mode of product SKU in product listing (category pages). Possible values: "SHOW", "HIDE", "SHOW_ON_HOVER"
product_list_price_behaviorstringControl display mode of product price in product listing (category pages). Possible values: "SHOW", "HIDE", "SHOW_ON_HOVER"
product_list_price_behaviorstringControl the way product price is displayed in product listing (category pages). Possible values: "SHOW", "HIDE", "SHOW_ON_HOVER"
product_list_buybutton_behaviorstringControl 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_framebooleanShow or hide the frame / border for products in product listing (category pages). Possible values: true, false
product_list_product_info_layoutstringSet 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_separatorstringSet 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_behaviorstringControl the way category names are displayed in product listing (category pages). Possible values: "SHOW_ON_IMAGE" – default, "SHOW_BELOW_IMAGE", "HIDE", "SHOW_ON_HOVER"
show_skubooleanHide or show the product SKU in the catalog (product list and product details page). Has less priority than product_list_sku_behavior

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

Apply new storefront configuration template

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.CONFIG_NAME = VALUE; 
</script>

Show shadow for products in product list

<script>
  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
</script>
Config nameTypeDescription
product_list_image_sizestringControl the size of product image in product listing (category pages). Possible values: "SMALL", "MEDIUM", "LARGE"
product_list_image_aspect_ratiostringControl the aspect ratio of product image in product listing (category pages). Possible values: "PORTRAIT_0667", "PORTRAIT_075", "SQUARE_1", "LANDSCAPE_1333", "LANDSCAPE_15"
product_list_image_has_shadowbooleanShow 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_hoverbooleanShow or hide the additional image on hover in product listing (category pages). Possible values: true, false
product_list_image_positionstringSet 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"
product_list_category_image_positionstringSet 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
product_list_show_on_sale_labelbooleanShow 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_labelbooleanShow 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

Apply new storefront configuration template

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_list_category_cell_spacing = 20; 
</script>
Config nameTypeDescription
product_list_category_cell_spacingintegerSet 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_spacingintegerSet 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.

Product pages

The product pages allow for more customization and better looking storefronts across all Ecwid stores. Check the available customization options below.

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

Control visibility of elements in product details pages

Apply new storefront configuration template

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.CONFIG_NAME = VALUE; 
</script>

Hide product name from product details pages

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.product_details_show_product_name = false;
</script>
Config nameTypeDescription
product_details_show_product_namebooleanShow or hide product name. Defines the visibility of the product name on product pages. Possible values: true, false. Defalut value: true
product_details_show_breadcrumbsbooleanDefines the visibility of breadcrumbs on product page. Possible values: true, false. Defalut value: true
product_details_show_product_skubooleanDefines the visibility of SKU on product page. Possible values: true, false. Defalut value: true
product_details_show_product_pricebooleanDefines the visibility of price on product page. Possible values: true, false. Defalut value: true
product_details_show_sale_pricebooleanDefines the visibility of sale price on product page. Possible values: true, false. Defalut value: true
product_details_show_price_per_unitbooleanDefines the visibility of price per unit on product page. Possible values: true, false. Defalut value: true
product_details_show_taxbooleanDefines the visibility of tax on product page. Possible values: true, false. Defalut value: true
product_details_show_product_optionsbooleanDefines the visibility of product options on product page. Possible values: true, false. Defalut value: true
product_options.hide_price_modifiersbooleanDefines the visibility of price modifiers on product page. Possible values: true, false. Defalut value: false
product_details_show_buy_buttonbooleanDefines the visibility of buy button block on product page. Possible values: true, false. Defalut value: true
product_details_show_qtybooleanDefines the visibility of 'Qty’ on product page. Possible values: true, false. Defalut value: false
product_details_show_number_of_items_in_stockbooleanDefines the visibility of number of items in stock on product page. Possible values: true, false. Defalut value: true
product_details_show_in_stock_labelbooleanDefines the visibility of 'In stock’ label on product page. Possible values: true, false. Defalut value: true
product_details_show_wholesale_pricesbooleanDefines the visibility of wholesale prices on product page. Possible values: true, false. Defalut value: true
product_details_show_product_descriptionbooleanDefines the visibility of product description on product page. Possible values: true, false. Defalut value: true
product_details_show_save_for_laterbooleanDefines the visibility of 'Save for Later’ block on product page. Possible values: true, false. Defalut value: true
product_details_show_share_buttonsbooleanDefines the visibility of share buttons on product page. Possible values: true, false. Defalut value: true
product_details_additional_images_has_shadowbooleanDefines 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
product_details_image_carouselbooleanDefines 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
product_details_show_qtybooleanHide 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_labelbooleanHide 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_stockbooleanHide 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_skubooleanHide or show the product SKU in the catalog (product list and product details page). Has less priority than product_list_sku_behavior

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

Apply new storefront configuration template

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.CONFIG_NAME = VALUE; 
</script>
Config nameTypeDescription
product_details_show_product_name_always_first_on_mobilebooleanDefines 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
product_details_cut_product_description_in_sidebarbooleanIf 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
product_details_two_columns_with_right_sidebar_show_product_description_on_sidebarbooleanIf 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
product_details_two_columns_with_left_sidebar_show_product_description_on_sidebarbooleanIf 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
product_details_gallery_layoutstringSet different layout of gallery on product pages.
  • "IMAGE_SINGLE_THUMBNAILS_HORIZONTAL" shows them below image in a classic way with small thumbnails next to each other.
  • "IMAGE_SINGLE_THUMBNAILS_VERTICAL" shows additional product images on the left from the main image.
  • "IMAGE_FEED" shows the them as feed with large detaied images.
Defalut value: "IMAGE_SINGLE_THUMBNAILS_HORIZONTAL"
product_details_additional_images_preview_on_clickbooleanDefines 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. Defalut value: true
product_details_thumbnails_aspect_ratiostringSet 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.

Control position of elements on product details pages

Apply new storefront configuration template

<script>
  window.ec = window.ec || Object();
  window.ec.storefront = window.ec.storefront || Object();
  window.ec.storefront.CONFIG_NAME = VALUE; 
</script>
Config nameTypeDescription
product_details_position_product_namenumberDefines the position of the product name. The less number, the higher the element on the page. Defalut value: 100
product_details_position_breadcrumbsnumberDefines the position of the breadcrumbs within the sidebar. The less the number is, the higher the element on the page**. Defalut value: 200
product_details_position_product_skunumberDefines the position of the SKU within the sidebar. The less the number is, the higher the element on the page**. Defalut value: 300
product_details_position_product_pricenumberDefines the position of the SKU within the sidebar. The less the number is, the higher the element on the page**. Defalut value: 400
product_details_position_product_optionsnumberDefines the position of the product options within the sidebar. The less the number is, the higher the element on the page**. Defalut value: 500
product_details_position_buy_buttonnumberDefines 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
product_details_position_wholesale_pricesnumberDefines 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
product_details_position_product_descriptionnumberDefines the position of the product description within the sidebar. The less the number is, the higher the element on the page**. Defalut value: 800
product_details_position_save_for_laternumberDefines 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
product_details_position_share_buttonsnumberDefines 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.

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. Register your app with Ecwid that customizes storefront.
  2. Contact us and provide the https URL of the .css and file you’d like to load in the user storefront.
  3. 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.)
  4. 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.