# Techno > Techno is a Shopify theme for consumer tech and accessories, styled like a hardware terminal. This documentation covers theme version 1.0.0: setup in the theme editor, every section and setting, and extending the theme with custom code. ## Overview - [Techno documentation](https://buglyph.com/techno-theme/docs/README.md): Techno is a Shopify theme for consumer tech and accessories. The storefront looks like a hardware terminal: bordered panels with a label and a status in the header strip, spaced-out monospace details, and one accent color kept for prices and stock states. ## Getting started - [Installing Techno](https://buglyph.com/techno-theme/docs/getting-started/installation.md): How to add Techno to your store, set it up in the order that saves the most time, and keep it up to date. - [Presets](https://buglyph.com/techno-theme/docs/getting-started/presets.md): What each of Techno's three presets is for, what it installs, and how switching a preset differs from switching a color palette. ## Core concepts - [Sections, blocks & templates](https://buglyph.com/techno-theme/docs/core-concepts/sections-and-blocks.md): How Techno builds pages from templates, section groups, sections and blocks, and where each section can be used. - [Colors & palettes](https://buglyph.com/techno-theme/docs/core-concepts/theme-styles-and-color.md): How the four color palettes set the ten colors, what each color controls, and how to override a color without losing the palette. - [Typography, layout & brand](https://buglyph.com/techno-theme/docs/core-concepts/typography-and-layout.md): How to set the font, text size, page width and margins, and how the logo, tagline and favicon appear. - [Motion, effects & voice](https://buglyph.com/techno-theme/docs/core-concepts/motion-and-voice.md): How the scanline overlay, grid overlay, boot sequence and blinking cursor work, and how to control the playful "system chatter" lines in the theme's copy. ## Building pages - [Home page](https://buglyph.com/techno-theme/docs/building-pages/home-page.md): What the default home page contains, how to fill it in, and which sections to add for other kinds of home page. - [Hero](https://buglyph.com/techno-theme/docs/building-pages/hero.md): How to write the Hero headline, set its buttons and stats, and show a featured product beside it. - [Slideshow](https://buglyph.com/techno-theme/docs/building-pages/slideshow.md): How to show several promotions or launches in one rotating banner, with image, heading, text and a button on each slide, and how the slideshow stays accessible and fast. - [Product sections](https://buglyph.com/techno-theme/docs/building-pages/product-sections.md): How to show products outside the product page with Featured collection, Featured product and Kits. - [Content sections](https://buglyph.com/techno-theme/docs/building-pages/content-sections.md): How to use Image with text, Schematic, Rich text, FAQ, Icon row, Logo list, Blog posts, Newsletter and Custom Liquid to add stories, numbered callouts on a product image, announcements, questions and answers, service terms, press logos, articles, sign-ups and embeds to any page. - [Pages, contact, blog & utility pages](https://buglyph.com/techno-theme/docs/building-pages/pages-and-blog.md): How the Page, Contact, Blog and Article templates work, and how to set up the 404, password and gift card pages. ## Features - [Header & navigation](https://buglyph.com/techno-theme/docs/features/header.md): How to set up the header menu, mega menu and dropdowns, the mobile menu, the search, account and cart buttons, the status strip, whether the header stays on screen as shoppers scroll, and the back-to-top button. - [Announcement bar](https://buglyph.com/techno-theme/docs/features/announcement-bar.md): How to add a one-line bar above the header with announcements, links and a countdown to a real deadline. - [Search](https://buglyph.com/techno-theme/docs/features/search.md): How the search panel's live suggestions and the search results page work, including filters, sorting and result types. - [Product page](https://buglyph.com/techno-theme/docs/features/product-page.md): How the product gallery, variant picker, buy buttons, stock labels, spec table, pickup availability, subscriptions, gift cards and recommendations work. - [Collection pages](https://buglyph.com/techno-theme/docs/features/collection-pages.md): How the collection page's banner, filters, sorting, product grid and pagination work, and how to set up the collections list. - [Product comparison](https://buglyph.com/techno-theme/docs/features/product-comparison.md): How shoppers tick up to three products on any product card and see them side by side on a comparison page, with their price, availability and the specifications you choose, and every row where they differ marked. - [Cart drawer & cart page](https://buglyph.com/techno-theme/docs/features/cart.md): How the cart drawer and cart page work, how the order note and free dispatch messages behave, and what shoppers see at checkout. - [B2B: quantity rules & volume pricing](https://buglyph.com/techno-theme/docs/features/b2b.md): How Techno shows and enforces the order quantity rules and volume pricing you set in a B2B catalog, on the product page, in Featured product, Kits and the cart, and how the Quick order list adds several variants at once. - [Footer](https://buglyph.com/techno-theme/docs/features/footer.md): How to set up footer columns, the newsletter sign-up, social icons, country and language selectors, policy links and payment icons. - [Customer accounts](https://buglyph.com/techno-theme/docs/features/customer-accounts.md): How the header account button works with Shopify's customer accounts, and which parts of accounts Techno controls. - [Markets, currencies & languages](https://buglyph.com/techno-theme/docs/features/markets-and-languages.md): How Techno shows country and language selectors, displays prices in other currencies, and supports translation and right-to-left languages. ## Developer platform - [Custom code](https://buglyph.com/techno-theme/docs/developer-platform/custom-code.md): Where you can add your own Liquid, HTML, CSS and JavaScript to Techno without editing theme files, and how to do it safely. - [Theme architecture](https://buglyph.com/techno-theme/docs/developer-platform/architecture.md): How Techno's files are organized, where CSS and JavaScript live, and how to work on the theme locally. - [Design tokens](https://buglyph.com/techno-theme/docs/developer-platform/design-tokens.md): The CSS custom properties Techno defines from theme settings, and how to use them in custom code. - [JavaScript components](https://buglyph.com/techno-theme/docs/developer-platform/javascript.md): The custom elements and data attributes in `assets/techno.js` and in the theme's `{% javascript %}` tags, how they enhance the page, and which ones you can use in custom code. ## Reference - [Theme settings reference](https://buglyph.com/techno-theme/docs/reference/theme-settings.md): Every global setting in **Theme settings**, with its type, default and allowed values. Labels match the theme editor. - [Sections reference](https://buglyph.com/techno-theme/docs/reference/sections.md): Every section in Techno, with where it can be used, its settings and its blocks. Labels match the theme editor. For how to use a section, follow the guide link. - [Blocks reference](https://buglyph.com/techno-theme/docs/reference/blocks.md): Every theme block in Techno, with the sections that use it and its settings. Labels match the theme editor. "Default" is the value a newly added block starts with. Section-only blocks, such as the Hero's Stat block, are listed in the [Sections reference](https://buglyph.com/techno-theme/docs/reference/sections.md). ## Help - [FAQ](https://buglyph.com/techno-theme/docs/help/faq.md): Answers to the questions merchants ask most often about Techno. - [Support](https://buglyph.com/techno-theme/docs/help/support.md): What Techno support covers, how to reach us, and what to include so we can help quickly. - [Release notes](https://buglyph.com/techno-theme/docs/help/release-notes.md): What changed in each version of Techno. To update, see [Installing Techno › Updating Techno](https://buglyph.com/techno-theme/docs/getting-started/installation.md#updating-techno).