Store configuration settings

Ecwid has a wide range of available configuration settings including both behavioral and design ones. You can call these settings dynamically through the JavaScript code based on specific conditions or apply them always by putting into the page HTML code.

Apply configuration with JavaScript code

With JavaScript code, you can apply configuration settings both always or based on certain conditions or events that happen in the store. While it grants more flexibility, you are required to set up a custom application with a JavaScript file hosted on your side to work this way.

Read more on setting up a JavaScript file for a custom app.

Apply configuration with HTML code

To always apply configuration settings without any JS code, you need access to the HTML code of the website. Search https://app.ecwid.com/script.js to find where Ecwid script is called in the code and add configuration settings inside a <script> block right below it.

Code example:

<div id="my-store-STOREID"></div>
<div>
	<script 
          data-cfasync="false" 
          type="text/javascript" 
          src="https://app.ecwid.com/script.js?STOREID&data_platform=code" 
          charset="utf-8">
  </script>
  <script 
          type="text/javascript"> xProductBrowser("id=my-store-STOREID", "defaultCategoryId=CATEGORYID");
  </script>
</div>

<script>

//add configuration code here

</script>

Redirect after purchase

Use this config to redirect customers to a custom URL instead of the "Thank you for purchase" page after a successful online payment.

Code example:

window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.custom_redirect_after_purchase = 'https://mycoolstore.com/thank-you.html';

This method only works for online payment methods. If an order is paid with an offline payment method, customer's won't be redirected to a specified URL.

Custom scroll behavior

This method allows you to set up a custom scroll position, disable auto-scroll, and create custom scroll behavior on your website.

Code example:

window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.scroll_indent = 150; // Set up a custom scroll position in px from page top

// Disable auto-scroll
window.history.scrollRestoration = 'auto';
window.ec.config.navigation_scrolling = "DISABLED";

// Or add custom scroll behavior
window.ec.config.navigation_scrolling = "CUSTOM";
window.ec.config.custom_scroller = function() { 
	window.scrollTo(500, 0); //scroll to 500px from top
};

Set main store URL for widgets

Similarly to Ecwid.setStorefrontBaseUrl(), this method allows specifying a base store URL when you have several Ecwid widgets on different pages of your custom website. As a result, all widgets will point to the checkout on one of the pages.

Code example:

window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.store_main_page_url = "http://www.example.com/store.html";

Set storefront language for search engine crawlers

Ecwid allows several translations for the same page. That helps with creating multilanguage websites, but search engines could get distracted by same-looking pages. To help them index your website better, use our configs for automatic generation of the hreflang meta tags.

Force auto-generation of meta tags for the storefront by adding theenableHreflangTags and internationalPages configs.

• enableHreflangTags enables generation of the hreflang meta tag.
• internationalPages sets URLs for storefront translations. Google Search Engine recommendations on 'locale' values.

Config example:

window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
ec.config.storefrontUrls.enableHreflangTags = true;
ec.config.storefrontUrls.internationalPages = {
  "en": "https://site.com/store",
  "fr": "https://fr.site.com/store",
  "es-mx": "https://mx.site.com/store",
  "default": "https://site.com/store"
}