Inkblot documentation

Inkblot is a Shopify theme for fashion and apparel brands. It pairs editorial motion with a built-in AI Stylist that puts together outfits from your own products.

This page is a short tour. Each guide linked below covers its topic in full.

Features

AI Stylist: Shoppers type an outfit or a scene, such as “beach casual”, and the stylist builds a look from your products. They can refine the look, swap a piece, and add one piece or the whole look to their cart. The stylist runs in the shopper’s browser, so there is no app to install and no API key to set up.
Editorial motion: A Page transition wipes the screen between pages, a Custom cursor replaces the mouse pointer, Smooth scrolling eases the mouse wheel, and the home page sections are animated. The Motion budget setting controls how much of it runs. Animations always respect a visitor’s reduced-motion preference, and the theme reduces them on low-powered devices.
Home page: The home page starts with seven sections, including a Hero slideshow, Scroll typography, which spells out a sentence letter by letter as shoppers scroll, and Testimonials, which pins your reviews to a wall as notes.
Product pages: The gallery plays videos and 3D models as well as images, and opens images in a full-screen viewer. Products with a size option get size cards and a Find My Size tool that suggests a size from the shopper’s height and weight. Below the product, Similar to shows alternatives, Specs and reviews adds specifications and a Complete the look outfit, and Reviews shows reviews from product metafields or from a reviews app.
Collections and search: Shoppers can filter and sort collection pages and search results, and switch a collection between an editorial layout and a grid. Filters appear once you set them up in the Shopify Search & Discovery app. The New arrivals helix spins product cards around a 3D helix as shoppers scroll or drag. Low-powered devices and visitors who prefer reduced motion see a grid of the same products instead.
Header and navigation: The Header adapts to the section behind it, turning transparent with white text over dark sections, rotates your announcements, and opens a mega menu that fills in each collection’s image and description. Search shows results as shoppers type. On phones, the menu and search open as sheets that rise from the bottom of the screen.
Cart: A Cart drawer with a tab of recently viewed products, an Add to cart confirmation that appears when something is added, and an optional Cart reminder for returning visitors who left items in their cart.
Pages and templates: Ready-made templates for a brand story, an FAQ page, a contact page and a New Arrivals page, plus blog, password and gift card pages in the same style.

Quick start

From your Shopify admin, go to Online Store, and click Edit theme next to Inkblot. Getting started walks you through the theme editor.
In Theme settings, set your colors, fonts and Motion budget. See the theme settings reference.
Create the menus for your mega menu and footer in Content > Menus.
In the Header section, add your logo and navigation. See Header.
Replace the images and text in the home page sections. See the sections reference.
Add filters for collection pages and search results in Apps > Search & Discovery. See Collections and search.
In Online Store > Pages, create a page for the stylist and give it the page.ai-stylist template. See AI Stylist.

When your store looks the way you want, click Publish in the top bar of the theme editor.

Templates

Inkblot includes these templates. To edit one, open the theme editor and choose the template from the drop-down menu at the top, which shows Home page when the editor opens.

Template	Used for	Sections
`index`	Your home page	Hero, Outfit, Scroll typography, Area of expertise, Cart recovery banner, Confetti call to action, Testimonials
`product`	Every product	Product information, Similar to, Specs and reviews, Reviews
`collection`	Every collection	Collection grid
`collection.new-arrivals`	A collection with the helix above its products	New arrivals helix, Collection grid
`list-collections`	The page that lists all your collections	Collections list
`search`	Search results	Search results
`cart`	The cart page	Cart page
`page`	Standard pages	Page
`page.who-we-are`	Your brand story, told in numbered panels with an FAQ	Who we are
`page.faq`	A page of questions and answers	FAQ page
`page.contact`	A contact form with your contact details	Contact
`page.new-arrivals`	A standalone New Arrivals page	New arrivals helix
`page.ai-stylist`	The stylist page	AI Stylist
`blog`	A blog’s list of articles	Blog posts
`article`	A single blog post	Blog post
`404`	Links that lead to a page that doesn’t exist	404 page
`password`	What visitors see while your store is in private mode, which you turn on in Online Store > Preferences	Password page
`gift_card`	The page where a customer sees a gift card’s balance and code	None; it has no settings
`customers/` templates	The sign-in, create account, account, order, addresses, reset password and account activation pages. Your store uses them only with legacy customer accounts, which you can check in Settings > Customer accounts.	None; they have no settings

Templates with a suffix, such as page.faq, apply only to the pages and collections you assign them to. Assign a page template in Online Store > Pages, and a collection template in Products > Collections, with the Theme template drop-down menu. Pages and templates has the steps.

Getting help

Check the FAQ for answers to common questions.
Look up any setting in the theme settings reference or the sections reference. Both list every label exactly as the theme editor shows it.
Read the release notes to see what changed in each version.
Contact Quiet Riot Studio from the Support page. It explains what support covers and what to include in your request.
For questions about your Shopify account, billing or the Shopify admin, visit the Shopify Help Center.