Frost documentation
Frost is a Shopify theme in the iOS Liquid Glass style. The header, tab bar, sheets and the labels on your photos are translucent glass that floats over your pictures and a soft field of colored light.
Get started
- Add the theme to your store and open the theme editor.
- Upload your logo in the Header section and set your main menu.
- Pick your colors under Theme settings > Colors. The three ambient lights set the soft color behind the glass.
- Fill in the home page sections, then add your social links under Theme settings > Social media.
Theme settings
| Group | What you can change |
|---|---|
| Colors | Color mode (match the visitor's device, always light, always dark), background, text, accent and accent text colors for light and dark mode, the three ambient lights, and the sale and alert colors |
| Glass | Glass effect (full blur, light, or off), the background (ambient light or a plain color) and the pointer highlight |
| Shape and layout | Corner radius, continuous corners, button shape, maximum page width |
| Typography | Body and heading fonts, and whether Apple devices use SF Pro |
| Product cards | Image shape, second image on hover, vendor, quick add |
| Cart | Cart type (drawer or page), cart note |
| Social media | Instagram, Telegram, TikTok, YouTube, Facebook, X and Pinterest links |
| Favicon and sharing | Favicon and the sharing image used when a page has no image |
How the glass works
Glass needs something behind it. Frost paints three soft lights behind the page and puts glass only on layers that float: the header, the tab bar, sheets, the label on a product photo and the panel on a banner. Lists, cards and forms are translucent but not blurred, so a page stays fast.
- Glass effect, Full blur is the default and looks best on recent phones and computers.
- Light keeps the glass but blurs fewer layers. Product labels stay frosted without blur. Use it if your store has very long collections or many visitors on older phones.
- Off replaces every glass surface with a solid one.
- Visitors who ask their device for reduced transparency or higher contrast always get solid surfaces, whatever you choose.
- Background, Plain color removes the ambient lights and keeps one flat color.
- Pointer highlight moves a soft light across glass under the cursor on computers. Turn it off if you prefer a still page.
Glass panels on the Image banner, Slideshow and Promo cards have a Glass panel setting. Leave it on Follows the color mode, or force light or dark glass.
Header and navigation
On phones a floating tab bar replaces the icons in the header. A lens slides under the active tab, and the bar shrinks to icons while the visitor scrolls down. Turn the tab bar off in the Header section if you prefer a classic header. On larger screens the header is one floating bar. The account avatar stays in the header on every screen size. Menus can have up to three levels on large screens and two levels in the phone menu sheet.
Theme style (presets)
Frost ships with one preset, Frost: a light ground with blue, mint and rose light and a blue accent. It follows the visitor's light or dark mode. If you want a fully dark store, set Color mode to Always dark under Theme settings > Colors.
Sections
You can add these sections to the home page and to any other page that uses a JSON template:
| Section | Use it for |
|---|---|
| Image banner | A large image with a heading and buttons on a glass panel |
| Slideshow | Up to six banner slides with arrows and dots, and optional autoplay |
| Video | An uploaded video, or a YouTube or Vimeo link that loads the player when the visitor taps play |
| Multicolumn | Up to six columns with an image, heading, text and link |
| Testimonials | Up to eight customer quotes with an optional star rating |
| Logo list | Up to ten brand or press logos |
| Collage | One large tile and up to four smaller image, product, collection or text tiles |
| Blog posts | The latest articles from a blog |
| Product list | Hand-picked products |
| Scrolling text | Up to eight lines of text that scroll across the page |
| Collection list | Collections as large tiles |
| Featured collection | A collection's products in a grid |
| Featured product | One product with its buy buttons |
| Promo cards | Up to six cards that link to offers |
| Feature list | Up to six icons with short benefits |
| Image with text | An image beside a block of text |
| Rich text | A heading, text and button |
| FAQ | Collapsible questions and answers |
| Newsletter | An email sign-up form |
| Contact form | A contact form with name, email, phone and message |
| Custom Liquid | Your own HTML and Liquid |
Slideshow autoplay is off until you turn it on. Visitors can pause it, and it does not run for visitors whose device asks for reduced motion.
Product page
Reorder the blocks in the Product section: title, price, variant picker, purchase options, gift card recipient, quantity, buy buttons, pickup availability, description, collapsible rows, share, Custom Liquid and app blocks.
- Swatches use the color or image set on the product option.
- Purchase options appear when a subscription app adds selling plans to the product.
- Pickup availability appears when a location offers local pickup.
- Express checkout and Shop Pay Installments appear when your store has them enabled.
- On a product card, the quick add button appears on the photo for products without variants.
Gift cards
Gift card products show a "Send as a gift" switch with recipient email, name, message and send date. The gift card page shows the balance, a copyable code, a QR code, an Apple Wallet link and a print button.
Languages
Frost includes 19 languages: English, Uzbek, Russian, Turkish, Spanish, German, French, Ukrainian, Polish, Italian, Portuguese (Brazil), Dutch, Japanese, Korean, Chinese (Simplified), Kazakh, Azerbaijani, Indonesian and Vietnamese. Add languages in Settings > Languages and the theme picks up the matching translations. Text you type in the theme editor is yours to translate.
The built-in text (button labels, cart, account and error messages) can be changed in the theme editor under the three-dot menu > Edit default theme content, if a translation does not suit your store.
Accessibility
Text on glass keeps at least AA contrast over any photo. Every control works with a keyboard and shows a visible focus ring. Animations stop for visitors who ask for reduced motion, and glass turns solid for those who ask for reduced transparency or more contrast.
Frequently asked questions
Why does my banner text sit on a panel? So it stays readable on any photo. Use the Glass panel setting to match your photo, or set the Image dimming slider for a darker picture.
The page feels slow on an older phone. What can I change? Set Glass effect to Light or Off under Theme settings > Glass.
How do I change the cart to a page? Open Theme settings > Cart and set Cart type to Page.
Why do I not see express checkout buttons? They appear when a wallet such as Shop Pay or Apple Pay is active in your payment settings.
Can I turn off dark mode? Yes. Set Color mode to Always light under Theme settings > Colors.
Does the theme work with subscription apps? Yes, through selling plans and app blocks. Custom apps may need the Custom Liquid block.
Support
Use the support form. Include your store URL and a short description of the problem. Duplicate your theme before editing its code.