Axle documentation

What each preset sets

Both presets use the same sections and blocks. They differ in their settings and in how each template is put together:

• Header

  Axle: a dark Top bar (Centered) above the Inline header, transparent over the home page hero, sticky When scrolling up, with the menu next to the icons. Ironside: the Bar header with the utility bar and a large search field (“Search by tool, brand, part number or SKU”), sticky Always, a charcoal main row over a graphite menu row. The Ironside top bar is hidden.

• Home page

  Axle: Hero (Overlay), Logo list (Scrolling row), Compatibility finder (Panel with Make, Model, and Year), Image with stats, Category tiles, Featured collections, Feature cards, Video, Collection tiles (Shop by vehicle), Testimonials (Spotlight), Featured blog, FAQ, and Email signup. Ironside: Hero (Split, with spec chips and a hazard stripe), Category tiles, Compatibility finder (Panel with one Series choice), Featured collections (Grid), Logo list (Grid, Shop by brand), Image with text, Promo banner (a trade program), Quick order list, Testimonials (Cards), Featured blog, FAQ, and Email signup.

• Product page

  Axle: the Showroom gallery, the Compatibility block under the title (three choices), product facts, a Dropdown variant picker, the trust row, Installation, In the box, and Downloads, then Specifications, Product tabs with a Vehicle fitment tab, Benefit cards, Spotlight testimonials, Better together, and You may also like. Ironside: the Rail gallery, SKU, product facts, Volume pricing, Compatibility (one Series choice), variant Cards, rating, stock, Dispatch cut-off, the trust row, a Quick order list, and Downloads, then Specifications with In the box, Product tabs with a Compatibility tab, and Frequently bought together.

• Collection page

  Axle: a finder bar with Make, Model, and Year above an Overlay banner. Ironside: a finder bar with Series above a compact banner band. Both use Sidebar filters and a promo banner in the grid.

• Product cards

  Axle: a large rounded image well (Fill), an uppercase title, spec chips, the price, and a round add chip, with the second image on hover. Ironside: vendor and SKU, rating, spec bullets, the price, a stock line, a quantity stepper, and a full-width add to cart button, with the whole image shown (Fit).

• Footer

  Axle: a white footer with your store name as a giant wordmark across the bottom. Ironside: a charcoal footer with an extra Text block and no wordmark.

• Landing pages

  Axle: Spotlight testimonials, Bold panel promo banners, and Outline listicle numbers. Ironside: Cards testimonials, Image and card promo banners, and Filled listicle numbers.

Match a preset by hand

To give an existing copy of Axle the look of the other preset without adding the theme again:

1. 01In Theme settings > Design, choose the Design style.
2. 02In Theme settings > Colors, edit your five color schemes, the highlight colors, the secondary accent, and the badge colors. See Color schemes and fonts for each preset's palette.
3. 03In Theme settings > Typography, choose the preset's fonts, and set Theme settings > Corners and Product cards.
4. 04Set the header and footer, then open each template and choose the layout options listed in What each preset sets.

More changes in the Ironside style

• Product page: the gallery panel gets a frame, the Showroom thumbnails move into a rail, and the Card buy box gets a border.
• Collection page: every Banner style becomes a compact band in the banner colors, with the collection image as a small thumbnail.
• Collections page: collections are listed as compact rows.
• Mega menus: links become dense rows with an icon tile and a product count. The icon is the link's own image as a thumbnail, or a line icon picked from words in the link title or handle, such as drill, battery, charger, saw, light, or car.
• Spec tables, In the box, and Downloads: values, SKUs, and file types use the accent font.

Hazard stripes

Show hazard stripes appears in Theme settings > Design when Design style is Ironside. It draws thin diagonal stripes in the highlight colors under the header, above the footer, and on sale badges. The 404 page shows one under the number.

The Hero section has its own Show hazard stripe setting for a stripe under the section. It shows only in the Ironside style, while the theme setting is on. Turn the theme setting off for a calmer look.

Menus

Create and edit menus in your Shopify admin under Content > Menus (or Online Store > Navigation). Axle supports three menu levels:

• Top-level items appear in the header.
• Nested items open in a dropdown, or become columns, tiles, or tabs in a mega menu.
• Items nested one level deeper appear under their parent in the dropdown, the mega menu column, or the tab.

Header

The header has three layouts. Choose one in Layout:

• InlineThe logo, the menu, and the icons in one row, with search behind an icon that opens a panel. Menu position puts the menu Next to the icons or in the Center. The default layout, used by the Axle preset.
• BarA large search field next to the logo, with the icons on the right and the menu in a row below. Used by the Ironside preset, where the search reads “Search by tool, brand, part number or SKU.”
• StackedA compact search field in the main row, with the menu in a row below.
• Header settings

  • Menu — the menu shown in the header.
  • Highlighted link — type the title or handle of one top-level menu item, for example a Sale collection. It is shown in the accent color.
  • Customer account menu — appears in the account menu for signed-in customers.
  • Layout — Inline, Bar, or Stacked. Menu position (Next to the icons or Center) applies to Inline.
  • Color scheme — the colors of the main row.
  • Menu row color scheme — the colors of the menu row, its dropdowns, the search results, and the mobile menu. Not shown for the Inline layout, which uses the header's color scheme for all of them.
  • Search field color scheme — the colors of the search field.
  • Transparent header — see Transparent header.
  • Utility bar — see Utility bar.
  • Sticky header — Always, When scrolling up, or Off. See Sticky header.
  • Search placeholder — the text inside the search field, for example “Search by tool, brand, part number or SKU.”
  • Show account label — shows a label next to the account icon on large screens. Not shown for the Inline layout.
  • Dropdown style, Open dropdowns on, and Dropdown animation — see Dropdowns and mega menus.
  • Show country selector and Show language selector — show the selectors in the mobile menu. See Country and language selectors.

Transparent header

With Use a transparent header on the home page on, the header sits over the first section of the home page and turns solid, in its own color scheme, once the page scrolls, while a menu or the search is open, and on hover or focus. It works best with a Hero that has a full-width image, as in the Axle preset.

• Text color scheme over the hero: only its text color is used. Pick a scheme with light text for a dark image.
• Logo over the hero: optional. A light version of your logo for a dark image. Once the header turns solid, it shows your regular logo.
• Other pages always show the solid header.

Utility bar

The utility bar is a slim row above the main header row, made for stores with trade customers, as in the Ironside preset. Turn on Show utility bar, then set:

• Text: a short line, for example a delivery promise or a trade offer. Keep it true.
• Utility menu: links such as Trade account, Help, and Track an order. They are shown on the right of the bar on desktop and at the end of the mobile menu.
• The bar stays hidden when both the text and the menu are empty.

Dropdowns and mega menus

Every top-level menu item with nested links opens a dropdown. The header's Dropdown style sets the look of all of them, and a Mega menu block gives one menu item its own style. Every style except Simple list is a full-width panel under the header. Choose a style for each menu:

• Simple list

  One column of links in a compact card under the menu item. Best for short menus, such as Help or About.

• Columns

  Nested links without links of their own come first as a group of large links. Every nested link with its own links becomes a column, with the nested link as its heading. A Shop all link for the parent closes the panel. Best for large catalogs with clear groups, such as Tools > Drills, Saws, and Batteries.

• Columns with images

  The columns, plus up to three image cards on the right, each with an Image, a Heading, and a Link. The default style. Good for pointing to new arrivals or a fitment guide next to the links.

• Image tiles

  Every nested link as an image tile with its name. Best when shoppers recognize your categories from a photo.

• Round images

  The nested links as round images in a row, like category chips. Best for a short Shop by vehicle or Shop by category menu.

• Featured products

  The columns, plus two to four small product cards from a Collection that you choose. Best for showing best sellers or new arrivals in the menu.

• Sidebar tabs

  The nested links as a list on the left. Hovering or focusing one shows its own links and an image on the right. Best for catalogs with many second-level categories.

• Promo card

  The columns, plus a large promotional card with an Image, an Eyebrow, a Heading, a Text, and a button, in its own Color scheme. Best for a seasonal offer or a trade program.

Give a menu item its own dropdown style

1. 01In your menu, create a top-level item, for example “Shop,” with nested items.
2. 02In the theme editor, select Header and click Add block > Mega menu.
3. 03In Menu item, type the title of that top-level menu item exactly as it appears in your menu. Capital letters don't matter.
4. 04Choose a Dropdown style and a Panel color scheme.
5. 05Fill in the settings of that style: the image cards for Columns with images, the images for Image tiles, Round images, and Sidebar tabs, the Collection and Products to show (2 to 4) for Featured products, or the card content for Promo card.

