Store

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:

  1. The category selector - renders a list of store collections and allows to change the active collection
  2. 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 data-tipser-disable-deep-linking attribute).

πŸ“˜

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.

Basic store:

<div data-tipser-store></div>

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>

Example:

2866

πŸ“˜

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-menuwhen this attribute is present, the category menu will be rendered inline (as "bubbles") rather than as a dropdownHTML booleanfalse
data-tipser-disable-deep-linkingwhen this attribute is present, the currently selected category will not be reflected in the browser's URLHTML booleanfalse
data-tipser-class-namecustom CSS class name to applystringfalse