Tinloof Store

World-class content management

An online store is also a marketing website, so it's important to make it as easy as possible to manage it.

On Tinloof Store, we made it possible to control the entire site through Sanity, including the core pages, the products, the header, the footer, and the blog pages.

The store is designed once as a collection of blocks and the blocks are developed once.

After that, we can create pages or blog posts, live-preview them, and publish them in minutes while focusing only on content and without any involvement from developers or designers.

Not having to constantly tweak the UI while creating pages is crucial if you want to reach this level of autonomy and speed of content publishing.

Headless = flexibility

Having full control of the CMS and frontend makes it possible to create custom interactive elements on the site to push user engagement.

We took advantage of that, and built interactive components like product banners where users could directly shop for the products displayed on the banner.

The best part is that this component is just another block you can easily add to any blog post or page from Sanity.

Embedding products in landing pages and blog posts

The product banners are not the only blocks you can add from the CMS.

It's also possible to embed products in any landing page or blog article.

Imagine releasing a new collection and being able to create a landing page or blog post around it that has the collection of products directly embedded in the page, wherever you want it to be.

Shopping from blog articles

Interactive blocks are not the only way to engage users. We also made it possible to link to product popups directly from the text of blog articles.

Intuitive localization

Because the store is built around content, it's easily translatable directly from Sanity.

The main store language is English, but we can also publish landing pages or blog articles that are only available in a specific market (e.g. Germany).

A while ago, we took some time to implement our own localization solution on top of Sanity in order to support recurrent use cases and improve user experience.

We used that same solution to enable localization on Tinloof Store.

To avoid overwhelming content editors, we made it possible to navigate through the CMS content by language.

We also made available a language switch on the CMS to be able to navigate between translations of a page or blog post, similar to Sanity's official translation plugin.

Currency selector

The currency selector works independently from the language preference.

It's also easy to implement, since Shopify's Hydrogen library provides utility functions to display and convert prices.

Instant search

Products can be easily filtered through an instant and simple search field on the homepage.

We were initially planning to use Algolia to implement it but it ended up being fast enough without any external library.

SEO and social sharing

Every page or blog article has all the necessary SEO fields on Sanity to allow us to follow best practices.

We also integrated a tool to automatically generate a branded social sharing image (OG Image) directly from Sanity.

Syncing data between Shopify and Sanity

The product inventory is managed within Shopify, but the bulk of the content is managed within Sanity, so it's imperative to keep both platforms in sync.

Thanks to Sanity Connect, we're able to instantly sync any Shopify changes with Sanity without having to write any custom logic.

It's fast, unsurprisingly

Using Remix with Shopify and Sanity, combined with best practices we've learned while developing previous stores and marketing websites, resulted unsurprisingly in great website speed, accessibility, and SEO scores.

Performance in contrast with other stores

We recorded a visual comparison between Tinloof Store and 2 other random online stores, just to see how fast it is in contrast.

The video is recorded by WebPageTest and it uses a device with slow connection running from Virginia, USA.

Since the homepage of Tinloof Store has no hero, which usually causes loading issues due to the size of the hero image, we compared it with products pages of other stores that share a similar layout.

This is not a static website

Tinloof Store is built with frequent content and inventory updates in mind.

Changes made in Shopify or Sanity are immediately updated.

What makes Tinloof Store fast

Tinloof Store is fast not only because of our choice of architecture.

Being cautious of the amount of JavaScript shipped to browsers also helps keeping the store fast.

For example, instead of using external libraries to implement filters, we decided to build our own select component that wraps the native HTML select. The component works without JavaScript and matches the store brand.

The select component also looks the same regardless of the browser, and adapts to the width of its content.

Branding

The store's brand language is an extension of Tinloof's brand guidelines.

We simply added a few more grey colors and guidelines for the photography.

You can access the store's brand guidelines on this page.

Design

The store is minimalist and the UI concept couldn't be more straightforward, so we were able to save some time by combining the wireframing and UI design.

Tinloof Store is built with Remix, a React framework that was recently acquired by Shopify.

Shopify is used as a headless commerce solution, meaning that it doesn't produce the UI of the store. Instead, Shopify only provides commerce features such as checkout and cart through their Hydrogen open-source library.

The entire store content, including the site pages and products, is managed by Sanity headless CMS.