Dropdown behavior

• Open dropdowns on: Hover or Click. Touch screens and keyboards always open dropdowns with a tap or a key press.
• Dropdown animation: None, Fade, or Slide down. Visitors who turn on reduced motion don't see the animation.

Sticky header

• Always: the header stays at the top of the screen while visitors scroll, condensed to its main row. The Ironside preset uses it, so the search is always at hand.
• When scrolling up: the header moves out of the way while visitors scroll down and comes back as soon as they scroll up. The default, used by the Axle preset.
• Off: the header scrolls away with the page.

Top bar

The Top bar sits above the header on every page and shows short announcements, such as shipping offers. It can only be added to the header group. The Axle preset shows it in the dark scheme; the Ironside preset hides it in favor of the utility bar.

• Top bar settings

  • Layout — Row shows the announcements on the left and a tagline on the right on large screens. Centered shows the announcements in the middle.
  • Color scheme — the colors of the bar.
  • Tagline — a short line on the right of the bar on large screens. Row layout only.
  • Rotate announcements — on small screens, one announcement shows at a time and rotates when there is more than one. Visitors who reduce motion see the first one.
  • Change every — how long each announcement is shown, from 3 to 10 seconds.
  • Show country selector and Show language selector — selectors appear in the top bar on large screens when your store sells in more than one country or language.
  • Announcement (block) — an Icon (for example Truck, Returns, Shield, Wrench, or Clock), a Text, and an optional Link. Add up to three announcements.

Country and language selectors

Selectors appear when your store sells in more than one country or language. Set up countries in Settings > Markets and languages in Settings > Languages. You can show the selectors in three places:

• Header: in the mobile menu.
• Top bar: on large screens.
• Footer: at the bottom of every page.

Customer account icon

When customer accounts are turned on in Settings > Customer accounts, the header shows an account icon. It uses Shopify's account component, which lets customers sign in and, once signed in, opens a menu with links to their orders and profile. To add your own links to that menu, choose a menu in the header's Customer account menu setting. See Customer accounts.

Footer

• Footer settings

  • Color scheme — the colors of the footer.
  • Footer logo — leave blank to use the logo from theme settings.
  • Layout — Columns places your blocks side by side, with the payment icons in the bottom row. Compact gives the payment icons their own column.
  • Wordmark — see Giant wordmark.
  • Legal menu — links in the bottom row. Leave blank to show your store policies instead.
  • Show policy links — links to the policies you add in Settings > Policies.
  • Show payment icons — shows the icons of the payment methods your store accepts.
  • Show Follow on Shop button — lets customers follow your store in the Shop app. Shop Pay must be enabled.
  • Show country selector and Show language selector — selectors appear when your store sells in more than one country or language.
  • Top padding and Bottom padding — space above and below the footer content.
• Footer blocks

  • Brand — your logo, a short Text about your brand, and social media icons (Show social media icons). Set the logo size with Logo width. One per footer.
  • Menu — a column of links from the selected Menu. Leave Heading blank to use the menu name. Up to three.
  • Text — a Heading and Text, for example contact details or trade account hours.
  • Email signup — a newsletter form with a Heading, a Text, and a Button label. Each signup adds a subscriber to your customer list. One per footer.
  • Custom Liquid — your own Liquid or HTML code.
  • Apps — app blocks from apps that you install.

Giant wordmark

The footer can close every page with your brand set across the full page width, as in the Axle preset. Turn on Show wordmark, then choose what it shows in Show:

• Store name: your store name in the heading font, sized to fill the width. Wordmark text replaces it, for example with a shorter brand name. Short words fill the width best.
• Logo: your logo at full width.
• Turn Show wordmark off for a compact footer, as in the Ironside preset.

Email signup

The Email signup section is a newsletter form that you can add to any page or to the footer group. Both presets close the home page with one. Each signup adds a subscriber to your customer list.

• Email signup settings

  • Layout — Card: a centered card. Band with image: a full-width band with an image beside the form. Split panel: a panel in the color scheme, with the text beside the form.
  • Image — for Band with image and Split panel.
  • Eyebrow, Heading, Text, and Button label.
  • Note under the form — for example how often you send emails and that customers can unsubscribe at any time.
  • Alignment — Left or Center, for Card.
  • Color scheme, Top padding, and Bottom padding.

Banners and video

