Last — Theme documentation

1Getting started#Link to this section

Install the theme#Link to this section

1. In your Shopify admin, go to Online Store > Themes and open the Shopify Theme Store. Search for Last.
2. On the theme's page, choose Try theme to preview it with your own products, or add it to your theme library. The theme is added unpublished, so your live store does not change.
3. In Online Store > Themes, find Last in your theme library and choose Customize to open the theme editor.
4. When you are happy with it, choose Publish.

The first 15 minutes#Link to this section

Do these in order. The first three make the size features work; the rest make the store yours.

1. Check your product options.3 min
   Your products need a size option (for example Size) and, ideally, a color option (Color). See Option names.
2. Set your sizes.3 min
   In the theme editor, open Theme settings > Sizes. Check Size option names, then enter your Size scale and Size system of your size option. Optionally paste a Size conversion table. See Sizes settings.
3. Add the filters.4 min
   Install Shopify's free Search & Discovery app and add the Availability, Price, Color, Size, Width and Product type filters. See Filters.
4. Brand it.2 min
   Upload your logo (Theme settings > Logo), pick fonts and review the color schemes.
5. Connect your menu.1 min
   Select the Header section and choose your main menu in Menu. Links with child links open a dropdown on large screens.
6. Fill the home page.2 min
   Choose a product in Hero: colorways, a collection in In your size and Shop by color, and an image in Image with text.
7. Preview with a size set.
   In the preview, choose Set your size in the header, pick a size, then browse a collection and a product. Then publish.

2Setting up products for the size features#Link to this section

Last reads your size option and your Search & Discovery size filter. It never changes products or inventory, and the size features need no metafields.

Option names#Link to this section

Last recognizes three kinds of variant options by their names. The accepted names are lists in Theme settings > Sizes, comma-separated and matched without regard to case:

If your options use other names (for example Taille), add them to the matching list. The order of options on a product does not matter.

• Products with a size option get the color and size picker on the product page, color dots and an "in your size" line on cards, and the size check in the cart.
• Products without a size option (for example a one-size accessory or a gift card) show a standard option picker.
• Width is optional. When a product has a width option (for example Regular and Wide), the product page shows a width switch, and cards can list the widths under the title.

Size values and the size scale#Link to this section

• Use plain values in your size option: 42, not EU 42. The theme puts the label from Size system of your size option in front (for example "EU 42").
• Enter the same values, in order, in Size scale (default 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47). Each size in the scale gets one cell in the size sheet, where shoppers choose their size. Half sizes such as 42.5 work if your products use them.
• The size filter in the store's URLs uses your option values exactly, so the scale and your products must match character for character.

Variant images per color#Link to this section

