Storefront Components

UI Components

Product

The product component gives you the possibility to insert shoppable content anywhere on your page. Choose between a full product view or build your own customized view from lower level components. This is perfect for embedding shoppable items within articles and sell products relevant to the surrounding content.

Product ID

Each product found in the Tipser inventory has its own unique product ID. This id is used for rendering one or several items using the features of the product component. All product identifiers can be obtained in the Tipser Portal.

Embedded Product Page

Out of the box the detailed product page opens in a modal overlay. In addition, Tipser also provides the possibility of a fully embedded implementation. With the embedded product page the detailed product page will instead be displayed on a standalone page. It will require a bit more work but as a result you’ll get a more flexible solution. This includes support for social media and Google Shopping integrations which usually requires a unique url for each product. The embedded product page is also recommended in a mobile implementation to present a smoother UI experience for the end-user with limited screen surface. Read more about how to implement the Embedded product page: Tipser Scripts | Tipser Elements.

Embedded product page with a unique product URLEmbedded product page with a unique product URL

Embedded product page with a unique product URL

📘

The embedded product page requires some additional preparation on your side but provides the benefit of easily linking to a product page from anywhere, including social media and Instagram Shopping.

Modular Product

If you like more flexibility than the out of the box product component you can use the lower level Modular product components to construct your own. Select from a number of sub components e.g a buy-button, price, thumbnails, description, similar products. The implementation is just as easy as any other component, simply nest the sub components within the Modular product parent component. Below is an example of the detailed product page with the individual sub components showcased. Read more about how to implement the Modular product: Tipser Scripts | Tipser Elements.

Collection

Collections are multiple products grouped together. When implemented they'll display several simple product tiles in a row. You can use the carousel attribute to display the collection on a single row to save space on your page. Create collections and obtain your collection IDs in the Tipser Portal.

Collection exampleCollection example

Collection example

Store

The store component works especially well in if you're looking to build a classic marketplace where you showcase many products at the same time. The store component gathers selected collections to be displayed in a full store with the possibility to filter on a specific collection.

Cart

The cart component is used to display the content of the shopping cart. Decide if you want the cart as a modal element or build a standalone subpage. Include a live cart icon for the end user to always have the cart at hand when needed.

Checkout

Just like the product view, you can opt to customize the checkout experience according to your own needs and preferences. Sub-components like product-list, address and payment are separated in to individual modules so that you'll be able to create the most suitable buyer experience. If you don't need this flexibility, just go for the full checkout view.

Checkout exampleCheckout example

Checkout example

Styling

Our e-commerce components are designed to fit your page in the best possible way. We created the styling in a way that delivers a nice look & feel from the start, but also allows you to change them easily to fit your unique style. If you want to change some styles, just overwrite the CSS classes corresponding to the elements that you want to customize. It's also possible to set our components to inherit styles from the parent page.

Tipser Portal

The Tipser Portal is where your editors will control and curate your product inventory by exploring thousands of brands to find the best match for your site. The portal also holds the tools for creating and modifying collections. Besides this you'll also find sections for sales & analytics as well as code snippets for quick and easy implementations.

Tipser PortalTipser Portal

Tipser Portal