We built an online shop for Tinloof's merchandise to showcase the power of headless Shopify integrated with Sanity.
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.
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.
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.
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.
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.
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.
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.
Tinloof Store has analytics tracking in place and is also GDPR-compliant. Yet, notice how there's no cookie banner that pops up when you visit it for the first time.
That's because we use a cookie-less GDPR-friendly tracking solution called Fathom instead of Google Analytics.
Fathom is also much simpler to use than Google Analytics, and you can control whether your dashboard is private or public.
Here's the dashboard for Tinloof Store:
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.
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.
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.
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.
Tinloof Store is built with frequent content and inventory updates in mind.
Changes made in Shopify or Sanity are immediately updated.
Tinloof Store is fast not only because of our choice of architecture.
The select component also looks the same regardless of the browser, and adapts to the width of its content.
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.
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.
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.
The store was built solely to showcase the benefits you get from combining headless Shopify, Sanity, and Remix.
The shop is currently not active, but if you like some of the items feel free to share that with us.
No, Tinloof Store uses the Basic Shopify plan.