Assign a variant image to the variants of each color (in the product's variants list, open a variant and choose its image). Last uses it for:

• the photo on product cards (the image of the first variant of the color the card opens with);
• the colorway tiles in the product page picker, and the gallery when a shopper picks a color;
• the panels of the Hero: colorways section when a panel has no photo of its own.

If every color shares one photo, every colorway shows that photo. Color option values with an image swatch show that image in their dot.

Inventory#Link to this section

• Track inventory for each variant. Stock states such as in stock, low and sold out come only from your real inventory; the theme never invents urgency.
• Low stock means 2 or fewer, and is shown only for products with tracked inventory. Choose how much to show with Stock display in Theme settings > Sizes.
• If a variant's inventory is not tracked, or Continue selling when out of stock is on, Shopify reports it as available, so Last shows it as in stock.

3Filters#Link to this section

Add the filters#Link to this section

1. Install Shopify Search & Discovery (free, by Shopify) from the Shopify App Store.
2. In the app, open Filters and add these filters, in this order:
   1. Availability
   2. Price
   3. Color, from the product option Color
   4. Size, from the product option Size (or your size option's name)
   5. Width, from the product option Width (only if you sell widths)
   6. Product type
3. Save. Option filters can be added only once products with those options exist.

The same filters apply to search results. Turn filtering on or off with Enable filtering in the Collection and Search results sections.

Why the size filter matters#Link to this section

Last filters by size with Shopify's own filters, through the page URL (for example ?filter.v.option.size=42&filter.v.availability=1). It never hides products in the browser. Without a Size filter, a collection or search page has nothing to filter with, so:

• the "Only in EU 42" toggle, the size cells in the filter rail and the "styles fit you" count do not appear;
• the size sheet cannot show how many styles are in stock in each size;
• the "Not in your size" row cannot be built.

The Availability filter makes the size filter mean "in stock in this size": the theme adds filter.v.availability=1 next to the size when the listing has that filter. If there is no option filter for size but there is a category "shoe size" filter, the theme uses it for the size cells and treats its counts as approximate.

4The size lens#Link to this section

The size lens is the shopper's size, kept as a display preference. Once it is set, every page answers one question: what can I buy in my size, and in which colors?

Setting a size#Link to this section

• Header chip. Every page has a "Set your size" chip in the header (on phones, also at the top of the menu drawer). After a size is set it reads "Your size", with the size inside a spectrum ring: the size seal.
• Size sheet. The chip opens a sheet with one cell per size from Size scale. Where known, each cell shows how many styles are in stock in that size. The sheet also has:
  • an EU / UK / US / cm switch, only when Size conversion table is filled in;
  • an "I need a wide fit" switch, on collection and search pages that have a Width filter with a value containing "wide";
  • a note or a checkbox that depends on Remember the shopper's size (see Privacy and consent);
  • "Clear my size", and a button such as "Show 46 styles in EU 42" that opens the current collection or search (elsewhere, all products) filtered to that size and in stock.
• Floating pill. With Show the floating size pill on (in the Header section), a pill at the bottom of the screen shows the size and how many styles fit, with a link to change it. It hides whenever it would cover content; on phones it sits in its own strip. It is not shown on product and cart pages.
• Other ways in. Picking a size on a product page saves it when no size is set yet. Opening a link filtered to one size also sets it.

Where the size comes from, first match wins:

1. 1. The URLThe page's active size filter.
2. 2. This visitThe browser's session storage, unless the setting is Off: the URL only.
3. 3. This deviceLocal storage, only in On the device, with consent mode, after the shopper opts in and while consent allows it.

The lens never redirects and never hides products in the browser. When a size is set, links to collections and to search results gain the size filter and the availability filter as the shopper follows them, unless the link already has a filter. Vendor and product type pages are left alone.

Product cards#Link to this section

Each card shows one dot per colorway and a line under them. Dots have two states: filled means in stock in the shopper's size; a ring means not in that size today.

• No size set: "4 colors", every dot filled. Nothing is grayed before the shopper chooses.
• A size set: the seal with "2 of 4 colors" or "All 3 colors"; "Not in 42 today" when no color is in stock in it; "Not made in 42" when the style has no such size.
• A style without a color option: "In stock in 42" or "Not in 42 today".
• Quick add (with Show quick add on hover, on large screens with a mouse): adds the first color in the shopper's size, or opens the size sheet when no size is set. Styles with several widths link to the product page instead.

Cards are never hidden. The size only changes what the card says.

Collection and search pages#Link to this section

• A count chip beside the title: "46 styles fit you" when one size is filtered, otherwise the total "in all sizes".
• The "Only in EU 42" toggle in the toolbar turns the size filter and the availability filter on or off together. With no size set it reads "Set your size to filter" and opens the size sheet.
• The filter rail (a drawer on phones) starts with the shopper's size and a Change link, then the size cells, color swatches with counts, width, price and your other filters. Active filters show as removable chips.
• With Show the "Not in your size" row on and one size filtered, styles and colorways made in that size but sold out in it are folded into one row after the grid, with their nearest sizes in stock. The row loads after the page.
• Empty states name the size, for example "Nothing in stock in EU 42 today", with a way to show every size.

Product page#Link to this section

• Colorway tiles say "In 42" or "Not in 42" for the shopper's size, with a count such as "1 of 4 in your size".
• The size grid shows the sizes of the chosen color and width. Once a size is saved, sizes not available in that color are grayed and struck through, and the shopper's size is tagged "yours".
• No automatic switching. The page loads with the variant in the URL, or the first available variant. The shopper's size is marked, not selected for them; a hint offers a one-tap "Select EU 42".
• Honest stock. If the chosen color is sold out in the size, the button says "Sold out in EU 42" and the hint names the colors that are in stock in that size.
• Conversions sit under each size when Show size conversions is on and a conversion table exists. On phones the add button moves into a bar at the bottom of the screen.

Home page#Link to this section

• Hero: colorways: each panel says "In your size" or "Not in 42" from the stock of that color in the shopper's size, and links to that color. The buy card says, for example, "3 of 5 colors in EU 42".
• In your size: with a size set, the grid shows the collection filtered to that size and in stock, under the heading and text you wrote for "when a size is set". With no size, it shows the collection with the other heading and a button that opens the size sheet.
• Shop by color: each color block counts the styles in that color in the shopper's size, and links to the collection filtered to that color.

Cart and other pages#Link to this section

• Cart flag. A line whose size differs from the shopper's size is flagged in words ("This pair is EU 43; your size is EU 42.") with a link to the same version in the shopper's size and a "Keep EU 43" choice, which hides the flag for that line for the rest of the browser session. The flag never blocks checkout. It needs JavaScript and a size.
• Empty bag. Shows how many styles fit the shopper's size today, and a "Shop your size" link to the Collection to suggest.
• Size guide and 404 pages offer "Shop your size" in the shopper's size, or "Set your size" when none is set.

Privacy and consent#Link to this section

Choose the behavior in Theme settings > Sizes > Remember the shopper's size:

• Device storage fails closed: if the privacy API cannot load, returns an error or reports no consent, nothing is saved on the device and any saved copy is deleted. When the shopper changes their choice in your cookie banner, the theme saves or forgets the size to match. Whether preference processing is allowed depends on your settings in Settings > Customer privacy and on the shopper's choice.
• Switching the setting to Off: the URL only deletes any stored size on the shopper's next page view; switching away from the device mode deletes the device copy.
• The theme does not set cookies for the size and does not send it to any service. When a shopper filters by size, the size is part of the collection or search URL, like any other Shopify filter.
• To speed up the size sheet, per-size style counts for the store are cached in session storage for 10 minutes. They contain counts only, nothing about the shopper.

5Theme settings#Link to this section

In the theme editor, open Theme settings (the gear icon). Each group below matches a group in the editor.

Logo#Link to this section

Logo image

Your logo in the header. Leave empty to show the store name.

Logo width on large screens

60 to 260 px. Default 132 px

Logo width on phones

48 to 160 px. Default 96 px

Favicon#Link to this section

Favicon image

The browser tab icon, shown at 32 × 32 px.

Colors#Link to this section

Last ships four color schemes. Most sections have a Color scheme setting that picks one of them. You can edit them and add more.

Each scheme has these colors:

Background

The section background.

Background gradient

Optional. Replaces the solid background.

Raised surface

Chips, size cells, inputs and hover states.

Pressed surface

The pressed state of those surfaces.

Text

Body text, links and icons.

Secondary text

Captions and meta text. Keep a contrast of 4.5:1 or more on the background.

Tertiary text

Counts and use lines. Keep a contrast of 4.5:1 or more on the background.

Button

The solid button color.

Button label

Text on solid buttons.

The rest of the group:

Page color scheme

The scheme of the page itself, behind the sections. Default Scheme 1

Spectrum and accent

Spectrum ring

The ring that means "your size": the size seal, the active menu item, focus and loading. Studio (coral to lilac), Warm (coral to rose), Cool (mint to violet) or Mono (grays); Mono suits brands that want no color in the chrome. Default Studio

Accent

A single accent for small marks, such as sale dots. Use it sparingly. Default #FF5B35

Typography#Link to this section

Headings

Font

The heading font, from Shopify's font library. Headings use tight letter spacing. Default Inter 600

Heading size

Scales all headings, 80 to 130%. Default 100%

Heading letter spacing

In hundredths of an em, −8 to 2. −5 is the Studio look. Default −5

Body text

Font

The body font. Figures are tabular, so sizes, prices and counts line up. Default Inter 400

Body text size

13 to 18 px. Default 15 px

Layout#Link to this section

Page width

The maximum content width: Narrow (1360px), Standard (1600px) or Wide (1920px). Default Standard

Page margin on large screens

Space at the page edges, 16 to 64 px. Default 40 px

Rail width

The filter column on collection and search pages, 200 to 360 px. Default 248 px

Column gap

Space between columns, 16 to 64 px. Default 40 px

Sizes#Link to this section

Size option names

Which variant option is the size. Comma-separated, matched without regard to case. Default Size, Shoe size, EU size, Shoe Size, المقاس

Color option names

Which option is the color. Default Color, Colour, Colourway

Width option names

Which option is the width. Default Width, Fit

Size scale

Your sizes, comma-separated and in order. Each size gets one cell in the size sheet. Default 36 to 47

Size system of your size option

For example EU, UK, US or cm. Shown before your sizes. Default EU

Size conversion table

Optional. One size per line, in the columns EU | UK | US | cm, for example 42 | 8 | 9 | 26.5. Use your own size chart. It turns on the size system switch in the size sheet, conversions on the product page and the table on the size guide page. Without it the switch is hidden.

Remember the shopper's size

Off: the URL only, For the visit or On the device, with consent. See Privacy and consent. Default For the visit

Stock display

In stock, low, sold out; Levels plus "1 left" and "2 left"; or Available or sold out only. Low stock means 2 or fewer, for products with tracked inventory. Default In stock, low, sold out

The conversion table always uses the column order EU, UK, US, cm. Your size option's values are matched in the column named by Size system of your size option. A format example for EU sizes:

40 | 6.5 | 7.5 | 25.2
41 | 7.5 | 8.5 | 25.8
42 | 8.5 | 9.5 | 26.5

These numbers only show the format. Use the size chart for your own products.

Product cards#Link to this section

Image ratio

Portrait (4:5), Square (1:1), Landscape (4:3) or Wide (2:1). Default Portrait

Image fit

Studio sweep, Show the whole product or Fill the frame. See Studio image fit. Default Studio sweep

Photo zoom

Studio sweep only, 100 to 140%. A product can override it with a metafield; see Card metafields. Default 120%

Blend white photo backgrounds into the tint

Best for product photos on white. Ignored on dark color schemes. Default on

Tile tint

Tint behind product photos

From the colorway, Fallback tint only or None (light gray). Default From the colorway

Fallback tint

For near-black, near-white and unknown colors. Keep it pale so text stays readable. Default #E6EAF5

Colorway colors

Optional map of colorway names to a swatch and a tint. See Tints and the colorway map.

Details

Line under the title

Product type, Vendor or Nothing. Default Product type

Show widths under the title

Lists the width option's values on the card. Default on

Show quick add on hover

Adds the first color in the shopper's size. Styles with several widths link to the product page instead. Default on

Product tag for the New badge

Products with this tag show a New badge. Default new

Product tags shown as a badge

Optional. Comma-separated tags, for example Race, Restocked. The badge shows the tag as written. See Badges.

Cart#Link to this section

Cart type

Drawer opens the cart in a side panel; Page goes to the cart page. Default Drawer

Show order note

Lets shoppers add a note to the order, in the drawer and on the cart page. Default on

Search#Link to this section

Show search suggestions

Shows predictive results while the shopper types in the search dialog. Default on

Show prices in suggestions

Adds prices to those results. Default on

Prices#Link to this section

Show currency codes

Shows codes such as EUR or USD next to prices. Cart and checkout always show currency codes. Default off

Social media#Link to this section

Enter the full link to each account you use, for example https://instagram.com/yourstore. Leave the others empty. The footer shows these links when Show social media links is on.

Instagram, Facebook, TikTok, YouTube, X (Twitter), Threads

Links to your accounts.

Pinterest, Snapchat, Strava, Vimeo, LinkedIn

Links to your accounts.

6Sections and blocks#Link to this section

Most sections have a Color scheme setting, and many have Top padding and Bottom padding under Spacing. Those are not repeated below. The main page sections, the product page and several home sections also accept app blocks.

Header and Announcement bar#Link to this section

The header shows your logo, the main menu, search, the account entry (when customer accounts are turned on), the size chip and the bag. On phones the menu opens in a drawer.

Menu

The main menu. Menu items with child links open a dropdown on large screens.

Customer account menu

The menu shown in the account entry.

Sticky header

Off, On scroll up or Always. Default Always

Show the floating size pill

The pill at the bottom of the screen with the shopper's size. Not shown on product and cart pages. Default on

Show country or region selector

To add a country or region, go to Settings > Markets.

Show language selector

To add a language, go to Settings > Languages.

The Announcement bar sits in the header group and is hidden by default. It holds up to three Announcement blocks, each with Text and a Link. On phones they scroll sideways, one at a time.

Footer#Link to this section

Heading, Text

Optional words at the top of the footer.

Show social media links

Links come from Theme settings > Social media.

Show Follow on Shop button

Lets shoppers follow your store in the Shop app. Shows only when the Shop channel is installed and Shop Pay is turned on.

Show policy links

Links to your store policies.

Show payment icons

Icons of your payment methods.

Show country or region selector, Show language selector

As in the header.

Blocks (up to 8), each with a Column width of Quarter, Third or Half:

• Menu: a Heading and a menu.
• Text: a Heading and Text.
• Newsletter (one per footer): a heading, text and an email field. Sign-ups are added to your customer list with the tag "newsletter" and email marketing consent.

Home page sections#Link to this section

These sections can be added to the home page and to other page templates.

Hero: colorways#Link to this section

One product shown as panels, one per colorway, each saying whether that color is in the shopper's size.

Product

The product to show. Without Colorway blocks, its first three colors are shown.

Show numbers before color names

Numbers the panels.

Heading

The large heading.

Show the buy card

A card with the product, its colors and a button.

Tag, Button label

A small tag on the buy card, and the button text (empty = "Shop" and the product name).

Colorway blocks (up to 4)

Color (a value of the product's color option; empty = the next color), Caption, Photo (empty = the variant image in that color) and Tint (empty = tint from the color swatch, as on cards).

In your size#Link to this section

Collection

The styles to show.

Leave out this product

For example the product in the hero, so it is not shown twice.

Styles to show, Columns on large screens

2 to 12 styles; 2 to 4 columns.

Show the ring divider above

A spectrum ring divider above the section.

Heading, Text (when a size is set)

Words for shoppers with a size.

Heading, Text, Set size button label (when no size is set)

Words and a button that opens the size sheet.

Filter chip blocks (up to 8)

Label and Link, for example a collection or a collection with a filter.

Shop by color#Link to this section

Collection to count

Counts the styles in each color from the first 50 styles of this collection, and links to it filtered by color.

Show the ring divider above

A spectrum ring divider above the section.

Heading when a size is set, Heading when no size is set

The two headings.

Link label, Link

A link beside the heading. Empty link = the collection above.

Color blocks (up to 8)

Name, Color, Color option values (comma-separated values of your color option that belong to this block, for example Coral, Flare, Clay; empty = the name), Link, and Shoe cut-out (transparent PNG): a PNG or WebP with a transparent background, cropped close to the shoe, side view, toe to the right. On large screens it rises out of the block when a shopper points at it or tabs to it.

Image with text#Link to this section

Text panel color scheme, Image, Show the image on the right, Image height on large screens (400 to 800 px), and the words: Tag, Heading, Text, Button label, Button link. Use a photograph without words in it, and put the words in the settings so every shopper can read them.

Image banner#Link to this section

Image, Image ratio (Adapt to image, Panorama (3:1), Wide (2:1), Wide (16:9), Landscape (4:3)), Image ratio on phones, Full width, Caption, Show the ring divider above, and the words: Line above the heading, Heading, Text, Button label, Link, Second button label, Second button link.

Video#Link to this section

Either Video, a file you upload (it plays in the page with its own controls, and nothing loads before the shopper presses play), or Or a YouTube or Vimeo link with a Cover image (the player loads only after the shopper presses play). Also Image ratio, Full width, Heading and Text.

Collection list#Link to this section

Heading, Text, Show the link to all collections, Collections, Columns on large screens, Columns on phones, Image ratio, and Show styles in stock by size (counts the first 50 styles of each collection).

Rich text#Link to this section

A container for theme blocks and app blocks. Settings: Layout (Beside the rail or Across the page), Caption in the rail, Alignment, and Rule on top (None, Hairline or Strong baseline).

Newsletter sign-up#Link to this section

Heading, Text, Button label, Note under the field. Sign-ups are added to your customer list with the tag "newsletter" and email marketing consent.

Promise columns#Link to this section

Heading, Text, Show the ring divider above, Columns on large screens, and Column blocks (up to 12): Icon (None, Swap, Delivery, Tick, Globe, Bag, Information), Title, Text, Link label, Link.

Custom Liquid and Apps#Link to this section

Custom Liquid: add app snippets or other Liquid code, with a Full width option. Apps: holds app blocks, with Use page margins. The Featured product section can also be added to any page.

Theme blocks#Link to this section

These blocks work inside Rich text, the Page section and Group blocks. Text and Custom Liquid also work on the product page and in Featured product.

Group

Holds other blocks. Direction (Stacked or Side by side), Alignment across, Alignment along, Gap, Padding, Rule on top, and Use its own color scheme with a Color scheme.

Heading

Heading, Size (Display to Heading 4), HTML tag (use one H1 per page), Alignment, Color, Maximum width.

Text

Text, Size (Lead, Body, Small, Caption), Alignment, Color, Maximum width.

Button

Label, Link, Style (Solid, Outline, Text link), Show arrow, Full width, Alignment.

Image

Image, Image ratio, Image fit, Blend white photo backgrounds into the tint, Width on large screens, Link, Caption.

Spacer

Height on large screens, Height on phones, Draw a hairline.

Custom Liquid

Add app snippets or other Liquid code.

Featured product#Link to this section

One product on any page (not in the header or footer): media, the title, the price with the tax note and Shop Pay Installments, a standard option picker, quantity, purchase options and buy buttons. It loads with the first available variant, and shows a placeholder until you choose a product.

Product

The product to feature.

Media fit, Blend product photos into the background, Open images full size, Loop videos

How the media looks and behaves.

Show quantity selector, Show dynamic checkout button

Buying controls.

Blocks

Vendor, Description, Text, Custom Liquid and app blocks. The Price block is fixed.

Product page#Link to this section

The Product section shows the media gallery (images, video, external video and 3D models, with "View in your space" where supported) and then the blocks. The gallery follows the chosen color.

Show breadcrumbs

A breadcrumb trail above the product. Default off

Media height

Compact, Medium or Tall. Default Tall

Media fit

Show the whole product or Fill the frame.

Blend product photos into the background

Product photos on white blend into light color schemes.

Open images full size

Lets shoppers open an image full size.

Loop videos

Repeats product videos.

Fixed blocks#Link to this section

Color and size picker

Colorway tiles and a size grid for the chosen color; the width option becomes a switch. Products without a size option show a standard option picker. Settings: Show size conversions (uses the conversion table in Theme settings > Sizes), Size guide page (none is set by default; choose your size guide page), and Fit note (a short line beside the width switch).

Buy buttons

Quantity and the add button sit under the size grid; on phones the add button moves into the bar at the bottom of the screen. Settings: Show dynamic checkout button, Show gift card recipient form, Show pickup availability, and Buy bar note (for example your delivery and returns promise). Purchase options appear when a product has selling plans (subscriptions).

Quantity

Follows each variant's quantity rules (minimum, maximum, increments) and shows volume pricing when set.

Details

A container under the buy area for Collapsible tab, Spec rows, Share, Complementary products, Text, Custom Liquid and app blocks.

Blocks you can add#Link to this section

Title

Line under the title (Collection and product type, Product type, Vendor or Nothing), Show widths, and Show the New tag (uses the New tag from Theme settings > Product cards).

Vendor

Link to the vendor's products.

Price

Show tax and shipping note (Shopify requires this note on product pages) and Show installments banner (Shop Pay Installments, when the product is eligible). Sale prices and unit prices show when the variant has them.

Description

Length (Short or Full), Words in the short version, and Custom text (replaces the description; connect it to a metafield for a short description).

Spec rows

Heading, Align with the bottom of the media, and Spec row blocks.

Spec row

Label; Value from (Text, Product type, Vendor, Size range, Widths, Number of colors, Weight (selected variant), SKU (selected variant), Barcode (selected variant)); and Value (used with Text; can be connected to a metafield).

Collapsible tab

Heading, Text, Page, Show the product description, Link to the shipping and refund policies, Open by default. It can also hold Spec row blocks.

Share

Label. Shares or copies the product link.

Complementary products

Heading and Products to show (1 to 6). Choose complementary products in the Search & Discovery app.

Text, Custom Liquid, app blocks

Free text, Liquid code and apps.

Product recommendations#Link to this section

Product templates only. Recommendations come from Shopify and change over time as orders come in. Settings: Heading, Caption, Products to show (2 to 8), Columns per row (3 or 4).

Collection#Link to this section

Head and filters

Show breadcrumbs

A breadcrumb trail above the title.

Show collection description

The description under the title.

Show collection image

The collection's image in a rounded tile beside the title, using its focal point.

Enable filtering

The filter rail. A filter for your size option adds the "Only in your size" toggle and the size grid; a color option filter with swatches adds the quick colors.

Enable sorting

The sort menu.

Product grid

Products per page

8 to 48. Default 24

Columns on desktop, Columns on phones

2 to 4; 1 or 2.

Show the "Not in your size" row

When one size is filtered, folds styles sold out in that size into one row after the grid, with their nearest sizes in stock. Loads after the page.

Collections list#Link to this section

The page at /collections. Settings: Heading, Show breadcrumbs, Collections per page, Columns on desktop, Columns on phones, Image ratio, and Show styles in the shopper's size (counts the styles in stock in the shopper's size after the page loads; needs the size and availability filters).

Search#Link to this section

The search dialog opens from the header, with suggestions as the shopper types (see Search settings). The Search results section has:

Show breadcrumbs

A breadcrumb trail.

Enable filtering, Enable sorting

Filters come from Search & Discovery. An option filter for your size option adds the "Only in your size" toggle and the size cells.

Results per page, Columns on desktop, Columns on phones

The grid layout.

Show articles and pages

Includes blog posts and pages in the results.

Suggestions menu

Shown when a search finds nothing: links from the menu and its first level of nested links, up to eight.

Cart page and Cart drawer#Link to this section

Choose the drawer or the page in Theme settings > Cart. Both have quantity editing, remove, the order note, discounts, purchase option details and the size flag. Both sections have the same settings:

Show dynamic checkout buttons

Express checkout buttons such as Shop Pay.

Ask shoppers to agree to terms

Checkout stays closed until the box is ticked; express checkout buttons wait for it too.

Terms text

The checkbox text, with a link to your terms.

Collection to suggest

For the empty bag. Defaults to all products. The link opens in the shopper's size when one is set.

Blog and Article#Link to this section

Blog: Show breadcrumbs, Show topic filters (from article tags), Stories per page, Columns on large screens, Feature the latest story; and for story cards, Image style (Studio multiplies the photo onto a pale tint; Full photo shows it as it is), Image ratio, Show the date, Show topics, Show the excerpt.

Article: Show breadcrumbs, Show the date, Show the reading time, Show the featured image, Image style, Image ratio, Set the first paragraph larger, Show the author, Show topics, Show share links. A comment form appears when comments are turned on for the blog.

Each story gets a pale studio tint behind its image, the same on the blog and on the article. To choose it yourself, add an article metafield definition last.tint (type Color) and set a pale color on the article.

Pages, contact and size guide#Link to this section

Page (template page): Show breadcrumbs, Text position on large screens (Reading column, beside the rail, Start or Centered), Text width, Set the first paragraph larger. It accepts theme blocks and app blocks.

Contact page (template page.contact): Show breadcrumbs, Form heading, Show the phone field, Note under the form, and Contact detail blocks (Label, Text) for an email address, a phone number or opening hours.

Size guide (template page.size-guide): create a page in Online Store > Pages, choose the template page.size-guide, then select that page as the Size guide page in the product page's Color and size picker. The page shows your size scale and, with Show the conversion table, the table from Theme settings > Sizes. Settings: Heading, Introduction, the measuring steps (Step blocks with Title, Text and Image), Show the closing line with the size button, Collection for "Shop your size", Show the page content, Heading for the page content.

Gift card#Link to this section

The page a customer opens from a gift card email. It has no settings. It shows the value and balance, the code with a copy button, a QR code, the expiry date when there is one, and links to start shopping, to print, and to add the card to Apple Wallet when available.

Password page#Link to this section

Shown while your store is password-protected. Settings: Heading, Stage tint (keep it pale so the text stays readable), Image (optional; multiplied onto the tint, so photos on white work best), and the newsletter: Show newsletter sign-up, Heading, Text. The password entry for the store owner is on the same page.

404 page (Page not found)#Link to this section

Settings: Heading, Show the search field, Collection for "Shop your size" (defaults to all products; the shopper's size is added when they have one), and Suggestion links (a menu shown as chips under the search field).

Background sections#Link to this section

The theme also contains Collection size counts, Not in your size row, In your size grid and Search suggestions. The theme loads them in the background to update parts of a page. They cannot be added in the editor and have no settings.

7Product card options#Link to this section

Tints and the colorway map#Link to this section

With Tint behind product photos set to From the colorway, each card's tile is tinted from its color:

• by default, from the color option's swatch, mixed with white (22% swatch, 78% white);
• near-black and near-white swatches, and colors without a swatch, use the Fallback tint;
• a line in Colorway colors overrides the swatch (the dot color) and the tint for that color name, store-wide.

The format is one colorway per line, Name: swatch, tint. The name is matched without regard to case, and the tint is optional.

Night: #1E2433, #F7D6CA
Coral: #ef6a55, #f8dbd2
Lagoon: #2aa3b8

Use the map when your color option has no swatches, or when you want a different tint from the automatic one. The same rule tints the colorway tiles on the product page.

Studio image fit#Link to this section

Studio sweep centers the photo, zooms it slightly (Photo zoom, 120% by default) and fades its edge into the tint, so photo backgrounds disappear. With Blend white photo backgrounds into the tint on, white photo backgrounds take on the tint. It works best with side-view product photos on white. For lifestyle photos choose Fill the frame; to show the whole product without zoom, choose Show the whole product. Gift cards always use the whole-product fit.

Badges#Link to this section

A card shows at most one badge, the first that applies:

1. Sold out: no variant is available.
2. Sale: the compare-at price is higher than the price.
3. New: the product has the tag set in Product tag for the New badge (default new, in any case).
4. A tag badge: the first of the product's tags that is listed in Product tags shown as a badge, shown as written on the product.

Card metafields#Link to this section

Two optional product metafields frame one product's card photo differently from the rest, for example a photo shot wider or tighter than your others. Neither is required. Create the definitions in Settings > Custom data > Products > Add definition:

8Checkout branding#Link to this section

Shopify hosts the checkout, so a theme cannot change its layout or code. You edit it in Shopify's checkout editor: Settings > Checkout > Customize. Changing the checkout's layout or adding custom components is only possible on Shopify Plus.

To make the checkout match Last, set these values:

9Accessibility and performance#Link to this section

Accessibility#Link to this section

• Built to WCAG 2.2 AA: a "Skip to content" link, landmarks, and keyboard and screen reader support across the size sheet, drawers, filters and pickers.
• Visible focus rings with 3:1 contrast on every color scheme.
• Stock never relies on color alone: filled dots and rings come with words such as "2 of 4 colors" and "Not in 42 today".
• Cart, filter and size changes are announced to screen readers through a live region.
• Motion is reduced when the shopper's device asks for reduced motion.
• Core tasks work without JavaScript: filters are native links, the product form posts, and the cart is a normal form.
• Automated testing with axe-core on the theme's preview pages, at 1440 px and 390 px wide, found no WCAG violations.

Your content matters too: add alt text to images, keep words out of photos (use the sections' text settings), and keep Secondary text and Tertiary text at a contrast of 4.5:1 or more when you edit color schemes.

Performance#Link to this section

• No frameworks and no jQuery. One render-blocking stylesheet; scripts are deferred, and page-specific scripts load only on the pages that use them.
• Responsive images with focal points, lazy loading below the fold, and a fetch-priority hint for the first image on collection and search pages.
• Per-size counts and the "Not in your size" row load after the page appears.
• YouTube and Vimeo players load only after the shopper presses play.
• On the developer's test store (9 products, 564 variants), Lighthouse on mobile scored 89 for performance on the home page, 92 on a collection page and 73 to 74 on a product page, with 100 for accessibility on each (9 October 2026). Your scores depend on your images, apps and content.

10FAQ and troubleshooting#Link to this section

11Support#Link to this section

For help with Last, email info@elsayedb.com.

Please include:

• your store URL (for example yourstore.myshopify.com) and, if the store is password-protected, a theme preview link;
• the theme version: 1.0.0 (shown in Online Store > Themes);
• the steps to reproduce the problem: the page, what you did, what you expected and what happened;
• screenshots or a short screen recording, and your browser and device.

Theme support covers the theme as released. Changes you or others make to the theme code are not covered.

12Changelog#Link to this section

1.0.0 October 2026#Link to this section

First public release.

Shop in your size#Link to this section

• A "Your size" chip and sheet in the header: set a size once and it is remembered for the visit (or longer, by setting). Size systems (EU, UK, US, cm) from a conversion table in Theme settings.
• Collection, search and home pages show what is in stock in the shopper's size: color dots go hollow for colors not available in it, count chips say how many styles fit, and an "Only in your size" toggle filters the grid with Shopify's native size and availability filters.
• Product pages pair a color and size picker with clear stock states, keep the first available variant loaded, and mark the shopper's saved size.
• The cart flags a line that is not in the shopper's size and offers a one-step swap.

Merchandising#Link to this section

• Studio-style product cards with colorway tints, optional per-product photo zoom and mirroring (product metafields), image swatches, badges from product tags and quick add.
• Home sections: hero by colorway, "In your size" product grid, shop by color, image with text, image banner, video, collection list, rich text, featured product, newsletter, promise columns and custom Liquid. Theme blocks (group, heading, text, button, image, spacer, custom Liquid) work inside rich text and page sections.
• Size guide page template with measuring steps and the conversion table from Theme settings.

Commerce features#Link to this section

• Faceted filtering and sorting (Shopify Search & Discovery filters), predictive search, product recommendations and complementary products, pickup availability, selling plans (subscriptions), quantity rules and volume pricing, unit prices, Shop Pay Installments, gift card recipient form, dynamic checkout buttons on by default, cart drawer or cart page with order notes and terms.
• Localization: country and language selectors, right-to-left layout support, plural-aware strings.

Accessibility and performance#Link to this section

• Keyboard and screen reader support across the size sheet, drawers, filters and pickers; visible focus rings with 3:1 contrast on every color scheme; reduced-motion support.
• Responsive images with focal points, lazy loading below the fold, and a fetch-priority hint for the first image on collection and search pages.

Customization#Link to this section

• Four color schemes, a signal color and a spectrum accent, font pickers, heading scale and tracking, page width and margins, card ratio and image fit.