Shopify Fashion Store Design: Pages That Answer Will It Fit
Shopify fashion store design starts on the product page, where a shopper decides whether an item will fit. Show the model’s height and the size they wear, the fabric and how much it stretches, and a size guide that opens in a drawer next to the size picker. Give each color its own images and a swatch, then let collection pages filter by size, color and fit, with empty values hidden, so a shopper sees the sizes you have in stock.
The fashion product page
A product page for clothing needs to answer these, roughly in this order from top to bottom:
- Images per color. Assign images to each color variant so that choosing “Olive” shows the olive item. Include one photo on a model, one flat or on a hanger, a close-up of the fabric, and the back.
- The fit line under the price. “Model is 5 ft 9 in and wears size S. Relaxed fit; size down for a closer fit.”
- Color swatches and size buttons. Shopify’s variants page, read on October 23, 2026, allows up to three options and 2,048 variants per product, which covers size, color and length. Color options connected to the
colorcategory metafield can show swatches in themes that support them; Dawn needs its latest version for taxonomy-based swatches. - A size guide link beside the size picker. Open it in a drawer or pop-up so the shopper stays on the page.
- Fabric and care. Composition, weight if it matters, stretch, and washing instructions. Shopify’s metafields page uses care instructions as its tutorial example, so you can fill them once per product and show them through the theme editor in themes that support dynamic sources.
- Delivery and returns near the add-to-cart button. For clothing, say plainly whether an exchange for another size is free and how many days the shopper has.
For the photos themselves, see product photography; for keeping the look the same across pages, see visual consistency.
Size guides: theme, metafields or app
Shopify’s customer service page notes that, depending on your theme, you can add a size chart to product pages, or publish a page with clothing size information. That leaves three routes:
| Route | How it works | Good for |
|---|---|---|
| Theme feature | Some fashion themes have a size chart block that opens a page or a pop-up | One size chart for the whole store or per product type |
| Metafields | A metafield on the product, or a metaobject per product type (tops, trousers, shoes), shown in a block through dynamic sources | Different charts per product type, edited in one place |
| Size app | A size chart app, some with a fit quiz or recommendations from measurements | Stores with many brands that each size differently |
A metaobject per product type saves the most editing: edit the “Tops” chart once and every top shows the change. Measurements should be in inches and centimeters, measured on the garment, with a drawing of where to measure. If you add an app, check its effect on page speed in the Web Performance reports; Shopify’s Help Center names installed apps as one of the biggest factors in web performance.
Collections and filters
Set up the size filter first. With the free Search & Discovery app, a “Size” product option becomes a filter, and Shopify applies a custom sort order to filters named Size so that XS comes before S. You can hide or move empty values to the bottom, which keeps sold-out sizes from wasting a tap. Add color as a swatch filter, using the same color metafields as the product page, and add fit or length when your range has them.
On collection pages, show the second image on hover on desktop, and keep two products per row on phones so the clothes are large enough to judge. A lookbook or “shop the look” section on the home page can link several products worn together. To pick a theme with these features, see Shopify themes for fashion. Theme choice and the rest of the store setup are collected in the running a store hub.
Frequently asked questions
How do I add a size chart in Shopify? Use your theme’s size chart block if it has one, or create a metafield or metaobject with the chart and show it through the theme editor. A size chart app is the third option, useful when many brands in your store size differently.
How many variants can a product have? A Shopify product can have up to three options and 2,048 variants. For more, the Help Center lists a third-party app, line item properties in the theme code, or the Combined Listings app on Shopify Plus.
Do size apps slow the store? Any app that adds code to the product page can affect speed. Compare the Web Performance reports before and after installing a size app, and remove it if the page gets noticeably slower.