Terminal theme
Terminal turns your store into a text-mode computer program: box-drawn panels, dotted-leader product listings, a title bar with a live cart total, a function-key status bar and a command console. Customers can shop with just the keyboard, type commands, or simply click. Underneath, it's a fast, accessible Online Store 2.0 theme.
Current version: 1.0.0. Presets: TerminalShellSyntax
Need help? Read the FAQ first, then contact support.
Before you start
Everything in this guide is done in the theme editor (Online Store > Themes > Customize). No coding is needed.
For custom code changes, we recommend hiring a Shopify Partner. Our support covers the theme as it ships (see Support policy).
Install and presets
- Add Terminal from the Shopify Theme Store and pick a preset.
- Click Customize to open the theme editor.
- Set your menus, add products to the home page sections, and publish when you're happy.
| Preset | Commands and labels | Look |
|---|---|---|
| Terminal | Classic PC: a C:\SHOP> prompt and file names like CART.DAT. | Green phosphor on black, double-line boxes with shadows, scanlines, text glow, faint code rain and a boot screen. IBM Plex Mono. |
| Shell | Shell: a guest@shop:~$ prompt and file names like cart.json. | Deep aubergine terminal colors, single-line panes, no scanlines or rain. Roboto Mono. |
| Syntax | Code editor: a shop % prompt, tab-labeled panes and # headings, with file names like cart.ts. | Night editor colors in blue and violet, with a light rainbow code rain. Geist Mono. |
Presets are starting points. Change the command style, colors, font and effects any time in Theme settings.
Keyboard and console
The console is pinned to the bottom of every page. It has three rows:
- The log shows every command a customer runs (IN) and every answer (OUT). It carries over from page to page during a visit. [-] Smaller and [+] Bigger resize it.
- The TRY row shows the most useful commands for the current page as buttons, such as
addon a product orcheckoutin the cart. - The prompt, where customers type. A hint on the right says what Enter will do next. The [Run] button runs what's typed.
Typing always goes to the prompt, so customers never have to click into a box first. Keys:
| Key | What it does |
|---|---|
| Tab / Shift + Tab | Move the highlight to the next or previous thing on the page. The first Tab lands on the first product or post. |
| Arrow keys | Move around the product grid. With text typed, Up and Down recall earlier commands. |
| Enter | Open the highlighted thing, or run what's typed. |
| Esc | Close a box, clear the prompt, or leave a form field. |
| Letter + Enter | Press a bracketed button, like [A] Add to cart or [Y] Yes. Alt + letter works too, even mid-command. |
| F1 or ? | Open help: every key and every command, as buttons. |
| F-keys | Run the status bar commands (see Status bar). |
| / | Put the cursor back in the prompt. |
| Page Up / Page Down | Scroll the page. |
Quick start and hints. First-time visitors see a short quick start box. If someone seems stuck, for example after a mistyped command or a long pause, the console suggests what to try. Mistyped commands get a "Did you mean" fix that Tab fills in. Both can be turned off in Theme settings > Keyboard help.
On many laptops, especially Macs, F1 changes the screen brightness unless fn is held. That's why the F1 HELP badge in the title bar and the status bar keys can also be clicked, and why ? opens help too.
Commands
Customers don't need to know any of these. The TRY row and help box show them as buttons. Commands work the same in every command style.
| Command | What it does |
|---|---|
shop | Every product. |
home | The home page. |
ls or dir | List what's on this page in the log. |
cd lamps, cd .., cd / | Open a collection, go up one level, or go home. Typing a collection's handle alone works too. |
collections or dirs | All collections. |
open desk-lamp | Open a product by its handle. view, cat and type do the same. |
add desk-lamp | Add a product to the cart without leaving the page. |
rm desk-lamp | Remove a product from the cart. |
search lamps or find lamps | Search. Matching products appear in the TRY row while typing. |
cart | Open the cart. |
checkout | Ask to confirm with [Y] Yes or [N] No, then go to Shopify checkout. |
blog, blog tag, read post-handle | Open the blog, a blog tag, or one post. |
next and prev | Next or previous page of products or posts. |
back and top | Go back a page, or scroll to the top. |
account, orders, logout | Customer account pages, when customer accounts are on. |
about, contact | Any page handle opens that page. |
menu | Highlight the first item in the menu bar. |
help, tour, clear, log | Open help, show the quick start again, clear the log, or make the log bigger. |
There are a few jokes too, like sudo, exit, whoami and npm install desk-lamp (which really adds the product). Every command answer is in the theme's language file, so a translation app can translate it.
New collections, pages and products become commands automatically. There's nothing to set up.
Mouse and touch
Typing is never required. Every command, bracketed button, F-key and TRY button can be clicked or tapped, and product pages have normal buttons. On phones the console gets smaller so the page has room, the prompt doesn't open the keyboard until it's tapped, and the TRY row scrolls sideways.
Theme settings
Open the theme editor and click the gear icon (Theme settings).
| Group | What it controls |
|---|---|
| Colors | Background, text, box background, primary (highlights, buttons, prompt), text on primary, secondary (links, labels), hint text, borders, and the accent used for prices, sale and warnings, plus text on accent. Keep text readable: aim for strong contrast against the background. |
| Typography | The font, from the Shopify font library, and the font size. Monospace fonts keep the boxes lined up. |
| Command line | Command style (Classic PC, Shell or Code editor), the prompt folder (such as C:\SHOP or ~), the prompt user for the Shell style, the store name in the title bar, and the version label. |
| Effects | Scanlines, text glow, and code rain with its color (primary, accent or rainbow) and strength. Code rain only plays on larger screens and never for visitors who prefer reduced motion. |
| Boot screen | A short start-up screen, once per visit. Write your own lines: [STORE], [YEAR], [DIRS] and [CART] are filled in. It's skipped for reduced motion, search engines and the theme editor, and any key skips it. |
| Keyboard help | The quick start for first-time visitors, and hints when a customer seems stuck. |
| Product cards | Image shape (landscape, square or portrait), image fit, and whether to show the stock count. |
| Store | Favicon, and the main blog used by the blog command and the F4 key. |
| Social media | Links for Instagram, TikTok, X, Facebook, YouTube and Pinterest. Icons show in the footer and the About me section. |
Header and menus
- Title bar: shows your store name (or your logo), the F1 HELP badge and the live cart count and total. Upload a logo in the Header section and set its height.
- Menu bar: choose a menu in the Header section. Edit it in Content > Menus. Nested items become dropdowns, up to three levels.
- Search: the menu bar has a Search link, and suggestions appear as customers type on the search page and at the prompt.
- Account: the account button appears automatically when customer accounts are on in Settings > Customer accounts. To show a menu inside it, enter that menu's handle in Account menu handle.
- Follow on Shop: turn it on in the Header section once the Shop app follow feature is set up in your admin.
- Announcement bar: appears above the title bar as a message of the day. Add up to four announcements, each with an optional link.
Status bar (F-keys)
The status bar at the bottom has eight slots. Each slot has a key (like F2), a label (like Shop) and a command (any command from the list above). Leave a slot empty to hide it. The default keys are F1 Help, F2 Shop, F3 Cart, F4 Blog, F8 Search, F9 Account and F10 Checkout. The blog and account keys hide themselves when your store has no blog or customer accounts.
Home page and sections
Add sections with Add section in the theme editor and drag them to reorder. Every section is drawn as a labeled box. Most have a Box label setting; leave it blank for a file name that matches the command style.
| Section | Use it for |
|---|---|
| Image banner | A splash screen: image, optional ASCII art, heading, text and two buttons. |
| Slideshow | Slides with image, heading, text and button, changed with the [<] and [>] buttons. |
| Featured collection | A product grid from one collection. |
| Collection list | Collections as folders. |
| Featured product | One product with media, price, options, quantity and buy buttons. Supports app blocks. |
| Image with text | An image next to a heading, text and button. |
| Multicolumn | Columns with an optional image, heading, text and link. Good for shipping, returns and guarantees. |
| Video | A YouTube or Vimeo video or an uploaded video. External videos load only when played. |
| Collapsible content | Questions and answers, or any content that opens and closes. |
| Rich text | A heading, text and button. |
| Blog posts | Your latest posts from a blog. |
| About me | A profile: photo (or an ASCII portrait), name, role, bio, fact rows, social icons and a button. |
| Contact form | A contact form. Messages go to your store's email. |
| Email signup | A newsletter form. Signups appear in Customers with the "newsletter" tag. |
| Custom Liquid | App snippets or your own Liquid code. |
| Apps | App blocks from apps you install. |
The footer is a section too, with blocks for menus, text, email signup and social icons, plus payment icons, country and language selectors, and policy links.
Product page
The product page is built from blocks you can add, remove and reorder in the Product information section. Row blocks line up as a dotted-leader listing (NAME ...... Snowboard):
- Rows: title, price, vendor, SKU, inventory status (with a low-stock threshold), listing rows with your own label and value, variant picker, purchase options and quantity.
- Blocks: description, buy buttons, pickup availability, collapsible tabs, share, Custom Liquid and app blocks.
Media
Images, uploaded videos, YouTube and Vimeo links and 3D models all appear, with numbered buttons like [1] [2] [3D] to switch between them. 3D models can be viewed in your space on supported phones. Assign images to variants in Shopify admin and they switch when a customer picks that variant. Products without images show an ASCII drawing (see Metafields).
Color swatches
Set swatch colors or images on product options in Shopify admin. Options without swatches show as bracketed buttons.
Built-in commerce features
- Accelerated checkout buttons (like Shop Pay) and the Shop Pay Installments message, when your store offers them.
- Pickup availability for locations with local pickup turned on.
- Subscriptions: purchase options appear when a subscription app adds selling plans.
- Gift cards: customers can send a gift card to someone by email on a chosen date.
- Unit prices and taxes-included messaging.
- Related and complementary products, set up in the free Search and Discovery app.
Collections and search
- Filters (availability, price, product type, vendor and variant options) are set up in the Search and Discovery app. They show on collection and search pages, with sorting.
- Products per page, the collection image and the description are in the Product grid section.
- Sale and sold-out labels show automatically. The stock count setting is in Theme settings > Product cards.
- Search suggestions appear as customers type, on the search page and at the prompt.
Cart and checkout
The cart is a table with each item's options, unit price, discounts and subscription name. Customers can change quantities, remove items, leave an order note and use accelerated checkout buttons. Turn the note and accelerated buttons on or off in the Cart section.
Before checkout, customers see a short box: "Proceed to secure checkout with 2 item(s)?" [Y] Yes continues to Shopify checkout. [N] No or Esc goes back. The buttons can be clicked, or pressed with their letter.
Blog
Write posts in Content > Blog posts. The blog page lists posts with their image, date, excerpt and tags; posts show comments when you allow them on the blog. Choose the main blog in Theme settings > Store so the blog command and the F4 key open it. Add a Blog posts section to show your latest posts on any page.
About and contact pages
- About page: create a page in Online Store > Pages and choose the about template. It has the About me profile, your story and a contact form.
- Contact page: choose the contact template for a page with a contact form.
- Customers can type a page's handle, like
about, to open it.
Metafields
Optional. Create it in Settings > Custom data > Products, then fill it in on any product.
| Where | Namespace and key | Type | Shows as |
|---|---|---|---|
| Product | custom.ascii_art | Multi-line text | The ASCII drawing shown while a product image loads, or when a product has no image. Without it, the theme picks a drawing from the product type. |
Keep ASCII art to plain keyboard characters and box-drawing characters, about 30 characters wide, so it fits the frame in every font.
Styling Shopify checkout
Checkout is run by Shopify, so themes can't change it directly. You can match its colors and font in Settings > Checkout > Customize. Use the column for your preset, or your own colors from Theme settings > Colors:
| Setting | Terminal | Shell | Syntax |
|---|---|---|---|
| Headings and body font | IBM Plex Mono | Roboto Mono | Geist Mono |
| Header and main background | #070a08 | #2a0e24 | #1a1b26 |
| Order summary background | #0c110d | #35132e | #1f2335 |
| Buttons and accents | #39ff14 | #8ae234 | #7aa2f7 |
| Errors | #ffb000 | #ff8f4e | #ff9e64 |
Accessibility and motion
- The whole store works with a keyboard, and the highlight is always visible.
- Screen readers hear command answers and the highlighted item through a live region. Decorative characters, like box corners and dotted leaders, are hidden from them.
- For visitors who turn on "reduce motion" on their device, code rain, the blinking cursor and the boot screen are off.
- Prices and stock never rely on color alone. Buttons and links are at least 24 by 24 pixels.
- If you change colors, keep text readable: aim for at least 4.5 to 1 contrast against the background.
FAQ
Do my customers have to type commands?
No. Everything can be clicked or tapped, and the TRY row and help box show commands as buttons. Typing is a shortcut for customers who like it.
How do I turn off the code rain, scanlines or boot screen?
Theme settings > Effects has scanlines, text glow and code rain. Theme settings > Boot screen turns the boot screen off.
How do I change the prompt, like C:\SHOP>?
Theme settings > Command line. Set the command style, the prompt folder, and for the Shell style, the prompt user. The folder follows the page, so a collection called Lamps shows as C:\SHOP\LAMPS>.
How do I change the F-keys?
Click the Status bar section. Each of its eight slots has a key, a label and a command. See Status bar.
F1 changes my screen brightness. How do customers open help?
Hold fn and press F1, press ?, or click the F1 HELP badge in the title bar. All three open the same help box.
How do I add dropdown menus?
In Content > Menus, drag a menu item under another one to nest it. Up to three levels show as dropdowns.
Where do email signups and contact messages go?
Signups go to Customers in Shopify admin, tagged "newsletter". Contact form messages go to your store's email address.
Why don't I see pickup, installments or subscriptions?
They appear only when the feature is on for your store: local pickup on a location, Shop Pay Installments, or a subscription app.
Why is a product showing ASCII art instead of a photo?
It has no image yet, or the image is still loading. Add images in Shopify admin, or write your own drawing in the custom.ascii_art metafield.
Something looks broken after I edited code. What now?
Switch back to your untouched copy of the theme (see Before you start). Code edits aren't covered by support.
Support policy
- We help with: questions about theme settings and features, and bugs in the theme as it ships.
- Response time: within two business days (Monday to Friday).
- Bug fixes are included in free theme updates.
- Not covered: custom code changes, third-party apps, and problems caused by edited theme code. For custom work, hire a Shopify Partner.
- Coding tutorials: we don't provide custom coding tutorials. Always duplicate your theme before editing code.
Changelog
1.0.0
- First public release: three presets (Terminal, Shell and Syntax), the keyboard console with TRY buttons, hints and a quick start, a block-based product page, blog, About me and contact sections, predictive search, filtering, and styling guides for Shopify checkout.