Change store design with the configuration settings. Access page layouts for product, category, and checkout pages, and font settings and labels for texts across the storefront.
How to apply design configuration with HTML code
Design config requires an additional Ecwid.refreshConfig && Ecwid.refreshConfig();
line to apply the changes.
Code example:
<script>
window.ec = window.ec || Object();
window.ec.storefront = window.ec.storefront || Object();
window.ec.storefront.CONFIG_NAME = VALUE;
Ecwid.refreshConfig && Ecwid.refreshConfig();
</script>
General store design settings
Config name | Type | Description |
---|---|---|
show_signin_link | boolean | Visibility of the sign in link for customers: set true to show the element or false to hide it. |
show_breadcrumbs | boolean | Visibility of the breadcrumbs: set true to show the element or false to hide it. |
breadcrumbs_have_home_item | boolean | Visibility of the home page link in breadcrumbs: set true to show the element or false to hide it. |
breadcrumbs_home_url | string | Set the URL to the home link in breadcrumbs. Empty by default |
breadcrumbs_separator | string | Defines breadcrumbs separator. Available values: any string. For example: / getsStore / SubCategory / SubSubCategory -> getsStore -> SubCategory -> SubSubCategory |
product_list_show_sort_viewas_options | boolean | Visibility of the 'View as' and 'Sort by' options for category pages: set true to show the element or false to hide it. |
show_footer_menu | boolean | Visibility of the footer menu: set true to show the element or false to hide it. |
show_sku | boolean | Visibility of the product SKUs in category and product pages (less priority than the product_list_sku_behavior config): set true to show the element or false to hide it. |
show_root_categories | boolean | Visibility of the category grid on the home page: set true to show the element or false to hide it. |
product_filters_position_search_page | boolean | Position of the filters on the search page. Available values: LEFT (default), RIGHT . |
Category and search pages
Config name | Type | Description |
---|---|---|
enable_catalog_on_one_page | boolean | Defines if the one-page catalog is enabled: set true to enable or false to disable it.One-page catalog shows all categories on the home page. |
enable_simple_category_list | boolean | Defines if all categories have the same number of cards in a row: set true to enable or false to disable it. |
product_list_title_behavior | string | Defines display mode of product title: "SHOW" , "HIDE" , "SHOW_ON_HOVER" . |
product_list_sku_behavior | string | Defines display mode of product SKU*: "SHOW" , "HIDE" , "SHOW_ON_HOVER" . |
product_list_price_behavior | string | Defines display mode of product price: "SHOW" , "HIDE" , "SHOW_ON_HOVER" . |
product_list_subtitles_behavior | string | Defines display mode of product subtitle: "SHOW" , "HIDE" , "SHOW_ON_HOVER" . |
product_list_buybutton_behavior | string | Defines display mode of the 'Buy now' button: "SHOW" , "HIDE" , "SHOW_ON_HOVER" .The 'Buy now' button must first be enabled in the Ecwid admin > Settings > General > Cart > Show "Buy now" buttons. |
product_list_show_frame | boolean | Visibility of the border for product cards: set true to show the element or false to hide it. |
product_list_product_info_layout | string | Defines alignment for SKU, price, and name in product cards. Available values: "CENTER" , "LEFT" , "JUSTIFY" , "RIGHT" . |
product_list_category_title_behavior | string | Defines how category names are displayed on category pages. Available values: "SHOW_ON_IMAGE" (default), "SHOW_BELOW_IMAGE" , "HIDE" , "SHOW_ON_HOVER" . |
product_list_show_product_images | boolean | Visibility of the product images on category pages: set true to show the element or false to hide it. |
product_filters_position_category_page | string | Defines alignment for product filters on category pages. Available values: "LEFT" (default), "RIGHT" . |
product_filters_position_search_page | string | Defines alignment for product filters on search pages. available values: "LEFT" (default), "RIGHT" . |
product_filters_opened_by_default_on_category_page | boolean | Defines if product filters are opened by default. Available values: true , false (default). |
Product pages
Config name | Type | Description |
---|---|---|
product_details_layout | string | Defines layout for product pages. Available 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" . |
product_details_show_breadcrumbs | boolean | Visibility of the breadcrumbs on product pages: set true to show the element or false to hide it. |
product_details_show_product_name | boolean | Visibility of the product name: set true to show the element or false to hide it. |
product_details_show_product_sku | boolean | Visibility of the product SKU: set true to show the element or false to hide it. |
product_details_show_product_price | boolean | Visibility of the product price: set true to show the element or false to hide it. |
product_details_show_sale_price | boolean | Visibility of the product sale price: set true to show the element or false to hide it. |
product_details_show_price_per_unit | boolean | Visibility of the product price per unit: set true to show the element or false to hide it. |
product_details_show_tax | boolean | Visibility of the product taxes: set true to show the element or false to hide it. |
product_details_show_product_options | boolean | Visibility of the product options block: set true to show the element or false to hide it. |
product_details_hide_price_modifiers | boolean | Visibility of the price modifiers for product options: set true to show the element or false to hide it. |
product_details_show_buy_button | boolean | Visibility of the buy button on product pages: set true to show the element or false to hide it. |
product_details_show_qty | boolean | Visibility of the "quantity" field on product pages: set true to show the element or false to hide it. |
product_details_show_attributes | boolean | Visibility of the product attributes: set true to show the element or false to hide it. |
product_details_show_weight | boolean | Visibility of the product weight: set true to show the element or false to hide it. |
product_details_show_number_of_items_in_stock | boolean | Visibility of the items in stock on product pages: set true to show the element or false to hide it. |
product_details_show_in_stock_label | boolean | Visibility of the 'In stock' label on product pages: set true to show the element or false to hide it. |
product_details_show_wholesale_prices | boolean | Visibility of the wholesale prices: set true to show the element or false to hide it. |
product_details_show_product_description | boolean | Visibility of the product description: set true to show the element or false to hide it. |
product_details_show_save_for_later | boolean | Visibility of the 'Save for Later' block on product pages: set true to show the element or false to hide it. |
product_details_show_share_buttons | boolean | Visibility of the share buttons block: set true to show the element or false to hide it. |
product_details_show_facebook_share_button | boolean | Visibility of the Facebook share button: set true to show the element or false to hide it. |
product_details_show_pinterest_share_button | boolean | Visibility of the Pinterest share button: set true to show the element or false to hide it. |
product_details_show_twitter_share_button | boolean | Visibility of the Twitter share button: set true to show the element or false to hide it. |
product_details_show_vk_share_button | boolean | Visibility of the VKontakte share button: set true to show the element or false to hide it. |
product_details_image_carousel | boolean | Visibility of the gallery images: set true to show the element or false to hide it. |
product_details_additional_images_has_shadow | boolean | Visibility of the shadow for gallery images: set true to show the element or false to hide it. |
product_details_show_subtitle | boolean | Visibility of product subtitles: set true to show the element or false to hide it. |
product_details_show_navigation_arrows | boolean | Visibility of image navigation arrows on product pages: set true to show the element or false to hide it. |
product_details_show_product_photo_zoom | boolean | Defines availability of image hover zoom on product pages: set true to enable or false to disable. |
product_details_show_product_name_always_first_on_mobile | boolean | Defines if the product name is always on top on mobile: set true to enable or false to disable. |
product_details_cut_product_description_in_sidebar | boolean | Defines if the product description shows in the sidebar and displays only one paragraph with the "Show more"expand button: set true to enable or false to disable. |
product_details_two_columns_with_right_sidebar_show_product_description_on_sidebar | boolean | Defines if the product description shows in the sidebar for two columns and right sidebar config: set true to enable or false to disable. |
product_details_two_columns_with_left_sidebar_show_product_description_on_sidebar | boolean | Defines if the product description shows in the sidebar for two columns and left sidebar config: set true to enable or false to disable. |
product_details_gallery_layout | boolean | Defines layout for image gallery on product pages. Available values: IMAGE_SINGLE_THUMBNAILS_HORIZONTAL , IMAGE_SINGLE_THUMBNAILS_VERTICAL ,IMAGE_FEED . |
product_details_additional_images_preview_on_click | boolean | Visibility of gallery images on fullscreen image preview: set true to show the element or false to hide it. |
product_details_thumbnails_aspect_ratio | boolean | Defines image aspect ratio for gallery thumbnails. Available values: "AUTO" , "PORTRAIT_0667" , "PORTRAIT_075" , "SQUARE_1" , "LANDSCAPE_1333" , "LANDSCAPE_15" . |
product_details_show_breadcrumbs_position | boolean | Defines the position of breadcrumbs on product pages. Available values: PRODUCT_DETAILS_SIDEBAR , NAVIGATION_CONTAINER . |
Checkout pages
Config name | Type | Description |
---|---|---|
shopping_cart_show_qty_inputs | boolean | Visibility of the "quantity" field on the checkout pages: set true to show the element or false to hide it. |
shopping_cart_show_sku | boolean | Visibility of the item SKU on checkout pages: set true to show the element or false to hide it. |
shopping_cart_show_weight | boolean | Visibility of the item weight on checkout pages: set true to show the element or false to hide it. |
checkout_show_state_input | boolean | Visibility of the state field in checkout address forms: set true to show the element or false to hide it. |
checkout_show_address_line_2 | boolean | Visibility of the address_line_2 field in checkout address forms: set true to show the element or false to hide it. |
shopping_cart_products_collapsed_on_desktop | boolean | Defines if the list of products is auto-collapsed on desktop cart pages if the cart has more than 4 products: set true to enable (default) or false to disable. |
shopping_cart_products_collapsed_on_mobile | boolean | Defines if the list of products is auto-collapsed on mobile cart pages: set true to enable (default) or false to disable. |
checkout_expand_billing_address_form | boolean | Defines if the billing address form is auto-expanded on the checkout: set true to enable or false to disable (default). |
Fonts and colors
Ecwid has an additional chameleon
config allowing you to change store colors, font parameters, and label texts. It can also be used to automatically set storefront font and color settings matching the ones you use on your website where Ecwid store is integrated.
Set storefront fonts and 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.font = 'auto';
window.ec.config.chameleon.colors = 'auto';
Ecwid.refreshConfig && Ecwid.refreshConfig();
</script>
Set storefront fonts and 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'
}
window.ec.config.chameleon.font = {
'font-family':'arial,sans-serif'
}
Ecwid.refreshConfig && Ecwid.refreshConfig();
</script>
The chameleon.colors
config allows you to set the following settings:
Name | Type | Description |
---|---|---|
color-background | string (HEX and RGBA color) | Background color for storefront and small buttons ("Clear bag", "Apply", etc.). |
color-foreground | string (HEX and RGBA color) | Color of all texts. |
color-link | string (HEX and RGBA color) | Color for all links (breadcrumbs, "Sign In", "Favourites", etc.). |
color-button | string (HEX and RGBA color) | Color for main buttons ("Add to bag", "Checkout", etc.) and small buttons on mouse hover ("Clear bag", "Apply", etc.). |
color-price | string (HEX and RGBA color) | Color for product prices. |
gallery.use_exact_colors | boolean | If true , background color for gallery images will match color-foreground setting. Default value is false . |
Storefront labels
Most storefront texts have an internal "label" assigned to them. You can use this label to change the wording in your store.
We have a free tool for searching and changing text labels without coding called Storefront Label Editor. However, once you find a label with the app, you can apply text changes with JavaScript code. Use it if you want to have a store on several websites and change wordings on these websites independently.
Code example:
<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>