• HeroA large opening banner with a heading, text, up to two buttons, spec chips, a product price, and an optional video card.

  • Layout — Overlay: text on a full-width image or video, with a huge headline in the bottom corner (Axle). Split: product picture beside the text, on its own panel, with spec chips and the price (Ironside).
  • Make section full width — for Overlay. Turn it off to show the hero as a rounded panel inside the page margins.
  • Minimum height — from 400 to 960 px.
  • Image shade — for Overlay, from 0% to 90%. Darkens the image from the bottom corner with the color scheme's background, so the text stays easy to read.
  • Show hazard stripe — a stripe under the section in the Ironside style. See Hazard stripes.
  • Eyebrow, Heading, and Text — set a phrase of the heading in italics to highlight it.
  • Heading level — H1 or H2. Use H1 only once per page, for the main heading.
  • Button label, Button link, Second button label, and Second button link.
  • Trust line — a short line under the buttons, for example your guarantee. Leave empty to hide it.
  • Product — shows the price and links to the product. In the Split layout, its image is used when no Image is set.
  • Image — Overlay: 2400 x 1400 px recommended. Split: a transparent PNG of your product works best. Mobile image replaces it on small screens.
  • Background video — Overlay only. Plays muted on a loop behind the text, with a pause button. Visitors who prefer reduced motion see the image instead.
  • Video card — a small rounded card with a play button that opens a video in a dialog: Video (uploaded) or Video link (YouTube or Vimeo), a Cover image (leave empty to use the uploaded video's preview image), and a Caption.
  • Spec chip (block) — a Value and a Label, for example 18V and Brushless motor. Add up to three.
• SlideshowUp to eight slides, each with its own image, text, button, and color scheme.

  • Layout — Full width or Rounded banner set the text over the image, shaded in the slide's color scheme. Split card colors a card beside the image with the slide's color scheme.
  • Minimum height — Small, Medium, or Large.
  • Show counter and progress bars, and Show arrows — navigation controls.
  • Auto-rotate slides — off by default. Rotation pauses while a visitor hovers or focuses the slideshow, and stays off for visitors who prefer reduced motion.
  • Change slides every — from 3 to 10 seconds.
  • Slide (block) — Image, Mobile image, Eyebrow, Heading, Text, Button label, Button link, and Color scheme. Alignment (Left, Center, or Right) and Text position (Top, Middle, or Bottom) apply to Full width and Rounded banner.
• VideoA large heading above a wide video with a centered play button.

  • Heading, Text, and Alignment (Left or Center).
  • Video — an uploaded video, or a Video link (YouTube or Vimeo) when no video is uploaded.
  • Cover image — shown before the video plays, and on its own when there is no video. Leave empty to use the preview image of an uploaded video.
  • Play button label — shown under the play button and read by screen readers. Leave empty to show only the button.
  • Play the video — In the section, or In a pop-up.
  • Video ratio — 21:9 or 16:9 on screens 750 px and wider. Smaller screens use 16:9.
  • Videos load only when a visitor presses play.
• Promo bannerA banner that promotes an offer or a program, such as a trade account, with up to three perks.

  • Layout — Image with card: an image with a card of text and perks. Bold panel: one strong panel in the Panel color scheme (Axle landing pages). Image and card: a large image beside the card (Ironside). Bold panel and Image and card look best with a dark scheme.
  • Image, Heading, Show icon before the heading, and Text.
  • Button label, Button link, Second button label, and Second button link.
  • Color scheme and Panel color scheme — the colors of the section and of the card or panel.
  • Perk (block) — an Icon, a Title, and a Text. Add up to three. Only list perks your store really offers.
• CountdownA live timer that counts down to a real deadline, such as the end of a sale or a launch. The timer is the same for every visitor and never restarts.

  • Eyebrow, Heading, Text, Button label, and Button link.
  • End date — use the format YYYY-MM-DD, for example 2026-12-31.
  • End time — 24-hour format HH:MM, for example 18:00.
  • Time zone — the UTC offset of the end time. Use the offset in effect on the end date, so take daylight saving time into account. See How do I set the countdown time zone?
  • Show days, Show hours, Show minutes, and Show seconds — the units of the timer.
  • When the timer ends — Hide, or Show a message (set the Message).
  • Layout — Side by side or Stacked. Panel color scheme — the colors of the timer panel.
  • Only count down to a deadline that really applies. A timer that restarts for each visitor misleads customers, so Axle doesn't offer one.
• Rich textAn Eyebrow, a Heading, a Text, and an optional button (Button label and Button link), with Alignment (Left or Center) and Style: Plain, or Panel for a rounded panel in the color scheme.
• Email signupA newsletter form. See Email signup.

Compatibility finder

The Compatibility finder section lets shoppers choose their vehicle or tool series step by step and opens the products that fit. It has a Panel layout for the home page and a Bar layout for the top of collection pages. See Compatibility finder for the setup and every setting.

Collections and products

• Category tilesA row of collection shortcuts with images, icons, and labels. Add up to eight Collection blocks.

  • Heading, Subtitle, Link label, and Link.
  • Style — Cards: the picture above the label. Picture with label: the picture fills the tile. Compact chips: small chips that suit long lists of categories.
  • Show product count — shows the number of products in each collection.
  • Mobile layout — Swipe slider or Grid.
  • Collection (block) — a Collection, an optional Label and Image (leave them blank to use the collection's own), an Icon (for example Plug, Battery, Car, Drill, Saw blade, or Angle grinder) shown on the tile, and a Link that replaces the link to the collection.
• Collection tilesLarge picture tiles that link to collections, for example Shop by vehicle or Shop by trade. Add up to eight Tile blocks.

  • Heading, Subtitle, Link label, and Link.
  • Style — Cards with captions: the label under each picture (Axle). Picture with label bar: a bar with the label across the bottom of each tile. Wide panels: large panels with the label.
  • Show product count and Mobile layout (Swipe slider or Grid).
  • Tile (block) — a Collection, a Link (replaces the link to the collection), an Image (leave blank to use the collection image), and a Label (leave blank to use the collection title).
  • Up to five tiles share one row; six or more split into two balanced rows.
• Collection listA grid of collection cards. Add up to 12 Collection blocks.

  • Heading, Subtitle, Link label, and Link — leave Link blank to link to your collections page.
  • Alignment — Left or Center.
  • Card style — Cards, Picture with label, or Compact chips.
  • Columns on desktop — from 2 to 6.
  • Mobile layout — Swipe slider or Grid, with Columns on mobile (1 or 2) for the grid.
  • Show product count — shows the number of products in each collection.
  • Collection (block) — a Collection, and an optional Label and Image.
• Featured collectionsProduct cards from one or more collections. With more than one Collection block, shoppers switch between them with tabs. Add up to eight.

  • Heading, Subtitle, Link label, and Link — leave Link blank to link to the first collection.
  • Header layout — Heading left, link right; or Centered, button under the products.
  • Layout — Row with arrows (Axle) or Grid (Ironside).
  • Products to show — from 3 to 12. Columns on desktop — from 2 to 5.
  • Arrow position — On the sides or Below the slider, for Row with arrows.
  • Show the new badge for and Best seller collection — see Product badges.
  • Collection (block) — a Collection and an optional Tab label. Leave the label blank to use the collection title.
• Featured productShows one product with its images and buy buttons, so customers can buy without leaving the page.

  • Product, Media position (Left or Right), Media ratio (Adapt to media, Square, Portrait, or Landscape), Image fit (Fill or Fit), and Show “View full details” link.
  • Blocks — Title, Product rating, Vendor, SKU, Price, Text, Description, Inventory status, Product facts, Variant picker, Purchase options, Buy buttons, Trust row, Pop-up guide, Custom Liquid, and app blocks. These work like the product page blocks.
• SpecificationsA product's technical details from its metafields: the specification table in the main column, with In the box, Installation, Downloads, and Compatibility beside it. See Specifications section.
• Image hotspotsShop the look: an image with a dot on each product, for example a kitted-out car or a van fit-out. Add up to six Hotspot blocks.

  • Eyebrow, Heading, and Text.
  • Image and Image ratio — Adapt to media, Portrait, Square, Landscape, or Wide.
  • Layout — Intro beside the image or Intro centered above.
  • Image position — Left or Right. On desktop, the list of products sits on the other side.
  • Hotspot (block) — a Product, a Horizontal position (distance from the left edge of the image), and a Vertical position (distance from the top edge).
  • Selecting a dot opens a card with the product image, title, and price. Products without variants can be added to the cart from the card. Products with options, subscription-only products, and gift cards show View product instead.
• Quick order listA table of every variant of a product with a quantity field each. See Quick order list.
• Recently viewed productsShows the products the visitor looked at most recently. The section stays hidden until there is something to show. The list is stored in the visitor's own browser.

  • Eyebrow and Heading.
  • Products to show — from 2 to 8. Columns on desktop — from 2 to 5.
  • Arrow position — On the sides or Below the slider.
  • Mobile layout — Swipe slider or Grid.

Product badges

Product cards and the product page show one badge per product, in this order: Sold out, your own text from the custom.badge metafield, Sale, Best seller, and New. Sold out and Sale follow your theme settings. Best seller and New are set in each section that shows products (Featured collections, Collection page, and Search results) and in the Title block of the product page:

• Show the new badge for: products tagged new, or created within this number of days (0 to 90), get the New badge. Set it to 0 to turn it off.
• Best seller collection: products in this collection, and products tagged bestseller, get the Best seller badge.
• A custom.badge metafield replaces the automatic badge with its own text, for example “Kit deal.” A text with the word new, best, popular, or sale takes that badge's color. See How do I add a badge to some products only?

Trust and storytelling

• Logo listLogos or names of the brands you carry, partners, or press features. Add up to 12 Logo blocks.

  • Eyebrow, Heading, and Text.
  • Layout — Grid (Ironside, Shop by brand), or Scrolling row (Axle): an endless row that pauses when a visitor hovers over it and has a pause button. Visitors who reduce motion see a still row.
  • Logo height — from 24 to 120 px.
  • Show logos in one color — recolors the logos to match the color scheme. Works best with transparent PNG or SVG logos.
  • Speed — for the scrolling row, the time for one full loop, from 10 to 90 seconds. Lower values move faster.
  • Separator — None, Dot, Sparkle, or Slash, shown between logos in the scrolling row.
  • Logo (block) — an Image, a Name, a Link, and a Quote: a short line from an article, shown under the logo. The Name is also the logo's alt text.
  • Wordmarks — leave Image blank to show the Name as a text wordmark, styled with Wordmark style: Heading font, Spaced capitals, Italic, or Accent font.
  • Only show the logos of brands you really carry or work with, and that you may use.
• Image with statsA big heading, text, and a button beside a rounded image, with up to four stats, such as 94% and a label, under the image.

  • Eyebrow, Heading, Text, Button label, and Button link.
  • Image, Image position (Left or Right), and Image ratio (Adapt to media, Wide, Landscape, Square, or Portrait).
  • Count up numbers — the numbers count up once when the section comes into view. Visitors who prefer reduced motion see the final numbers right away.
  • Stat (block) — a Value, for example 94%, 10k+, or 4.9/5, and a Label that says what it measures. Add up to four. Only use numbers you can back up.
• Feature cardsA heading and a button on one side, then a row of cards. One card can stand out in a dark color scheme.

  • Heading, Subheading, Button label, and Button link.
  • Columns on desktop — from 2 to 4.
  • Mobile layout — Swipe row or Stacked.
  • Highlighted card color scheme — used by cards with the highlighted style. Color scheme — the colors of the section.
  • Feature card (block) — an Icon (for example Bolt, Gauge, Battery, Plug, Car, or Drill), a Title, a Text, a Link label, a Link, and Use the highlighted style. Add up to eight.
• Value propsA row of short promises, such as shipping, returns, and warranty. Add up to six Value prop blocks.

  • Style — Row with dividers, Cards, or Centered icons.
  • Heading — optional, shown centered above the items.
  • Mobile layout — Swipe slider or Grid.
  • Value prop (block) — an Icon, a Title, and a Text. Only promise what your store really offers.
• TestimonialsCustomer reviews. Add up to eight Testimonial blocks. Use real reviews, shared with the customer's permission.

  • Heading and Subtitle. Link label and Link apply to the cards style.
  • Style — Cards (Ironside), or Spotlight (Axle): one review at a time with its picture, arrows, and a counter such as 01 – 05. Spotlight never moves on its own.
  • Desktop layout — Grid or Endless scrolling row, for Cards. The row pauses on hover and with its pause button. Visitors who prefer reduced motion see a still grid.
  • Speed — the time for one loop of the scrolling row, from 20 to 90 seconds.
  • Mobile layout — Swipe slider or Stacked, for Cards.
  • Testimonial (block) — Quote, Rating (0 to 5 stars; 0 hides the stars), Author, Role line (for example what they bought), Author photo (cards style), and Image (spotlight style; leave empty to use the author photo).
• Image with textAn image next to text, buttons, and a checklist.

  • Image and Second image — the second image overlaps the corner of the first one.
  • Badge — a short label on the image, for example “New.”
  • Layout — Side by side, or Joined panel, where the color scheme colors one panel that holds the image and the text.
  • Image position — Left or Right.
  • Blocks — Eyebrow, Heading, Text, Checklist (one item per line in List items), Button (Primary or Secondary), Custom Liquid, and app blocks.
• Before and afterTwo photos of the same subject with a handle that customers drag, or move with the arrow keys, to compare them. Good for detailing products, covers, and restorations.

  • Eyebrow, Heading, and Text.
  • Before image, Before label, After image, and After label — take both photos from the same angle.
  • Starting position — where the handle starts, from 0% to 100%.
  • Image ratio — Adapt to media, Landscape, Square, Portrait, or Wide.
  • Layout — Intro above or Intro beside. Width (Narrow or Page width) applies to Intro above.
• Benefit cardsUp to six cards, each with an image or an icon, a title, a short text, and an optional link. The Axle product template places it under the product.

  • Heading and Subtitle.
  • Style — Strip with dividers, Separate cards, or Centered.
  • Columns on desktop — from 2 to 4. Mobile layout — Swipe slider or Stacked.
  • Highlight the first card — shows the first card in reversed colors, for the separate cards style.
  • Panel color scheme — the colors of the strip, or of the cards in the separate cards style.
  • Benefit card (block) — an Image (square recommended), an Icon (shown when there is no image), a Title, a Text, a Link label, and a Link.
• FAQQuestions that open and close to reveal their answers.

  • Eyebrow, Heading, and Text.
  • Layout — List, or Heading beside questions (both presets).
  • Open the first question — shows the first answer when the page loads.
  • Question (block) — Question, Answer, and Answer from page. When you choose a page, its content appears in the answer.
  • Custom Liquid and app blocks are also supported.
• Featured blogThe latest posts from one blog.

  • Blog, Heading, and Subtitle.
  • Link label — links to the selected blog. Leave blank to hide the button.
  • Posts to show — from 2 to 4.
  • Layout — Picture beside text, Large first post, or Picture above text.
  • Mobile layout — Swipe slider or Stacked.
  • Show featured image, Show tags, Show date, and Show excerpt — what each blog post card shows.

Layout and utilities

• Custom sectionAn empty section that you build from theme blocks. See Custom section and blocks.
• Custom LiquidPaste app snippets or your own Liquid, HTML, CSS, and JavaScript to build advanced customizations. Code you add here is not covered by our support.

  • Liquid code — your code.
  • Make section full width — removes the page margins.
• BreadcrumbsShows the path to the current page. Nothing is shown on the home page. You can add it to every template except the home page and the password page.

  • Text size — Small, Medium, or Large.
  • Alignment — Left or Center.
  • Top padding and Bottom padding — from 0 to 48 px.
• Contact formA form that sends messages to your store email. See Contact page and contact form.

Product information

• Section settings

  • Gallery layout — Showroom: a large panel with an image counter and the thumbnails under it (Axle). Rail: the thumbnails in a column beside the panel (Ironside). Open: the showroom without the panel. Mosaic: every image in a two-column grid on desktop. Phones always swipe.
  • Media ratio — Adapt to media, Square, Portrait, or Landscape.
  • Image fit — Fill crops images to the frame. Fit shows the whole image, which suits product photos on white.
  • Loop videos — restarts product videos when they end.
  • Enable image zoom — opens product images in a full screen view with previous and next navigation. See Image zoom.
  • Color scheme — the colors of the section.
  • Buy box — Card places the product details on a card next to the media; the Ironside style frames it with a border. Open shows them without the card.
  • Show sticky add to cart bar — shows the price and an add to cart button at the bottom of the screen once the buy buttons scroll out of view. See Sticky add to cart bar.

Product blocks

Add, remove, and reorder these blocks inside Product information.

• Title

  The product title with one badge, and the subtitle from the custom.subtitle metafield (or descriptors.subtitle). Settings: Show product type and vendor, Show badge, Show the new badge for, and Best seller collection. See Product badges.

• Product rating

  Shows the product rating metafields that review apps fill in.

• Vendor

  The product vendor.

• SKU

  The SKU of the selected variant, in the accent font. It updates when the customer picks another variant.

• Price

  The price, the compare-at price, and unit prices. Show tax and shipping note adds a note about taxes and shipping, and Show installment terms shows Shop Pay Installments terms when they are available.

• Text

  A short piece of rich text.

• Description

  The product description.

• Inventory status

  Stock messages for variants whose inventory Shopify tracks. Low stock threshold (0 to 50) shows the remaining quantity, for example “Only 3 left.” Show in stock message shows “In stock” above the threshold. Nothing appears when inventory isn't tracked.

• Benefit icons

  Up to four icon chips with short labels. See Benefit icons.

• Product facts

  Short facts as chips, such as 18V, 135 Nm, or 48 A. See Product facts.

• Variant picker

  Cards, Pills, or Dropdown. See Variant picker and swatches.

• Purchase options

  One-time purchase and subscription choices. See Purchase options and subscriptions.

• Buy buttons

  The quantity field and the add to cart button. See Buy buttons.

• Trust row

  Three short reassurances with icons. See Trust row.

• Dispatch cut-off

  Your real dispatch cut-off time. See Dispatch cut-off.

• Back in stock request

  See Back in stock request.

• Pop-up guide

  A link that opens a pop-up. See Pop-up guide.

• Size chart

  A Size guide button that opens a chart. See Size chart.

• Collapsible tab

  A Heading that opens to show Content, Content from page, or both. Open by default shows the content when the page loads.

• Share

  A share button that uses the device's share menu or copies the link. Add an optional second button with Help button label and Help button link, for example to your fitment guide or contact page.

• Compare button

  Adds the product to the comparison. See Product comparison.

• Countdown

  A compact timer in the buy box. See Countdown block.

• Volume pricing

  Quantity rules and price breaks for B2B customers. See Volume pricing and quantity rules.

• Quick order list

  Every variant with its own quantity field. See Quick order list.

• Compatibility

  Whether the product fits the shopper's saved vehicle or series, with a Check fit button. See Compatibility block.

• Specification table

  Rows of technical data from a metafield. See Specification table.

• In the box

  What comes in the package, with quantities. See In the box.

• Installation

  Difficulty, install time, and the tools needed. See Installation.

• Downloads

  Manuals, spec sheets, and other files. See Downloads.

• Custom Liquid

  Your own Liquid or HTML code.

• Apps

  App blocks, for example from a reviews app.

Compatibility block

The Compatibility block shows whether the product fits the shopper's saved selection, read from the custom.fitment metafield of the product and its variants:

• Nothing saved yet: “Check fit” and “Select your vehicle to see if this fits,” with a Check fit button. With the Selection wording: “Make a selection to see if this fits.”
• It fits: “Fits your 2023 Tesla Model Y.” A product whose only line is Universal shows “Universal fit” without a Check fit button until a selection is saved.
• It fits only some of the saved years: “May fit your 2021-2024 Tesla Model Y,” with a note to check the compatibility list. Axle never claims a fit it can't prove.
• It doesn't fit: “Doesn't fit your 2023 Tesla Model Y.”
• Check fit and Change vehicle open a dialog with the same choices as the finder. Saving there updates every badge on the page and in other tabs.
• When variants have their own fitment lines, for example floor mats per model, the first variant that fits the saved selection is selected when the page opens, unless the link names a variant.
• Products without fitment lines don't show the block.

• Compatibility settings

  • Heading — optional. Leave it empty to show the status without a title.
  • Show compatibility list — adds a list that opens to show every vehicle or series the product fits.
  • Options come from, Menu, Collection, Number of choices, First choice label, Second choice label, Third choice label, and Wording — the choices of the Check fit dialog. Use the same values as your Compatibility finder section. See Finder settings.

Specification table

A real table of technical data, such as motor, torque, voltage, and dimensions. Rows come from a product metafield, one row per line, written as Label | Value or Label | Value | Note. A line without | starts a group, so you can split long tables into Motor, Battery, and Dimensions.

• Heading: the default is Specifications. It is also the table's name for screen readers.
• Specification metafield: leave it blank to use the metafield set in Theme settings > Product cards > Specification metafield (custom.specs by default), so the table and the product comparison share the same rows.
• Show notes: shows the third part of each row as a note under the value, for example “Kit only.”
• Show as a collapsible row: turns the block into a row that opens and closes. Open by default opens it when the page loads. Good for long tables in the narrow buy box.

In the box

A list of what comes in the package. Items come from the metafield in Items metafield (custom.in_the_box by default), one item per line. End a line with | and a number to show a quantity, for example Battery 18V 5.0Ah | 2.

• Heading: the default is In the box.
• Show as a collapsible row and Open by default: as in the specification table.

Installation

Installation facts from three product metafields. Facts without a value are left out, and the block shows nothing when all three are empty:

• Difficulty, from custom.install_difficulty: a number from 1 to 4 shows a meter with Easy, Moderate, Advanced, or Professional installation. A rating metafield shows its value, for example 2 of 5, and a single line text is shown as it is.
• Install time, from custom.install_time: a number of minutes, shown as 45 min or 1 h 30 min. A single line text is shown as it is.
• Tools needed, from custom.install_tools: a list of tools, shown as chips.
• Settings: Heading, Show difficulty, Show install time, Show tools needed, a Note under the facts (for example a link to your fitting service), Show as a collapsible row, and Open by default.

Downloads

Manuals, spec sheets, safety data sheets, and other files. Each file of the metafield in Files metafield (custom.downloads by default, a File or File list metafield) becomes a row with its name, its type (such as PDF), and a download icon. The name is the file's alt text in Content > Files, or its file name.

• Extra links: Link 1 label and Link 1, Link 2 label and Link 2, for files that many products share, such as your warranty terms. Upload them once in Content > Files and paste their links.
• Files open in a new tab, and screen readers announce it.
• Heading, Show as a collapsible row, and Open by default work as in the other blocks.

Dispatch cut-off

The Dispatch cut-off block shows your real dispatch deadline next to the buy buttons, for example “Order within 3 hr 20 min for dispatch today,” and after the cut-off “Order now for dispatch on Monday.” It refreshes once a minute and shows no seconds. Nothing appears until you enter a cut-off time.

• Cut-off time: 24-hour format HH:MM, for example 14:00.
• Time zone: the time zone of your warehouse. Update it when daylight saving time starts or ends.
• Dispatch days: Monday to Friday, Monday to Saturday, or Every day.
• Message before the cut-off: [time] shows the time left, for example 3 hr 20 min.
• Message after the cut-off: [day] shows the next dispatch day.

Benefit icons

Up to four icon chips, two per row, each with a label and an optional second line, for example “Fits in minutes / No drilling.” Set them in the block with First icon and First text up to Fourth icon and Fourth text. The texts accept dynamic sources.

To show different benefits on each product, use the custom.benefit_icons metafield. With Use the product's benefit icons metafield on (the default), a product that has the metafield shows its own items, and other products show the block's items. When all four texts of the block are empty, the block always reads the metafield.

1. 01In your Shopify admin, go to Settings > Custom data > Products and click Add definition.
2. 02Name it “Benefit icons,” set Namespace and key to custom.benefit_icons, and choose Single line text with List of values. A multi-line text with one item per line also works.
3. 03Open each product and add one item per value, written as icon|Label|Sublabel, for example wrench|Fits in minutes|No drilling. The sublabel is optional.

Product facts

Short facts shown as chips, such as a voltage, a torque, or a size. With Use the product's facts metafield on (the default), the block shows the first four facts of the product's custom.facts metafield. Products without the metafield show the block's First text to Fourth text, which accept dynamic sources.

The same facts appear on product cards: up to three spec chips in the Axle style, and up to four spec bullets in the Ironside style.

1. 01In Settings > Custom data > Products, add a definition with Namespace and key custom.facts. Choose Single line text with List of values, or a multi-line text with one fact per line.
2. 02Open each product and add its facts, for example 18V, 135 Nm, and Brushless. Short facts fit the chips best.

Variant picker and swatches

The Style setting sets how options appear:

• Cards: each value of the first option is a card with the price of that variant and its saving, for example Bare tool, 2.0Ah kit, and 5.0Ah kit. The other options appear as pills. The Ironside preset uses it.
• Pills: every value is a button.
• Dropdown: every option is a list. The Axle preset uses it, which suits long lists such as vehicle models.
• Unavailable combinations are marked, so customers can see them at a glance.
• Options connected to a category metafield with swatches show color or image swatches. See How do I show color swatches?

Purchase options and subscriptions

The Purchase options block appears only for products with subscriptions or other purchase options, for example consumables such as filters or cleaning products. One-time purchase is listed first, followed by each option that you set up in your subscription app, each with its price. If a product can only be bought with a subscription, the one-time option is hidden.

• When an option costs less than a one-time purchase, it shows a “Save X%” badge, calculated from your real plan prices.
• Select subscription by default: product pages open on the first subscription plan. Customers can still switch to one-time purchase.
• Show subscriptions first: lists the subscription options above one-time purchase. Shopify recommends showing one-time purchase first, so turn this on only if most of your customers subscribe.
• Popular badge: a short label on the first subscription option, for example “Most popular.” Leave empty to hide it.
• Subscription benefits: one benefit per line, shown as a checklist in the subscription option. Only list benefits that your subscription really includes.

Buy buttons

• Buy buttons settings

  • Show quantity selector — the quantity field follows each variant's quantity rules: a typed quantity snaps to the nearest allowed amount.
  • Show dynamic checkout buttons — customers see their preferred payment method, such as PayPal or Apple Pay.
  • Show gift card recipient form — on gift card products, customers can send the card to someone else's email with their name and a personal message.
  • Show pickup availability — shows whether the selected variant can be picked up at your locations, with a drawer that lists each location. Set up local pickup in Settings > Shipping and delivery.
  • Delivery note — a short line under the add to cart button, for example when orders ship. Keep it accurate.
  • Show pre-order button and Pre-order note — see How do I take pre-orders?

Trust row

Three short reassurances under the buy buttons, each with an icon, a title, and a subtitle: First icon, First title, and First subtitle, and the same for the second and third. The default texts, such as Free shipping and Easy returns, are placeholders. Change them to your real terms, such as your warranty and return window, or clear a slot's title to hide it.

Back in stock request

Appears when the selected variant is sold out. Customers leave their email address, and Axle sends the customer's email and the product name to your store email, like the contact form, so you can follow up. Customize the Heading and Text.

Pop-up guide

A link that opens a pop-up, for example a fitting guide or shipping details. Set the Link label, an optional Pop-up heading (leave blank to use the link label), and the content: type it in Content, or choose a page in Content from page to reuse the same guide on many products. You can add several pop-up guides.

Size chart

A Size guide button that opens the chart in a dialog, for example for seat covers, gloves, or workwear. The chart comes from the first of these that has content: the product's custom.size_chart metafield (a page reference), the block's Page, or the block's Content.

• Option names: the button appears only on products with an option of one of these names, for example Size. Separate names with commas, or leave it empty to show the button on every product.
• Label: the button text. Heading: the dialog title. Leave Heading blank to use the page title.

Countdown block

A compact timer in the buy box, for example “Offer ends in 2 days 4 hours.” Set the Text, End date (YYYY-MM-DD), End time (HH:MM), and Time zone, and choose what happens When the timer ends: Hide or Show a message. The timer counts to the same moment for every visitor and never restarts, so use it only for a real deadline.

Sticky add to cart bar

When Show sticky add to cart bar is on, a bar with the product image, title, price, and an add to cart button slides in once the buy buttons scroll out of view, and hides again near the footer.

For products without variants, the button adds the product to the cart. For products with variants, a required subscription, or a gift card recipient form, the button scrolls back to the options, so customers always see what they are buying.

Image zoom

When Enable image zoom is on, customers can open product images in a full screen view and move between them with previous and next buttons, the arrow keys, or a swipe.

Quick view

When Show quick view button is on in Theme settings > Product cards, product cards get a quick view button. It opens the product in a dialog with its images, title, badge, SKU, stock, price, facts, variant picker, purchase options, quantity selector, buy buttons, and a link to the full product page. The add control on a card also opens quick view for products with variants, subscriptions, or gift cards.

Specifications section

The Specifications section shows a product's technical details under the product information, with a Heading (the default is Technical details). The Specification table fills the main column, and In the box, Installation, Downloads, and Compatibility blocks stack beside it on desktop and under it on phones.

On a product page it shows the product being viewed. On any other page, choose the Product in the section settings. A product without any of this data gets no section at all, so you can keep it in a template that some products don't need.

Product tabs

Product tabs shows a row of tabs under the product, with an optional Key benefits card beside them. A tab that has no content for the current product is left out, so you can connect tabs to metafields that only some products have. The preset templates have Description, Compatibility (Vehicle fitment in the Axle preset), Shipping and returns, and Warranty tabs.

• Tab (block)

  • Heading — the tab label.
  • Use the product description — shows the product description in this tab, above the content.
  • Content — connect a product metafield with the Connect dynamic source icon to show different content on each product, for example a custom.warranty metafield for a Warranty tab.
  • Content from page — shows the content of a page, for example your shipping policy.
• Compatibility list (block)

  • Lists the lines of the custom.fitment metafield of the product and its variants, grouped by the first level, such as the make.
  • Heading — the default is Compatibility.
  • Text for universal products — shown for products with a Universal line. Leave it empty to use the default text.
  • The tab is hidden on products without fitment lines. One per section.
• Benefits card (block)

  • Heading — the default is Key benefits.
  • Image — a small square image at the top of the card.
  • Row icon — the icon of the rows that come from the custom.benefit_rows metafield (Label | Value | Note per line). Products without the metafield show the Benefit row blocks instead.
• Benefit row (block)

  • Icon, Label, Value, and Note — one row of the Key benefits card.

Related, complementary, and bought together

The Related products section has three presets in Add section: Related products, Complementary products, and Bought together. Recommendation type chooses what each one shows, and all of them load as they scroll into view.

• Related products

  “You may also like”: a row of product cards from Shopify's recommendations. Settings: Heading, Subtitle, Link label, Link, Products to show (1 to 10), Columns on desktop (2 to 5), Arrow position, and Mobile layout.

• Complementary products

  With Layout set to Product cards: “Better together,” product cards next to an optional image card with an Image, a Heading, a Text, a Link label, a Link, and a Panel color scheme.

• Frequently bought together

  With Layout set to Frequently bought together: this product with up to three complementary products, each with a checkbox, the total, and one add to cart button for all of them. Sold out products and products sold only by subscription are left out. The Ironside preset uses it for batteries, chargers, and bits.

Collection page

The default collection template contains Breadcrumbs, a Compatibility finder in the Bar layout, the Collection page section, and Featured blog.

• Banner

  • Show banner — shows a banner with the collection title at the top of the page.
  • Banner style — Overlay puts a large title on the collection image (Axle). Split shows the image beside the title and the product count. Centered is a text-only header. In the Ironside style each one is a compact band.
  • Show breadcrumbs in the banner — for Centered, on templates without a Breadcrumbs section, so the trail doesn't show twice.
  • Show collection description, and Show collection image (Split and Overlay).
  • Banner color scheme — the colors of the banner.
• Subcollections

  • Show subcollection chips — a row of round image chips that link to other collections. See Subcollection chips.
  • Menu — used when no menu has the same handle as the collection. Leave blank to hide the chips there.
• Filtering and sorting

  • Enable filtering — shows filters. See Filtering and sorting.
  • Enable sorting — lets customers sort products, for example by price or best selling.
  • Filter layout — Sidebar: a card of filters beside the products (both presets). Horizontal: a row of filter buttons with dropdowns above the products. Drawer: a filter button opens the filters in a side drawer on every screen. Phones always use the drawer.
• Badges and grid

  • Show the new badge for and Best seller collection — see Product badges.
  • Products per page — from 8 to 24.
  • Pagination style — Page numbers, Load more button, or Infinite scroll. Load more and infinite scroll add the next products below the list. Page links stay in place for search engines and for visitors without JavaScript.
  • Columns on desktop — from 2 to 5. This is where the grid density toggle starts. See Toolbar and grid density.
  • Columns on mobile — 1 or 2.
  • Promo banner (block) — see Promo banners in the grid.

Finder bar on collection pages

The Compatibility finder section in the Bar layout sits above the collection as one compact row, so shoppers can pick or change their vehicle or series while they browse. When the shopper's saved selection has its own collection and they are on it, the bar says “Showing products that fit your 2023 Tesla Model Y” with Show all products and Clear links.

The bar is a section, so you can move it, restyle it, or remove it. Choose the same menu as in your other finders. See Compatibility finder.

Toolbar and grid density

One slim toolbar sits above the products. From 990 px wide, it sticks under the header while shoppers scroll. In reading order, it holds:

• A Filters button with the number of active filters. It opens the filter drawer on phones and tablets, and on every screen with the Drawer layout.
• The number of products.
• The active filters as pills that customers can remove one by one, and Clear all.
• The sort order.
• A grid density toggle: 2, 3, or 4 products per row on desktop (3, 4, or 5 when Columns on desktop is 5), and 1 or 2 on phones. It starts at the section's columns and remembers the shopper's choice in their browser.

Subcollection chips

Subcollection chips are a row of round images with labels above the products, for example Model 3 and Model Y on a Tesla collection, or Drills and Impact drivers on a Tools collection. The current collection is marked with a ring. The row scrolls sideways on small screens.

1. 01In Content > Menus, create a menu with links to the subcollections.
2. 02Give the menu the same handle as the collection. For a collection at /collections/tesla, the menu handle must be tesla. You can see and edit a menu's handle on the menu page.
3. 03Open the collection page in your store. The chips show the image of each linked collection, or the first letter of its title when it has no image.

Filtering and sorting

Filters are Shopify's storefront filters, such as availability, price, product type, vendor, and variant options. You can add more, such as metafield filters for voltage or series, in Shopify's free Search & Discovery app. The app is optional: the compatibility finder doesn't need it.

Active filters appear as pills that customers can remove one by one. Products update without a page reload, and the address bar keeps the selected filters, so filtered pages can be shared.

Promo banners in the grid

A Promo banner block places a full-width banner across the product grid, for example a trade account offer. Add up to two.

• Show after row: from 1 to 6, counted in rows of the desktop grid. Banners appear on the first page only, and they hide while filters or a different sort order are active.
• Image, Heading, Text, Button label, Button link, Second button label, and Second button link.
• Perk 1, Perk 2, and Perk 3: an Icon, a Title, and a Text each.
• Color scheme: the colors of the banner.

Search results

The search page has a large search field, pills to show All results, Products, Blog posts, or Pages, and the same filtering, sorting, badge, pagination, grid, and density settings as the collection page, with Results per page (8 to 24) instead of Products per page.

Search field placeholder sets the text in the search field. Leave it blank for “Search by product, part number or SKU.”

Part number and SKU search

When Show search suggestions is on in Theme settings > Search, the header search shows results while visitors type: suggested search terms, products, collections, pages, and blog posts. Customers can move through the results with the arrow keys.

Products appear as compact rows made for part numbers: a small image, the SKU, the title, a stock line, the price, and a Fits or Doesn't fit chip for the shopper's saved selection. Shopify's search always looks at variant SKUs and barcodes, so typing a part number finds its product, and the row shows the SKU, price, and stock of the matching variant and links straight to it.

Collections page

The page that lists all your collections (/collections). Settings: Heading (leave blank to use the default title), Text, Collections per page (8 to 24), Columns on desktop (2 to 4), Columns on mobile, Card style (Tile, Rounded square, or Circle), and Show product count. The Ironside style lists collections as compact rows.

Trust items

Trust items are short reassurances under the checkout button, for example “Secure checkout” or “Free returns within 30 days.” Each Trust item block has an Icon and a Text. The drawer and the cart page have their own blocks, because the drawer isn't shown on the cart page.

• Trust items position (cart page only): In the order summary, Under the cart items, or Under the cart, centered.
• Only promise what your store really offers, and keep the texts in step with your policies.

Free shipping progress

To turn it on, go to Theme settings > Cart, turn on Show free shipping progress, and enter your Free shipping threshold. Use the same minimum order price as your free shipping rate in Settings > Shipping and delivery. It is off when you install the theme, in both presets.

The cart drawer and the cart page then show how much more the customer needs to spend to get free shipping, with a progress bar. Once the cart reaches the threshold, a message confirms that free shipping is unlocked.

• Enter the threshold in your store currency. It is compared with the cart subtotal after discounts.
• Customers who shop in another currency see the amount converted at the current exchange rate. If you set fixed shipping rates per market, the converted amount may not match them exactly.
• The bar is hidden when the cart is empty or when nothing in the cart needs shipping.

How it works

1. 01You build a menu with the choices nested in order, for example Tesla > Model Y > 2023, and link each last item to the products for that vehicle, such as a collection.
2. 02You add fitment lines to each product, for example Tesla > Model Y > 2021-2024.
3. 03A shopper picks Tesla, then Model Y, then 2023, and presses the button. Axle saves “2023 Tesla Model Y” and opens the link of the last item they picked.
4. 04Every product with fitment lines now shows “Fits your 2023 Tesla Model Y” or “Doesn't fit,” on its page, on its card, and in search results, because Axle compares the saved names with the product's lines.

Set up the finder menu

In your Shopify admin, go to Content > Menus and click Add menu, for example “Vehicle finder.” Nest the items in the order shoppers choose: make, then model, then year or year range. Each item's title is what shoppers see and save, and the link of the last item they pick is where the button takes them. For example:

1. 01Create the menu and nest each item by dragging it under and slightly to the right of its parent. A menu can have up to three levels.
2. 02Use titles that match the parts of your fitment lines: Tesla, Model Y, 2021-2024. Capital letters, spaces, and dashes don't matter, and a year item can be one year (2023) or a range (2021-2024).
3. 03Link each last item to the products that fit it. See Result pages.
4. 04In the theme editor, select the Compatibility finder section, choose the menu in Menu, and set Number of choices to the number of levels (3 for Make, Model, Year).
5. 05Repeat for the finder bar on the collection template and for the Compatibility block on the product template.

• Tesla → /collections/tesla
• — Model Y → /collections/tesla-model-y
• — — 2021-2024 → /collections/tesla-model-y
• — — 2025+ → /collections/tesla-model-y-2025
• — Model 3 → /collections/tesla-model-3
• — — 2017-2023 → /collections/tesla-model-3
• Hyundai → /collections/hyundai
• — Ioniq 5 → /collections/hyundai-ioniq-5
• — — 2022-2026 → /collections/hyundai-ioniq-5

A one-level finder for tools

Tool and hardware stores usually need one choice, such as the battery series. The Ironside preset is set up this way:

1. 01Create a menu, for example “Battery series,” with top-level items only, such as PRO Brushless and CORE. Link each one to its collection.
2. 02In the Compatibility finder section, choose that menu, set Number of choices to 1, First choice label to Series, and Wording to Selection.
3. 03Give your tools fitment lines that end with the series, for example SH18 > 18V > PRO Brushless. A one-level selection matches any part of a line, so PRO Brushless fits that line. Batteries and chargers that work with every series can list one line per series, or use Universal.

Fitment lines: the custom.fitment metafield

Each product says what it fits in one metafield, custom.fitment, with one line per compatible vehicle or platform. Write each line from the broadest level to the narrowest, with the levels separated by >:

1. 01In your Shopify admin, go to Settings > Custom data > Products and click Add definition.
2. 02Name it “Fitment,” set Namespace and key to custom.fitment, and choose Single line text with List of values. If you want automated collections per vehicle, turn on the option to use it in smart collections.
3. 03Open each product and add one value per vehicle or platform it fits.
4. 04If some variants fit different vehicles, for example floor mats per model, also add a Fitment definition under Settings > Custom data > Variants with the same namespace, key, and type, and fill it in on those variants.

• Tesla > Model Y > 2021-2024: a year range covers every year in it. An en dash (2021–2024) works too.
• Tesla > Model 3 > 2024+: a plus means from that year on.
• Tesla > Cybertruck: a line that stops early fits every deeper choice, here every Cybertruck year.
• SH18 > 18V > PRO Brushless: a tool platform, voltage, and series.
• Universal: fits every selection, in any capitals. Before a shopper saves a selection, the product page says “Universal fit.”

Result pages

The button opens the link of the deepest item the shopper picked. Pick whichever suits your catalog:

• A collection per vehicle

  An automated collection with a condition such as Product tag is equal to fits-tesla-model-y, or a product metafield condition on Fitment once the definition can be used in smart collections. Several year items can link to the same model collection, as in the Arcway Auto demo.

• A manual collection

  For a small catalog, add the products that fit to a collection by hand.

• A tag link

  Link to all products filtered by a tag, without creating a collection, for example /collections/all/fits-tesla-model-y.

Finder settings

• Compatibility finder settings

  • Layout — Panel: the heading and text beside the choices, for the home page and landing pages. Bar: one compact row for the top of a collection page.
  • Eyebrow, Heading, and Text — the intro. The Bar layout shows a smaller heading and no text.
  • Button label — the button that opens the results, for example Show products or Show tools.
  • Options come from — Menu (the default, no app needed) or Storefront filters. See Storefront filters option.
  • Menu — the finder menu. Nest the items in the order shoppers choose, and link each last item to the products that fit.
  • Collection — used with Storefront filters. Leave blank to use the collection being viewed, or all products.
  • Number of choices — 1 to 3. The menu needs as many nested levels.
  • First choice label, Second choice label, and Third choice label — for example Make, Model, and Year, or Series.
  • Wording — Vehicle (“Your vehicle,” “Change vehicle”) suits cars and bikes. Selection (“Your selection,” “Change selection”) suits tools, batteries, and machines.
  • Show matching products — as soon as the last choice is made, shows how many products the result holds, for example “12 products for your 2023 Tesla Model Y,” and the first three, before shoppers leave the page.
  • Color scheme, Top padding, and Bottom padding.

Storefront filters option

Instead of a menu, the finder can read its choices from a storefront filter on the custom.fitment metafield. This option is for stores that already manage filters in Shopify's free Search & Discovery app. Most stores should use the menu.

1. 01In the Search & Discovery app, add a filter on the product metafield Fitment (custom.fitment), and set it to match any of the selected values.
2. 02In the Compatibility finder section, set Options come from to Storefront filters, and choose the Collection to search, or leave it blank to use the collection being viewed or all products.

• Each filter value is one fitment line. The finder splits them into choices (year ranges become single years) and opens the collection filtered on every line that fits, including Universal lines.
• Shopify's limits apply: filters work on collections with up to 5,000 products, and a filter shows at most 100 values.

Where shoppers see it

• Finders

  Every finder shows “Your vehicle: 2023 Tesla Model Y” with Shop products that fit, Change vehicle, and Clear. On the selection's own result page, the finder says “Showing products that fit your 2023 Tesla Model Y” with Show all products.

• Product pages

  The Compatibility block shows Fits, May fit, or Doesn't fit, with a Change vehicle button. See Compatibility block.

• Product cards

  A small Fits or Doesn't fit chip on the card image. It stays hidden until there is a clear answer, so it never shifts the card, and products without fitment lines never show it.

• Search results

  The same chip in each product row of the search suggestions. See Part number and SKU search.

Good to know

• The badges always compare the saved names with the product's custom.fitment lines, whether the finder reads a menu or storefront filters.
• When the saved choice is a year range, such as 2021-2024, a product that fits only some of those years shows May fit on its page and no chip on cards, so Axle never claims a fit it can't prove.
• Shoppers clear their choice with Clear in any finder. Clearing their browser data removes it too.
• If a browser blocks storage, the choice lasts until the shopper leaves the page.

Example: one product, filled in

• Fitment: Tesla > Model Y > 2021-2024 and Tesla > Model 3 > 2024+.
• Specs: Material | TPE, Coverage | Front and rear, Edge height | 38 mm.
• In the box: Front mats | 2, Rear mat | 1.
• Install difficulty: 1. Install time: 10. Install tools: none needed, so leave it empty.
• Facts: All-weather, Laser-measured, 38 mm edge.

Connect a metafield to a setting

Settings with the Connect dynamic source icon can show a metafield instead of fixed text, for example a Product tabs tab or the texts of the Benefit icons and Product facts blocks.

1. 01In the theme editor, open the product template and select the block, for example a Tab in Product tabs.
2. 02Click the Connect dynamic source icon next to the setting, such as Content, and choose the metafield.
3. 03Preview a few products. Products with an empty metafield show nothing there, and an empty tab is left out.

Apps

Axle needs no apps. These optional apps work with it:

• Search & Discovery

  Shopify's free app for extra collection filters, the Storefront filters option of the finder, and the products of the Complementary products and Frequently bought together sections. Optional.

• Reviews

  Review apps that fill in the product rating metafields show stars across the theme. Add the app's own block for the review list.

• Subscriptions

  Subscription apps that use Shopify selling plans appear in the Purchase options block. See Purchase options and subscriptions.

• Translate & Adapt

  Translates your own content into more languages. See Translations and RTL.

• App blocks

  Apps can add blocks to Product information, Featured product, Image with text, FAQ, Custom section, Group blocks, the Cart section, and the Footer.

How shoppers compare products

1. 01Shoppers select Compare on a product card, or with the Compare button block on a product page.
2. 02A compare bar slides up at the bottom of the screen with one slot per product. Shoppers can remove products, clear the list, or minimize the bar.
3. 03With at least two products, Compare opens the comparison table. Highlight differences marks the rows where the products differ. Products without variants can be added to the cart from the table, and the others link to their product page.

Turn comparison on or off

• Compare bar, in the Overlays group: Enable product comparison must be on. Without it, no Compare control or button appears anywhere.
• Theme settings > Product cards > Show compare on cards: adds the control to product cards. Compare control chooses Icon on the image (touch screens show a checkbox, since they have no hover) or Checkbox under the price.
• Compare button block: adds the button to the product page. It is in both preset product templates.

• Compare bar settings

  • Enable product comparison — turns comparison on for the whole store.
  • Maximum products — 2, 3, or 4 products.
  • Position on desktop — Left, Center, or Right.
  • Heading — the title of the comparison table.
  • Rows — Show price, Show availability, Show rating (when a reviews app provides one), Show vendor, Show product type, Show options, Show specification rows, and Show short description.
  • Color scheme — the colors of the bar and the table.

Specification rows

Specification rows come from one product metafield, named in Theme settings > Product cards > Specification metafield as namespace.key. The default is custom.specs, the same metafield as the Specification table, so you fill in your specs once.

• Use a list of single line texts (or a multi-line text with one row per line), each row written as Label | Value | Note.
• Rows with the same label line up across products. A product without that row shows a dash. Use the same labels on every product, for example always Torque, never Max torque on some.

Quick order list

A table of every variant of a product, each with its image, options, SKU, price, stock, and a quantity field, so buyers can order many variants at once, such as a bare tool, two battery kits, and spare blades. The cart updates as they type, and the list shows the cart count and subtotal for the product, with Remove all and View cart.

Add it as the Quick order list block of Product information, or as the Quick order list section on the home page, product, and page templates. On the home page or a page template, choose the Product in the section; on a product template, leave it empty to use that product. Settings: Show variant images, Show SKU, Show availability, and Low stock threshold. The section also has a Heading and Text.

Volume pricing and quantity rules

If you sell to businesses with Shopify B2B catalogs, you can set quantity rules (a minimum, a maximum, and increments) and volume pricing for each variant in your Shopify admin. The Volume pricing block shows the rules, for example “Minimum of 6 · Increments of 6,” and a table of the price per quantity break, with the break that applies highlighted.

Customers without a B2B catalog see nothing in this block. The quantity field always follows the rules: on the product page, in quick view, in the cart, and in the quick order list.

Landing page sections

You can also add these sections to other templates.

• Listicle

  • Eyebrow, Heading, Heading level (H1 or H2), and Text.
  • Layout — Alternating rows, where image and text swap sides, or Stacked cards.
  • Image ratio — Adapt to media, Landscape, Square, or Portrait.
  • Number style — Outline (Axle), Filled (Ironside), Tile, or Circle.
  • Show sticky bar on phones — a bar at the bottom of the screen with the Product, its price, and a button while visitors scroll through the list. Bar text shows when no product is selected. Set the Button label, the Button link (leave blank to link to the product), and the bar's Color scheme.
  • Reason (block) — an Image, a Heading, a Text, and an optional Button label and Button link. Each reason is numbered by its position. Add up to 12.
• Founder letter

  • Portrait and Portrait shape — Rounded, Cut corner, or Circle.
  • Eyebrow, Heading (leave blank to use the page title), Heading level, and Text. Short paragraphs read best on phones.
  • Show a drop cap — enlarges the first letter of the letter.
  • Signature image — a scan of a handwritten signature on a transparent background works best. Without one, the Name shows in the accent font.
  • Name and Role line — the sign-off.
  • Timeline — a Heading, and Milestone blocks with a Year, a Title, and a Text.
  • Values — a Heading, and Value blocks with an Icon, a Title, and a Text.
  • Color scheme and Panel color scheme — the colors of the section and of the letter.
• Advertorial header

  • Show disclosure label — on by default. Tells readers that the article is advertising. Advertising rules in many countries require this label, so keep it on.
  • Disclosure label — Advertorial or Sponsored.
  • Eyebrow, Heading (leave blank to use the page title), Heading level, and Subtitle.
  • Author, Author photo, and Date line — for example the publication date or the reading time.
  • Image, Image ratio (Adapt to media, Landscape, or Wide), and Caption.
• Advertorial article

  • Show a drop cap — enlarges the first letter when the article starts with a paragraph.
  • Heading level — H2 or H3, for subheadings and the offer box. Use H2 after an Advertorial header with an H1.
  • Blocks, in any order (up to 50) — Paragraph, Subheading, Image (Column width or Wide, with a Caption), Pull quote, Product callout, Checklist, Offer box, Testimonial, and Custom Liquid.
  • Product callout — a product with an Eyebrow, a Title (leave blank to use the product title), a Text, and a Button label.
  • Offer box — a Heading, a Text, an optional Product, a button, a Guarantee line, and a Color scheme. Only mention discounts and terms that apply at checkout, and only describe a guarantee you really offer.
  • Testimonial — a Quote, an Author, a Role line, and an Author photo. Use the real words of a customer, shared with their permission.
• Comparison tableThe defaults don't name another brand. Only claim what you can back up, describe other products fairly, and check the rules that apply to you before you name a competitor.

  • Eyebrow, Heading, Heading level, and Text.
  • Table style — Checklist: check marks and crosses. Spec sheet: values in the accent font at the start of each cell, with alternating rows, like a fitment guide (both presets).
  • Your column heading, Your column logo, and Highlight label — a short label above your column, such as “Best choice.”
  • Comparison column heading, Show a second comparison column, and Second comparison column heading.
  • Footnote — explain what you compared and the conditions behind any numbers. Last checked — for example the month and year. Update it whenever you check the comparison again.
  • Call to action — an Image, a Text, a Button label, and a Button link.
  • Row (block) — a Feature, an optional Note (for example a unit or a test condition), and for each column a Value: Check mark, Cross, or Text. Row group (block) — starts a new group of rows under a label, such as Fit, Performance, or Warranty. Add up to 16 blocks.
  • On phones every column stays visible. With two comparison columns, the table scrolls sideways and the feature column stays in place.

Contact page and contact form

To create a contact page, go to Online Store > Pages, add a page, and choose contact as its Theme template. The contact template shows your page content followed by a Contact form section. You can also add the Contact form section to other templates, for example a trade account application page.

The section has an Eyebrow, a Heading, a Text, an Alignment (Left or Center), and a Panel color scheme. Messages are sent to your store email. Build the form from these blocks (up to 20):

• Text field

  A single-line field. Autofill helps browsers fill in a Name or Company.

• Email field

  The first email field is sent as the customer's email address, so it is always required. If the form has no email field, one is added automatically.

• Phone field

  A phone number field.

• Multi-line text field

  The first multi-line text field is sent as the message.

• Dropdown

  A list of choices, such as Order question or Wholesale. Add one option per line in Options.

• Checkbox

  Leave Options blank for a single checkbox, for example a consent. Add one option per line to show a group of checkboxes. Required applies to single checkboxes only.

• Heading

  A heading that groups the fields below it.

• Paragraph

  A short instruction or note between fields.

• Contact detail

  An Icon, a Title, and a Text, such as your support email, phone, or opening hours. Contact details appear on a panel beside the form, in the Panel color scheme.