Scroll position

Offset default storefront scroll position

Some websites have sticky headers which stay in the same place as user scrolls the page down. When navigating to a new page in Ecwid storefronts, it will scroll to the top of the store page area automatically.

By default, Ecwid can detect the sticky headers and offset the scroll position so that both website header is visible as well as the top area of a store page. However, you can override this value with a custom one. See the example on the right.

window.ec = window.ec || {};
  window.ec.config = window.ec.config || {};
  window.ec.config.scroll_indent = 150;

Important: if store page title is clearly visible or there is little space between the page top and store area – the scroll indent will be disabled.

📘

If you are using a custom scroll position, it will override the scroll_indent described here.

Disable force scrolling to storefront

When Ecwid storefront widget is added to a website, the page will be scrolled to the beginning of storefront by default.

If you want to disable this behaviour, use the window.ec.config.navigation_scrolling config variable. Possible values:

• "DISABLED"
• "IMMEDIATELY"
• "CUSTOM"

Default value: "IMMEDIATELY"

If you need to scroll to a custom position when navigating the Ecwid store, use the "CUSTOM" value and set your custom scrolling function in the window.ec.config.custom_scroller configuration.

window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.navigation_scrolling = "DISABLED";
window.ec.config.custom_scroller = function() {};

window.ec = window.ec || Object();
window.ec.config = window.ec.config || Object();
window.ec.config.navigation_scrolling = "CUSTOM";

window.ec.config.custom_scroller = function() {
  window.scrollTo(500, 0);
};

📘

If you use a sticky header on your website, you may want to offset the default storefront scroll position by X amount of pixels. Learn more

Alternative way to disable scrolling to the beginning of storefront is to use the window.history.scrollRestoration config variable with the "auto" value.

window.history.scrollRestoration = 'auto';