> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/exp98-shopify-theme/exp98/sections-and-features/desktop.md). # Desktop The icons, shortcuts and windows that make up the desktop. The **Desktop** section is the desktop itself: every icon on it is a block. It's on every page — find it in the theme editor's sidebar under **Desktop**. ## Where icons go You don't place icons one by one. Each kind goes to its own spot, so the desktop reads at a glance: | Kind | On a computer | On a phone | | ------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | **Shortcuts, windows, Policies** | A column down the left | The icon grid | | **Music, Video, Photos** | Along the bottom-left | The row along the bottom | | **Games, the Photo Booth and the Lookbook** | Bottom-right corner: Photo Booth and Lookbook on top, the games below | Stacked in the bottom-right corner beside the music player: **Photo Booth**, **Lookbook**, then one **Games** icon that opens a folder of them | Within each place, icons follow the order of the blocks. Drag blocks in the sidebar to reorder them. The **cart** always sits in the top-right corner on a computer (see [Shell](/exp98-shopify-theme/exp98/theme-settings/shell.md#desktop)). On a phone it's in the taskbar. ## What ships Shop, Collections, Search, Contact and Cart shortcuts; a Help icon; Video, Photos, Music and Policies launchers; the Photo Booth; a Read me window; and three of the eight [games](/exp98-shopify-theme/exp98/sections-and-features/games.md) — Solitaire, Minefield and Worm. Delete what you don't want; the other five games are blocks you can add. ## Blocks ### Shortcut An icon that goes somewhere — a collection, a page, the cart, another site. | Setting | | | -------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | **Label** | The name under the icon | | **Icon** | Folder, Folder (open), Box, Bag, Cart, Music, Speaker, Info, Mail, Star, Game, Paint, Search, Computer, Account, Help | | **Your own icon** | Optional. Your picture in place of the icon — see below | | **Link** | Where it goes | | **Open it when someone arrives** | No (default), Once per visit, or Every time the home page loads | Links to your products, collections, search, cart and pages **open as windows** on the desktop instead of loading a new page — and the address bar still changes to the real page's address, so the link can be shared. #### Your own icons Every Shortcut, Window and Product icon can wear your own picture instead of the pixel icon — a tee for a Tees collection, a cap for Hats. Upload it under **Your own icon**. * A **PNG with a transparent background** looks best: the item cut out, nothing behind it. * Square, **128 × 128 or larger**. It's shown at icon size, drawn smooth rather than pixelated. * Keep it simple and bold — at icon size, detail disappears. * Want it to look like pixel art? **Theme settings → Shell → Pixelate your own icons** turns every uploaded icon (and Product icon photos, and a custom cart icon) into pixels, with a **Pixel detail** slider from 12 to 48 pixels across — fewer is chunkier, 32 is the classic icon size. A row of collection shortcuts — Tees, Bottoms, Hoodies, Hats, each with its own picture, and a Shop all folder — makes a desktop that reads like a shop window. ### Product icon One product, as its own icon on the desktop — for a store with a handful of products, each can be a cell of its own. Its window opens on a click, and it can be dragged onto the cart like any product file. | Setting | | | ----------------------------------------- | --------------------------------------------------------------- | | **Product** | The product | | **Name under the icon** | Left empty, the product's title | | **Use the product's picture as the icon** | On by default; off, it's the box icon | | **Your own icon** | Optional. Overrides both | | **Open it when someone arrives** | No (default), Once per visit, or Every time the home page loads | #### Opening a product or collection the moment someone arrives For a store with one product, a new drop, or a Shop all you want front and centre: make a **Product icon** for the product (or a Shortcut that links to the collection), and set **Open it when someone arrives**. On the home page its window then opens by itself — the product with its Add to cart, or the collection's folder — so nobody has to go looking. 1. Theme editor → **Desktop** section → **Add block → Product icon** (for a product) or **Shortcut** (for a collection). 2. Choose the product, or set the shortcut's **Link** to the collection. 3. **Open it when someone arrives** → **Once per visit** (it won't reopen every time they return to the home page in the same visit) or **Every time**. Use it on one shortcut — two would open two windows at once. It doesn't happen in the theme editor, so preview your store to see it. ### Window An icon that opens a text window — a **Read me**, a notice, a note about a drop. | Setting | | | ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Title** | The window's title and the icon's label | | **Icon** | As for shortcuts | | **Content** | Rich text | | **Open on page load** | Opens by itself on every page | | **Announcement: on phones, show above the icons** | See below | | **Status bar text** | A line in the window's status bar | | **Button link** / **Button label** | A button in the status bar — "Shop now" by default, shown once you set a link. | | **Second button link** / **Second button label** | A plain button to the left of the main one, for a link that isn't the main way forward. A link to another site opens in a new tab | | **Top offset**, **Left offset**, **Width** | Where it opens on a computer. **Left offset** takes a length like `12rem`, or `center` to sit in the middle of the screen — the Read me ships centred. Phones ignore these | Every window should offer somewhere to go next — give it a button. #### The announcement Tick **Announcement** and, on a phone, the window sits at the very top of the screen with the icons beneath it, instead of below them with the other windows. That's how the Read me that ships works as an announcement bar. Computers are unaffected. On a phone, a window's text runs on one line when it's a single paragraph: if it's too long for the window it scrolls across like a ticker, and if it fits it just sits there. Two paragraphs or a list wrap as written. Computers show the text as written, and so does a phone with reduced motion switched on. ### Lookbook A collection's photos as a Media Player slideshow. See [Lookbook](/exp98-shopify-theme/exp98/sections-and-features/lookbook.md). ### Photo Booth An ASCII art studio shoppers play with. It sits with the games: at the top of the bottom-right huddle on a computer, and tucked at the right end of the bottom row next to the Games cell on a phone or tablet. See [Photo Booth](/exp98-shopify-theme/exp98/sections-and-features/photo-booth.md). ### Music, Video, Photos, Policies Launchers for the windows of the same names. Only the **Label** is set here, and each can be added once. The windows themselves — the tracks, the videos, the photos — are their own sections: [Music Player](/exp98-shopify-theme/exp98/sections-and-features/music-player.md), [Videos](/exp98-shopify-theme/exp98/sections-and-features/videos.md), [Photos](/exp98-shopify-theme/exp98/sections-and-features/photos.md), [Policies](/exp98-shopify-theme/exp98/sections-and-features/policies.md). ### Games See [Games](/exp98-shopify-theme/exp98/sections-and-features/games.md). ## Screen reader heading The section's only setting. It's the page's heading for screen readers on the home page — not shown on screen. "Desktop" by default; your store name is a good choice. ## Opening icons One click opens an icon on a computer, one tap on a phone. You can switch computers to double-click under [Shell](/exp98-shopify-theme/exp98/theme-settings/shell.md#desktop-icon-activation).