Fitting theme documentation

Everything you need to set up Fitting, the size-first Shopify theme for fashion boutiques. Version 1.0.0.

Getting started

Fitting is a theme for fashion boutiques. Customers choose their size once, and collections, search, product cards and product pages then show what is in stock in that size. Everything else works like a standard Online Store 2.0 theme, so you can customize every page in the theme editor.

Add Fitting from the Shopify Theme Store and choose Try theme or Add to theme library.
In Online Store > Themes, select Customize to open the theme editor.
Set up your size groups in Theme settings > Size preference (see Size preference below).
Install the free Search & Discovery app and add a filter for your size option and for Availability. The size bar uses these filters.
Add your logo and main menu in the Header section, and choose colors and fonts in Theme settings.
Preview your store, then select Publish when you're ready.

Before you change a live theme, duplicate it in Online Store > Themes. You can always go back to the copy.

Size preference

The size bar under the header lets customers save their size. The theme remembers it in their browser and uses it across the store.

Collection and search pages open filtered to the saved size and to products in stock, using your storefront filters.
Product cards show whether the saved size is in stock, and offer a one-tap add button when size is the only choice.
Product pages preselect the saved size, unless the link already points to a specific variant.
Search suggestions hide products that are sold out in the saved size, with a chip to show them again.
The cart shows each line's size clearly and warns when the same product is in the cart in two sizes.

Set up size groups

A size group links the sizes customers choose in the bar to your product options. Fitting has two groups, for example clothing and shoes.

Open Theme settings > Size preference.
In Primary size group, enter a group name (for example Clothing), the product option names used for sizes (for example Size, Taille) and the sizes in the order customers should see them (for example XS, S, M, L, XL).
Use Secondary size group for a second system, like shoe sizes. Leave its option names empty to hide it.
Choose where the size bar appears: on all pages, or only on collection and search pages.

Option names aren't case sensitive, but the size values must match your variant values exactly, for example M and not Medium.

Filters used by the size bar

The size bar applies Shopify's own storefront filters, so product counts and pagination stay correct. It needs two filters from the Search & Discovery app:

A filter for your size option (for example Size, and Shoe size if you use a second group).
The Availability filter, so only products in stock in the chosen size are shown.

When a collection mixes both size groups, like clothing and shoes together, the saved size isn't applied automatically, because combining the two filters would hide every product. Customers can still filter by size in the filter panel.

Low stock message

Turn on Show low stock message to show a note like Only 1 left in M on product cards. It uses your real inventory and only appears for products that track inventory. Set the threshold with Show when inventory is at or below.

Turn the feature off

Clear Enable size preference to remove the size bar and every size-aware state. The rest of the theme works as a standard boutique theme.

Theme settings

Colors: Four color schemes, each with background, text, accent, border and button colors. Sections use a scheme, so changing it restyles every section that uses it. Sale and In stock colors are set separately.
Typography: Separate fonts and size scales for headings and body text, from Shopify's font library.
Layout: Page width, page margin and the corner radius of buttons, inputs and cards.
Size preference: Size groups, size bar visibility and the low stock message.
Product cards: Image ratio, second image on hover, vendor, color swatches and quick add.
Cart: Drawer or page, cart note and accelerated checkout buttons on the cart page.
Search: Turn search suggestions on or off.
Social media: Links for the social icons in the footer.
Favicon: The small icon shown in browser tabs, displayed at 32 by 32 pixels.

Header and menus

The header uses your main menu. Menu items with a second level open as a dropdown. Items with a third level open as a mega menu with columns.

Build your menu in Content > Menus. Nest items under a top-level item to create dropdowns.
To add an image to a mega menu, add a Menu image block to the Header section and enter the name of the top-level menu item, for example Shop.
Turn the country and language selectors on in the header if you sell in several markets. They're always available in the footer.

Home page sections

Hero: A full-width image with a heading, text and up to two buttons. You can upload a separate mobile image.
In your size: Shows products from a collection that are in stock in the customer's saved size. Customers without a saved size see an invitation to choose one.
Featured products: Products from a collection, with a link to the full collection.
Featured product: One product with its gallery, variant picker and buy buttons, including video and 3D media.
Shop the look: An image with numbered points linked to up to six products listed beside it.
Collection list: Images and titles for the collections you choose.
Image with text: An image beside a heading, text and a button.
Multicolumn: Columns of short text with optional images, for services like returns or fittings.
Rich text: Headings, text and buttons, centered or aligned left.
Blog posts: Recent articles from a blog.
Email signup: A newsletter form. Subscribers are added to your customers with email marketing consent.
Custom Liquid: Add app snippets or other code.

Product pages

The product information section is built from blocks you can reorder: vendor, title, price, variant picker, fit notes, quantity, buy buttons, pickup availability, description, collapsible rows, text, share, Custom Liquid and app blocks.

Fit notes for each product

Fit notes appear next to the size options. To write different notes for each product, connect the block to a product metafield:

In Settings > Custom data > Products, add a definition named Fit notes with the type Rich text.
Write the fit notes on each product page in the Shopify admin.
In the theme editor, open a product template, select the Fit notes block and use the Connect dynamic source button next to its text field to choose the Fit notes metafield.

Size chart

Create your size chart as a page in Online Store > Pages. Tables work well. Then select that page in the Variant picker block's Size chart page setting. A Size chart button appears next to the size option.

Gift cards

On gift card products, customers can choose to send the card to someone else by email, with a message and a delivery date. Turn this off with Show recipient form for gift cards in the Buy buttons block.

Recommendations

The product page includes two Product recommendations sections. Related products are chosen automatically by Shopify. Complementary products, shown as Complete the look, are set per product in the Search & Discovery app.

Collections, search and filtering

Collection and search pages use the filters you set up in the Search & Discovery app. Filters update the page without reloading, and short values like sizes appear as buttons. On mobile, filters and sorting open in a drawer.

In the collection section you can choose products per page, columns on desktop and mobile, and whether to show the collection image and description.

Cart

By default, adding a product opens the cart drawer. Choose Page in Theme settings > Cart to send customers to the cart page instead. In both, customers can change quantities, switch a line to another size of the same product and add an order note.

Languages and translations

Fitting includes English and Turkish storefront text. To edit wording or add a language, go to Online Store > Themes, select the three-dot menu next to the theme and choose Edit default theme content. Text you enter in sections, like headings, is translated with the Shopify Translate & Adapt app.

FAQ

The size bar doesn't filter my collection.: Check that the Search & Discovery app has a filter for your size option and for Availability, and that the option names in Theme settings > Size preference match your product option name.
A size is missing from the size bar.: Add it to the Sizes list of the size group, separated by commas.
Can customers see all sizes again?: Yes. Show all sizes in the size bar shows every size on that page, and Clear removes the saved size.
Why doesn't the saved size apply to my All products collection?: When a collection has both clothing and shoe sizes, applying one size filter would hide the other products, so the theme leaves the choice to the customer.
Does the theme need any apps?: No. The size features use Shopify's own filters from the free Search & Discovery app.

Customizing theme code

Changes to theme code aren't covered by our support, and they can stop the theme from updating. Always duplicate the theme before editing code. If you need custom work, we recommend hiring a Shopify Partner.

Release notes

Version 1.0.0: First release: size preference with size bar, size-aware product cards, In your size and Shop the look sections, predictive search, cart drawer with size switching, gift card recipients, and English and Turkish storefront text.