The store component, activated by
data-tipser-store tag, is the simplest way to present a group of collections (each one representing one store category).
The store component consists of two parts:
- The category selector - renders a list of store collections and allows to change the active collection
- The view of the active collection - allows the user to pick and purchase a product from the active collection
By default the store component will read the name of the active category from the hash part of the browser's URL and pre-select that category. Changing the active category will update the browser's URL (both behaviours can be disabled by applying the
Before you use the store component on your page, make sure that at least one store collection is created on your publisher account (otherwise the store tag will be ignored). You can manage your store collections at app.tipser.com. Find detailed instructions on the Publisher Portal docs.
You can choose between two ways of displaying the store menu on the mobile screens. The default one is a native dropdown. If you prefer to use the inline menu instead (the same one as is displayed on other screen sizes), add
data-tipser-inline-mobile-menu attribute to the HTML snippet:
Store with inline mobile menu:
<div data-tipser-store data-tipser-inline-mobile-menu></div>
The store component will try to adapt to the available space but for the best UX we recommend placing it on a dedicated page where most of the space is dedicated for the store.
|data-tipser-inline-mobile-menu||when this attribute is present, the category menu will be rendered inline (as "bubbles") rather than as a dropdown||HTML boolean||false|
|data-tipser-disable-deep-linking||when this attribute is present, the currently selected category will not be reflected in the browser's URL||HTML boolean||false|
|data-tipser-class-name||custom CSS class name to apply||string||false|
Updated about 1 month ago