Release notes
What changed in each version of Techno. To update, see Installing Techno › Updating Techno.
1.0.0
Release date: to be announced with the Theme Store listing.
Initial release.
Design
- Three presets, each with its own Theme Store listing: Techno, for a consumer tech store; Flagship, for one main product and its accessories, on the Monolith palette with IBM Plex Mono, a narrow page and a home page of Featured product, Schematic, Image with text and FAQ; and Datasheet, for a large parts catalog, on Blueprint with the grid overlay, IBM Plex Sans Condensed, a wide page, three featured collections, 36-product collection pages, and the spec table directly under the price with a Quick order list. See Presets
- Four color palettes (Techno, Dreamy, Blueprint and Monolith) with ten individually overridable colors, in every preset
- "Color palette" is the first setting in Theme settings › Colors, so "Theme style" appears once in Theme settings, as Shopify's list of presets, instead of twice
- A color that follows the palette shows "From palette" in Theme settings › Colors instead of a Techno swatch, and a changed color can be cleared to follow the palette again. A color whose hex value is deleted, which the editor saves as "Transparent", follows the palette instead of making that part of the page transparent
- Any color you set overrides the palette, including one of the Techno palette's own values, so a Techno color can be kept on another palette
- System monospace font by default, with any font from Shopify's library available
- Optional scanline overlay, grid overlay, boot sequence and blinking hero cursor, all respecting reduced motion
- A compact phone header and hero: a short shop name or a logo shares one row with the buttons, the status strip stays on one line, and at the default text size up to three stats sit in one row, so the featured product shows on the first screen
- "Logo width" is hidden in theme settings while "Use a custom logo" is off
- Sticky header: Header › "Sticky header" keeps the header and its status strip at the top of the screen (Always, the default), hides it while shoppers scroll down and brings it back when they scroll up (On scroll up), or lets it scroll away (None). Pagination, the skip link and keyboard focus land below the stuck header, and a dropdown taller than the screen scrolls inside itself
- A header status strip with nothing to show, such as one whose only block is the Free dispatch note while it's hidden ("Free dispatch over" is 0, or the shopper is in another currency) or a Status text with both "Label" and "Value" empty, no longer shows an empty band with an extra rule under the bar. An empty Status text also no longer takes a place in the strip and pushes the other readouts along
- Mega menu: Header › "Menu style" › Mega menu (the default) opens a top-level link whose child links have links of their own as a full-width panel of columns, with an "All …" link to the top-level page. Panels open on click, tap and keyboard, and on hover for mouse users (Header › "Open menus on hover"), close when keyboard focus leaves them or on Escape, and scroll inside themselves when long. Escape closes a panel opened by hover without moving keyboard focus, and if focus is inside one panel when the pointer opens another, it moves to the first panel's item instead of dropping to the page. The mobile menu shows the same tree, with "All …" links and nested groups. Dropdown style keeps the single-column dropdown
- Menu promos: Header › Add block › "Menu promo" adds up to two image-and-heading tiles to the end of a top-level link's mega menu, and to its group in the mobile menu. Each tile is one link, and its image loads only when the menu opens. A promo that can't show, such as a third one for the same link, shows a note in the theme editor so you can still select it
- Announcement bar: a Header group section with up to four announcements, each with an optional link, and a countdown to a real date and time you set, in your store's time zone or a fixed one. The countdown ends at the same moment for every shopper, hides or shows your message once the deadline passes, can be paused, and shows the deadline as text without JavaScript. On a narrow screen the bar stays on one line without zooming the page out: shoppers swipe it sideways, and each link scrolls fully into view as the keyboard reaches it
- Breadcrumbs: product, collection, search, page, contact and blog pages show a one-line trail such as HOME / AUDIO / EARSHOT 05, each with its own "Show breadcrumbs" setting, and the article's Breadcrumb block shows HOME / blog / article. The trail always matches the page's breadcrumb structured data, now on collection, page, blog and search pages too. Products opened from a collection page link through that collection, so their trail names it, except in the all-products collection and on Shopify's vendor and product type pages, whose products link to their plain address. A long product title is shortened with "…" and never squeezes out the collection's name
- Back-to-top button: Theme settings › Navigation › "Show back-to-top button" adds a small "↑ TOP" button in a bottom corner once shoppers scroll down one screen. It scrolls to the top and moves keyboard focus to the main content. "Position" puts it bottom left (the default, away from most chat buttons) or bottom right
- On phones that report a bottom safe area, such as Android with gesture navigation, back-to-top sits 16px above the sticky add-to-cart and compare bars instead of higher by the safe area's height, and at the end of the page it stays clear of the footer's last line
- Button and link icons keep their full size beside long labels, including translated ones, on narrow phones
- On iPhones and iPads, tapping a text field, a select or a cart quantity no longer zooms the page: on touch screens their text is never smaller than 16px, at any base text size, and the cart's quantity field fits three digits
Pages and sections
- Home page sections: Hero with stats and a featured unit panel, Featured collection, Featured product, Kits, Image with text, Rich text, Newsletter and Custom Liquid
- The default home page names no products or collections from the demo store: Featured collection shows your own products from /collections/all, and the Kits show example cards until you choose their products
- Kits without a product each show a different sample drawing instead of the same one in every panel, and a newly added Kits section labels its kits Tier 01, Tier 02 and Tier 03 instead of Tier 01 three times
- A kit whose product has no image shows a sample drawing where the image goes, so its title and price line up with the kits beside it instead of sitting higher
- Page template with a facts panel, contact page with side panels, blog with tag filters and a featured entry, and articles built from blocks, with comments
- Styled 404, password and gift card pages
- FAQ section: questions that open to show their answers, under an optional eyebrow, heading and intro, for the home page, pages, product pages and any other template. Questions work without JavaScript, and their answers can come from product metafields. Collapsible rows, here and in other sections, have an "Open by default" setting
- Icon row section: up to six tiles, each with one of 16 theme icons, a title, a line of text and an optional link, for service terms such as shipping, returns and warranty. It works on any template and above the footer, and shows only the words you enter
- Logo list section: up to 12 press, retailer or partner logos in tiles, each named for screen readers and with an optional link and quote, on any template and above the footer. Logos can keep their colors or turn one grey that suits the palette, and phones show them in two columns or one row to swipe. Nothing moves by itself
- Schematic section: an image, never cropped, with up to 20 numbered hotspots on the parts it shows. On a computer each opens a small panel with the part's name, a short spec, which can come from a product metafield, and for a linked product its live price and stock and a link to it. On phones the numbers stay on the image and the callouts are listed under it. Hotspots are buttons shoppers can reach by keyboard and screen readers name, stay on their point at every screen width, and need no JavaScript
- Slideshow section: up to six slides, each an image beside an eyebrow, heading, text and button, on the home page, pages and collection pages. Shoppers move between slides with Previous and Next, a swipe or a trackpad, and screen readers hear which slide they're on. Slides rotate only if you turn it on, with a pause button, and never for visitors who prefer reduced motion. Rotation stops once a shopper presses Previous or Next, tabs into the slideshow, uses a link in it or swipes it. On phones the panel label gets a line of its own above the controls, and the slide counter reads "01 / 03" in right-to-left languages too. In the theme editor, selecting a slide shows it. Leading the page, the first image loads with high priority and the page doesn't shift as the controls appear
- Blog posts section: a blog's newest articles, or up to 12 you pick, as cards like the Blog page's featured entry, with a link to the blog. It works on the home page, pages, product pages and any other template, and on an article page it never lists the article being read. One or two cards sit at the start of the row, at most 460 px wide, instead of stretching across the page
- Merchants can generate blocks in the theme editor in the Product, Featured product, Article, Rich text and Footer sections, and a block generated in a new section gets Techno's Rich text spacing. Each section's Add block menu offers only the blocks that work there, plus the general blocks: Eyebrow, Heading, Text, Button, Collapsible row and Custom Liquid. General blocks keep their own size in a footer column, generated blocks and Collapsible rows fill Rich text's column, and a Custom Liquid block with no output leaves no empty box on the page
- Titles and names show exactly as you typed them, including ones with angle brackets or an ampersand such as
Adapter <USB-C> & more: in page, collection, blog and product headings, product cards, menus, the cart, search results, filters, product options and the gift card page. Text in angle brackets used to disappear. The browser tab and link previews show the page title Shopify provides, which leaves out text in angle brackets, and now show an ampersand in it as & instead of& - A collection's banner image loads at once, with high priority, only when the Collection section is the first section on the page. With any section above it, such as a Slideshow or an Image with text, the banner loads as the shopper scrolls, with normal priority, so the images at the top of the page load first
Shopping
- Product page built from blocks: metadata, price with tax note, stock label with low stock threshold, variant picker with swatches, buy buttons, spec table, collapsible rows and pickup availability
- Quick order list: a product template section that lists every variant with its price, stock, in-cart count and a quantity stepper, and adds every row with a quantity in one step, across pages. Rows follow B2B quantity rules and volume pricing. It isn't shown for a product that can only be bought with a purchase option, such as a subscription. A sold-out variant's row is dimmed and can't be changed. When the cart takes only part of an add, the rows that went in are cleared, so pressing Add again can't add them twice, and the cart drawer shows what went in. The list doesn't know about pre-orders: a pre-order variant reads "In stock" and is added without the "Pre-order" property, so don't add the list to a product template you use for pre-orders
- B2B quantity rules and volume pricing: for a buyer whose B2B catalog sets them, the buy box, Featured product and the cart follow each variant's minimum, maximum and increment, show "Minimum 10 · Multiples of 5 · Maximum 100 · 3 in cart" and a volume pricing table, and refuse a quantity the rule doesn't allow before sending it, counting what's already in the cart. Kits add the kit product's minimum and show its rule. Everyone else sees no change. See B2B
- Back-in-stock request: a product page block that shows "Notify me when available" under a sold-out variant. The shopper's request reaches you as a contact email naming the product, variant, SKU and link (the product alone when it has only one variant), and follows the variant picker. Nothing is sent to shoppers automatically, and nobody is subscribed to your newsletter
- Pre-orders: the Product and Featured product sections can show variants that keep selling at zero stock, or products sold only through a pre-order app's purchase option, as "Pre-order", on the button, the stock line and for screen readers, with your "Ships in March" note under the button and on the cart line. Both are off until you turn them on, and can follow a product metafield. Switching to a pre-order variant, Add to cart waits until the page has updated, so a pre-order is never added without its "Pre-order" property. Purchase options that charge part of the price later show "$20.00 due today · $80.00 later"
- Sticky add-to-cart bar: once the add-to-cart button scrolls out of view on a product page, a slim bar at the bottom of the screen shows the product, the selected variant, its price and an Add to cart button that adds exactly what the buy box would, and says "Sold out" or "Unavailable" when the buy box does. It hides while the footer is on screen, unless its button has focus from the keyboard, a tap or a screen reader, and then the end of the page makes room so the footer's last line can still be scrolled clear of it. The back-to-top button moves above it. Buy buttons › "Show sticky add-to-cart bar", on by default, turns it off
- Image zoom: each gallery image has a zoom button that opens it full screen, where shoppers zoom in 2.5 times with a click or tap, pinch up to 4 times, pan, and step through the product's images with buttons, arrow keys or a swipe. Once an image is zoomed, the arrow keys pan it. On phones, swiping the gallery shows the next or previous media item, and a narrow strip beside each video and 3D model lets a swipe pass it. Product and Featured product › "Enable image zoom", on by default, turns the zoom buttons and full-screen view off
- Quick view: Theme settings › Product cards › "Show quick view button" adds a "Quick view" button to every product card. It opens the product's full gallery, including video and 3D models, its price, stock, options and buy box in a panel over the page, without changing the address. On phones its gallery can be swiped, on every page. Adding to cart from it opens the cart drawer. Off by default
- Quick add: Theme settings › Product cards › "Show quick add button" gives single-variant products an "Add to cart" button on their card, which opens the cart drawer, and products with options, a required subscription or a gift card recipient a "Choose options" button that opens quick view. It adds a B2B buyer's minimum, and works without JavaScript. Off by default
- Swatches on product cards: Theme settings › Product cards › "Show swatches" shows a product's color or pattern swatches under its card, up to a number you choose and then "+2", which reads the same in right-to-left languages. The swatch of the variant the card shows is always among them. Choosing one switches the card's image, link, SKU and stock label to that variant, and quick view opens on it. Off by default
- Second image on hover: Theme settings › Product cards › "Show second image on hover" shows a product's second image while a shopper points at its card with a mouse or tabs to its title. It's downloaded only the first time it's shown, and phones never load it. Off by default
- Subscriptions, gift card recipient form, 3D models with augmented reality, and accelerated checkout
- A 3D model fills the product gallery at the same 4:3 size as a video, on phones is capped at the same height as the gallery's images and videos, and from 600px up fills the gallery's minimum height instead of sitting at its top, as a video now does too. Its space is held from the first paint, so a product whose first media is a 3D model doesn't shift as the model loads. It used to show as a thin strip 150 px tall
- A YouTube or Vimeo video in the product gallery takes the same height as an uploaded video or a 3D model, so picking it no longer moves the price and Add to cart down by about 7 px
- On phones and tablets that support augmented reality, "View in your space" is a cube button in the 3D model's bottom corner, bottom left in right-to-left languages, instead of a full-width button below the model. Picking the model no longer moves the price and Add to cart further down the page than an image or a video does, and nothing on the page shifts when the button appears
- Product pages and quick views with a 3D model no longer download Shopify's 3D viewer control bar, a 36 KB script (about 12 KB compressed) the theme never used, and product pages with one no longer load Shopify's
shopify_common.js, which did nothing for them. The model rotates, zooms and responds to the keyboard as before - Related and complementary product recommendations
- Product recommendation cards, the cart drawer's lines after the first add to an empty cart, product cards that a filter change brings onto a collection or search page that loaded with no results, a variant's quantity rule or volume pricing, another product of a combined listing, and the Quick order list's pages keep their styling on stores where Shopify sends each page only the CSS it renders
- Product recommendations now load once the product page has finished loading, so on most visits they're in place before shoppers reach them, and a jump straight to the bottom of the page no longer leaves the row unloaded (with the browser's data saver on, the row still loads only as the shopper scrolls toward it). A shopper who reaches the footer before the row arrives still sees it appear above the footer
- Collection and search filtering and sorting that update without a page reload
- The variant picker keeps the shopper's latest choice, including a combination that isn't sold, when the update for an earlier choice arrives late
- Combined listings (Shopify Plus): picking a value that belongs to another product of a listing loads that product in place, on the product page (with its own address, title and Back button), in Featured product and in quick view, announced to screen readers. Without JavaScript the listing's products are links
- Products with more than 250 variants: shoppers can choose and add every variant, including those past the first 250, which the page asks your store for when they're picked. Without JavaScript, the buy box's dropdown lists the first 250 variants and the one the page opened on
- Product pages carry a much smaller list of variant details, only what the variant picker uses. Custom code that read other fields from the picker's list should read them from Liquid instead (see JavaScript components)
- The product page's address names a variant only once the page shows it, so a variant update that fails or is overtaken by a newer choice no longer leaves a link or reload that opens a different variant from the one on screen
- A Featured product section that shows the same product as the product page it's on no longer changes the page's address when a shopper picks an option in it, so a reload or a shared link opens the variant chosen in the main product section
- A variant change that can't be loaded turns the buy buttons off and asks the shopper to refresh the page, instead of leaving Add to cart live beside the previous variant's price and stock. Screen readers hear the message too
- The value shown beside each option name, such as "Length 3m", changes as soon as the shopper picks, including when the variant can't be loaded or the combination isn't sold, instead of naming the previous value. Screen readers hear the same name for the option
- The spec table's option rows change with it, so they no longer name the previous value beside an option name showing the new one
- Product comparison: Theme settings › Product cards › "Show compare checkbox" puts a "Compare" checkbox on every product card. Shoppers tick up to three products, a bar at the bottom of the screen lists them, and "Compare now" opens a comparison page that lays them side by side, with price, availability and the Spec table rows you choose, marks every row where they differ, can show only the differences, and scrolls sideways on phones, with row labels that wrap in their own column. A product whose variants cost different amounts shows "From" its lowest price. Screen readers hear when a product is no longer available or the comparison can't be loaded, and product grids don't shift while the Compare checkboxes load. The selection stays in the shopper's browser, and nothing is stored until they tick a box. The compare bar sits above the sticky add-to-cart bar and moves the back-to-top button up. Off by default; needs a page with the
page.comparetemplate. See Product comparison - Spec rows: add Spec row blocks to the product page's Spec table to show product metafields, such as battery life, capacity or connectivity, each with your own label and an optional unit. Lists of text, measurements, dates and true-or-false values are formatted in your store's language, category metafields such as Color show their labels, and a product without a value shows no row. Files, JSON, URLs and other kinds of lists aren't shown. In the theme editor, a hidden row says why, naming the metafield key it looked for. "Spec row position" puts them above or below the built-in rows
- When an add to cart can't finish in the background and falls back to a normal form post, it posts what the shopper added, including gift card recipient details and any file chosen in an app's upload field, even if they chose another option while the add was on its way, instead of the newly chosen variant or no variant at all
- When the gift card recipient details can't be accepted, the message under Add to cart lists each problem in the order of the fields, such as "Email is invalid.", instead of Shopify's summary that repeated each field's name
- When a shopper comes back to a product with the browser's Back button and the browser puts back the option they had chosen, the price, stock and Add to cart follow that option and add it, instead of adding the variant the page first showed. The gift card recipient checkbox follows too, and so does the variant dropdown shown when the theme's script can't load
- A subscription plan the shopper chose stays selected and is added to the cart when they pick another variant or come back with the browser's Back button, instead of switching to "One-time purchase". If the new variant isn't sold with that plan, a message under Add to cart says so
- Subscription plans the selected variant isn't sold with can't be chosen and are marked "Not available for this variant", instead of being selectable and added to the cart. On a subscription-only product, the plan selected by default is the first one the variant is sold with, and a variant no plan covers shows Add to cart as "Unavailable" ("Sold out" when it's out of stock), with no stock line or pickup availability, including when the shopper switches to it; the shopper's plan comes back on the next variant sold with it
- Predictive search panel, which closes if suggestions can't be loaded instead of showing an earlier term's suggestions under what the shopper typed
- Cart drawer and cart page with order notes and free dispatch messages
- The header's Free dispatch note is hidden whenever the product page and cart messages are: while "Free dispatch over" is 0 or blank, and for shoppers browsing in another currency. A blank amount could make the header alone read "Free dispatch over $0"
- On the cart page on narrow phones, each line's quantity control and price stay inside the line at any "Page margin". Under 480 px wide the lines use the cart drawer's smaller image, and under 360 px the quantity control, price and "Remove" take a row of their own under the image. With a margin of 34 px or more, the − and + control used to run past the line's edge on a 320 px screen
- A long discount name or code on a cart line, such as
WELCOMEBACKSUMMER2026VIPONLY, wraps inside the line on phones, in the cart drawer and on the cart page, instead of running past its edge - A long order-level discount name or code in the cart summary wraps inside the summary on phones, in the cart drawer and on the cart page, instead of running past its edge and making the page scroll sideways. When a discount name and its amount don't fit side by side, in the summary or on a cart line, the amount moves under the name in one piece instead of splitting after its minus sign. An amount wider than the whole line, such as −$1,234.56 USD on a 320 px phone with the largest "Page margin", still wraps inside it. In right-to-left languages the minus sign stays in front of the amount, as in −$10.00 and (−$10.00), instead of after it
- When a shopper raises a cart line past your stock and Shopify adds only what's available, the line, the totals and the header count show what the cart now holds, with Shopify's message, instead of going back to the old quantity
- Two quick presses of + or − on a cart line, in the cart drawer or on the cart page, end at the quantity the shopper asked for. When the two changes crossed on their way to Shopify, the cart could keep the first one and end one short; the theme now sends the last quantity again, once, without a second announcement
- A quick double − that removes a cart line leaves the other lines as they were. When the removal reached Shopify first, the first press could change the next product's quantity instead, without a message; each change now names its line rather than its position in the cart
- A cart line removed somewhere else, such as in another tab, then changed on this page says "This item is no longer in your cart." in the store's language, instead of Shopify's "no valid id or line parameter". If it was the only product in the cart, the cart simply shows as empty
- After a quick double − empties a one-line cart, the header's cart count reads 0 like the rest of the page, instead of sometimes staying at 1 until the next cart change or page load
- After a quick double − empties a one-line cart, the last
shopify:cart:lines-updateevent to settle carries the empty cart the page shows, so an app that follows cart changes, such as an upsell or a free shipping bar, no longer believes one item is left. The "in cart" count beside a Quick order list row or a quantity rule no longer says 1 in cart either - A quantity typed in the cart drawer or on the cart page while the cart refreshes from another change keeps its digits in the order typed. The refresh used to put the next digit in front, so typing 12 could send 21
- In Safari, on a Mac, iPhone or iPad, a quantity typed in the cart drawer or on the cart page while the cart refreshes from another change is sent when the shopper leaves the field. If the shopper had finished typing before the refresh, the page kept showing the new number while the cart, its totals and the express checkout buttons kept the old one. A number a B2B quantity rule doesn't allow is still put back with a message, and leaving the field without changing the number sends nothing
- In Safari, on a Mac, iPhone or iPad, an order note typed while the cart refreshes from another change is saved when the shopper leaves the field, like any other note. It used to be saved only if the shopper typed more after the refresh, and was otherwise lost when they left the page, though the cart page still showed it
- The order note is saved when the shopper leaves the field even while the page's other background requests, such as Shopify's analytics, are using the browser's allowance for requests that may outlive the page. The save used to be refused at once then: the note stayed in the field and Checkout still sent it, but it wasn't in the cart, so express checkout buttons left it out and coming back to the cart page showed it empty
- In Safari, on a Mac, iPhone or iPad, a shopper who leaves the page by clicking a link, or on a Mac by typing an address, while the cart, the filters, a Quick order list's next page or a quick view is still loading lands on the page they chose. A quantity typed in the cart and sent by that click is still saved. The page used to go to the cart page, the filtered collection, the list's next page or the product page instead, and an Add to cart followed by a quick click elsewhere could add the product twice. After a click on a link that downloads a file, the filters ask again and apply
- In Chrome, Edge and other Chromium browsers, quick presses of + on a cart line followed by a click on a link keep the last quantity, even when the shopper clicks the page again before the next page opens. The cart could end one press behind
- After a quantity typed in the cart drawer or on the cart page is sent by tapping Done on a phone's keyboard or by clicking outside the cart, keyboard focus stays where the shopper left it. It used to move to the first line's quantity field or the drawer's Close button, where an arrow key could change that line's quantity and the next Tab send it, even removing the line
- When the cart line whose quantity a shopper is typing is removed somewhere else, such as in another tab, while the cart refreshes from another change, keyboard focus moves to the first product's name on the cart page instead of another line's quantity field, where the next digits typed changed that line's quantity. In the cart drawer it moves to the Close button, as before
- In Chrome, Edge and other Chromium browsers, a quantity still being typed in the cart drawer or on the cart page when the cart refreshes from another change is sent once, when the shopper leaves the field. The digits typed so far used to be sent at the refresh, so typing 25 briefly set the line to 2, and a B2B quantity rule could refuse the partial number while the shopper was still typing
- Coming back to the cart page with the browser's Back or Forward button shows each line's quantity and the order note as the cart holds them. A number or note the shopper had typed but not yet sent before leaving used to come back in its field, so the next + stepped from the number and Checkout used both, while the cart page still priced the old quantity and the cart drawer showed the saved note. A Quick order list's quantities also start at 0 after Back or Forward, instead of showing numbers the list hadn't counted with Add still turned off
- On iPhone and iPad, coming back to the cart page with Back or Forward shows the cart as it is now, so Checkout uses the current quantities. Safari kept the page as the shopper had left it, so after adding a product on its page and going back, the cart page still showed the old quantities and total, and Checkout set the cart back to them, undoing the add. Other pages reopened this way now show the current header count and cart drawer too
- The cart drawer keeps its scroll position when its lines update, after + or − on a line further down, a typed quantity, or a page reopened with Back that brings the drawer up to date. The list used to jump back to the top, and the line just changed could end up out of view
- Scrolling over the cart drawer's totals and checkout button, or past the end of its lines, moves only the lines. With a long cart, the whole drawer used to scroll up, taking its title and Close button off the screen and showing the page beneath it
- Coming back to a collection or search page with the browser's Back button shows the filters its results use. A filter ticked just before the shopper clicked a product could come back ticked over results it never applied, and the next filter change applied it too
- After the browser's Back or Forward button, the sticky add-to-cart bar shows the quantity the buy box holds, such as "Qty 3". In Chrome, Edge and other Chromium browsers it used to hide it while its Add still added that quantity
- When a shopper presses + past your stock, Shopify's message, such as "Only 4 items were added to your cart due to availability.", stays at the top of the cart lines until their next change. It could disappear when the answer to an earlier press arrived after it, leaving no reason the line had stopped. A B2B quantity rule's message stays in the same way
- When an app changes the cart with Shopify's storefront actions, keyboard focus stays on the cart control the shopper was on, such as a line's − or +, Remove, a product title or Checkout, instead of moving to the drawer's Close button or the first quantity field
- Shopify's standard storefront events: page, product, collection and cart views, variant choices, cart changes and notes, cart errors, and filter, sort and search updates, so apps can follow shoppers without reading the theme's markup, including app scripts that load later in the page, such as app embeds. Apps that change the cart with Shopify's storefront actions update the cart drawer, cart page and header count without reloading the page, and open the drawer instead of going to the cart page
- A fresh install makes no shipping, returns, warranty, dispatch or reply-time promise: "Free dispatch over" starts at 0, so the header, product page and cart messages stay hidden until you set it, the Hero has no stats, the product page has no returns note, and the contact page asks shoppers for their order number and confirms a sent message without promising a reply time
- The documentation's recipes mark store terms, such as a free shipping amount, "60-day returns." and a "2 years" warranty, as examples to replace with your own, so none reads as a Techno default
- Country and language selectors, right-to-left support
- Header account panel links set in Theme settings › Customer accounts, using Shopify's
customer-account-main-menuby default - Customer accounts use Shopify's hosted sign-in, orders, profile and addresses pages and the header account button. Techno has no legacy account pages, and Shopify moves a store still on legacy customer accounts to the current version when it publishes Techno
- Counts that change as shoppers shop, such as the header's cart count, the number of search suggestions and the comparison's rows that differ, show apostrophes and ampersands in text you reword or translate, instead of codes such as
'. That includes languages with a separate form for a few items, such as Ukrainian, Polish or Czech, where an apostrophe before the number used to garble the whole count
Accessibility
- With the grid overlay on, accent-bordered buttons and badges keep a 3:1 border contrast where they cross a grid line
- Product card swatches keep a 3:1 edge against the panel, whatever their color
- Screen readers hear cart, filter and search updates inside the cart, search and menu drawers, not only on full pages
- Screen readers hear "Item added to cart." when an add opens the cart drawer, or from the menu or search drawer if one is already open
- When a second add to cart finishes while the cart drawer is already open, such as two Kits added in quick succession, keyboard focus stays on the drawer's Close button instead of being lost
- In the cart drawer and on the cart page, typing a quantity and pressing Tab leaves keyboard focus on that line's + button once the cart refreshes, or on its − after Shift+Tab, instead of jumping to the drawer's Close button or the first line's quantity, also when Shopify only partly accepts the change. A shopper who keeps tabbing before the refresh lands stays on the control they reached, such as the line's Remove, the next product's title or Checkout, instead of being sent to Close, the first line's quantity or back to the quantity field. Focus that has already moved past the cart when the refresh lands stays where it is
- Closing the cart, search or menu drawer returns keyboard focus to where it was when the drawer opened, such as a product option or the Add to cart button, even when a variant change replaced that element while the drawer was open, instead of losing focus
- After Add to cart is clicked with the mouse in Safari or Firefox, closing the cart drawer returns focus to that button, on the product page, the sticky add-to-cart bar, Featured product, Kits and a card's quick add, instead of leaving it at the top of the page. If the shopper was typing in a field of that form, such as the quantity, focus goes back to that field instead, unless they used the sticky add-to-cart bar
- After a variant change, screen readers hear the variant, its price and whether it is in stock or sold out, or "Unavailable" for a combination that isn't sold
- The header cart button is announced as "Cart, 2 items", so screen reader and voice control users can tell it is the cart
- Keyboard focus on the header account button shows the same accent ring as the search and cart buttons, in every palette, instead of the browser's own ring, which could fall below 3:1 contrast on Blueprint and Monolith
- Keyboard focus on a 3D model in the product gallery and quick view shows the accent ring around the model, in every palette, instead of the browser's own thin ring, which fell below 3:1 contrast on Dreamy. The ring stays visible when the model is zoomed in to fill the gallery, and doesn't appear when shoppers rotate the model with a mouse or a finger
- In the cart drawer, keyboard focus shows the whole accent ring around the order note's toggle, and around each line's links and buttons as Tab or Shift+Tab scrolls them into view. The ring's left and right edges, or its top or bottom edge at the end of the visible list, used to be cut off
- In Safari, Shift+Tab from the first control of the cart, menu, search or quick view drawer, or of the product image viewer, can stop on the drawer itself. That stop now shows the accent ring just inside the drawer's edge, in every palette, instead of nothing at all. Mouse clicks inside a drawer still show no ring
- With the order note open in the cart drawer and the list scrolled to its end, changing a quantity, or the cart updating while the shopper types the note, keeps the list where it was. It used to jump up by the note's height, moving the line the shopper had just changed down the screen
- With reduced motion turned on, the boot sequence shows the header status strip, the hero and the password page log straight away, instead of popping each item in after a short pause
- A heading left empty no longer leaves an empty heading for screen readers to stop on. Featured collection, Product recommendations and the Heading block hide theirs, with the "Full index" link and the product count staying at the end of the row. The Hero, 404 page and password page, which each need a main heading, show your shop name or "Page not found" instead
- A Collapsible row with no heading, a Button block with no label and an Eyebrow block with no text are hidden, instead of showing a row with an unnamed control or an empty button. A Rich text section whose blocks are all left empty, such as a new one with its Eyebrow, Heading and Text cleared, is hidden too, spacing included. In the theme editor, these blocks and an empty Heading block show a "Not shown to shoppers" note, so they can still be selected