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 in Theme settings > Logo (with an optional separate logo for mobile), set your 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.
Add an Announcement bar section above the header for shipping or exchange news. Add up to four announcements; customers move between them with the arrows.

Home page sections

Hero: A full-width image with a heading, text and up to two buttons. You can upload a separate mobile image.
Slideshow: Up to six full-width slides, each with its own image, heading, text and button. Customers swipe or use the arrows and dots. Automatic slide changes are optional, pause on hover and have a pause button.
Video: A video uploaded to Shopify, or a YouTube or Vimeo link, with a cover image. The player loads only when the customer presses play, so the page stays fast.
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.
Apps: A place for app blocks on any page, for example reviews or a loyalty widget. Turn off page width and spacing when the app handles its own layout.
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, product rating, variant picker, inventory status, fit notes, quantity, buy buttons, pickup availability, description, collapsible rows, text, share, Custom Liquid and app blocks. Product pages open on the first available variant unless the link points to a specific one.

Under Gallery layout you can choose how product images appear on desktop: a large first image above a two-column masonry, a two-column masonry, one column, or a slider with thumbnails on the left, on the right or below. Masonry keeps each image in its own proportions without gaps. On mobile every layout becomes a swipeable row; the slider layouts keep their thumbnails under it. Customers can click or tap any image to open it full screen and browse the rest from there.

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.

Color swatches and badges

Color options show as swatches on product pages and product cards when the option is connected to Shopify's color category metafield. In the product, open the Color option and link it to the Color metaobject values, which carry the color and an optional pattern image. Options without swatch data show as text buttons.

Product cards show a Sale badge when a product has a compare-at price higher than its price, and a Sold out badge when no variant is available. Badge colors follow the Sale color in Theme settings > Colors. Card options, including the second image on hover, vendor, rating, swatches and quick add, are in Theme settings > Product cards.

Metafields

Fit notes: Connect the Fit notes block to a product metafield (for example a multi-line text metafield called Fit notes) to write different notes for each product.
Collapsible rows: Connect a row's content to a product metafield, for example Materials and care. Rows without content are hidden.
Size chart: Choose a page for the size chart in the variant picker block, or connect it to a page reference metafield to use a different chart per product.
Product rating: Review apps that use Shopify's standard reviews.rating and reviews.rating_count metafields show their rating on product pages and product cards with no extra setup.

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.

Blog

Blog pages list articles with their image, date and excerpt, with pagination. Article pages show the publish date, author and tags, and a comment form when comments are turned on for the blog. Comments that need approval show a message to the reader after they post.

Troubleshooting

A section is hidden on the storefront.: Some sections hide themselves until they have content, for example In your size without a size filter, or a collapsible row without text. In the theme editor they show a short note explaining what to add.
Complete the look is empty.: Complementary products are set per product in the Search & Discovery app. Related products appear once your store has enough product and order data.
Store pickup doesn't appear.: Turn on local pickup for a location in Settings > Shipping and delivery, and make sure the product is stocked at that location.
Prices look wrong in another currency.: Fitting formats every price on the server with your store's money format for each market. Check the currency formatting under Settings > Markets.
Something else isn't working.: Preview the theme with apps turned off to rule out app code, then contact us through the support form with your store URL and the steps to see the problem.

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.