Want to add dark mode to your Shopify store? Install the Night Eye Shopify app to give shoppers a light/dark mode toggle on your storefront. Customers use the toggle directly on your website. They do not need to install a browser extension.
This guide covers app installation, Shopify app embed activation, toggle customization, pricing and storefront testing. If you want a dark interface while managing products and orders instead, see our separate Shopify admin dark mode guide.
Table of contents
- How to Add Dark Mode to Your Shopify Store
- Shopify Dark Mode Toggle: Appearance and Controls
- Storefront Examples: Collections and Product Pages
- Theme Compatibility, Images, Mobile and Checkout
- Frequently Asked Questions About Shopify Dark Mode
- How much does Night Eye for Shopify cost?
- Can I schedule dark mode for certain hours?
- Can I change where the dark mode button appears?
- Will dark mode work with my Shopify theme?
- Why does my store return to light mode while scrolling?
- Does Night Eye change the Shopify checkout?
- How do I disable or uninstall Night Eye?
- Do shoppers need the Night Eye browser extension?
- Add a Dark Mode Toggle to Your Store
How to Add Dark Mode to Your Shopify Store
Night Eye uses a Shopify app embed and can be configured without editing theme code. Complete all six steps, including enabling the embed in your active theme.
Step 1: Install the Night Eye Shopify App
Sign in to your Shopify admin, open the Night Eye listing in the Shopify App Store, select Install and choose the store you want to configure.
Step 2: Review Permissions and Approve a Plan
Read the permissions requested by Shopify and approve the installation if you agree. In the app, choose monthly or annual billing and confirm the plan in Shopify. The current listing offers a 15-day free trial, with prices of $4.99/month or $39.99/year (USD). Review the billing confirmation before approving.
Step 3: Enable the Night Eye App Embed
Installing the app does not automatically make its dark mode toggle visible. Follow the activation link in the Night Eye app settings, or go to Shopify admin → Online Store → Themes → Edit theme → App embeds. Find Night Eye, turn the embed on, and click Save. Make sure you are editing the theme that is published on your store. If you publish a different theme later, enable the app embed there as well.
Shopify also documents the app embed activation process.
Step 4: Configure the Toggle
Return to Night Eye in Shopify admin. Set its status to active, select a dark theme (Dark, Black or Gray), and choose the toggle position for desktop and mobile. Adjust the X/Y offsets, widget title and description as required. If you want dark mode only during certain hours, configure the scheduling options.
Step 5: Save and Test the Storefront
Open your published store in a regular browser window. Find the Night Eye toggle, switch between light and dark, and verify the appearance of your home page, collection pages, product pages and cart. Scroll from top to bottom, open navigation menus, change product variants and check the cart drawer if your theme uses one. Repeat on a phone-sized screen. Look especially for backgrounds turning light again, unreadable text, altered product imagery or controls obscured by the toggle.
Step 6: Adjust or Disable If Needed
Move the toggle if it overlaps the cart icon, chat button or cookie banner. You can disable the widget from Night Eye settings or turn off its Shopify app embed without uninstalling the app. For theme-specific issues, contact [email protected] with your theme name, affected page and a short screen recording.
Shopify Dark Mode Toggle: Appearance and Controls
Night Eye includes merchant-controlled appearance options for the storefront. You can select different toggle positions for desktop and mobile and offer shoppers a straightforward way to switch the site appearance.
| Setting | What you can configure |
|---|---|
| Storefront widget | Turn Night Eye on or off. |
| Dark theme | Choose Dark, Black or Gray. |
| Desktop placement | Top left, top right, bottom left or bottom right, with X/Y offsets. |
| Mobile placement | Independent position and X/Y offsets for smaller screens. |
| Widget wording | Customize its title and description. |
| Schedule | Activate dark mode during selected hours; optionally hide the toggle outside that interval. |
Storefront Examples: Collections and Product Pages
These preview images are taken from the Night Eye Shopify App Store listing. The first illustrates a light/dark storefront comparison; the others show a collection and product page in dark mode. They do not guarantee identical results on every custom theme.
Example: Dark storefront with featured products.
Example: Product details, price and add-to-cart controls in a dark theme.
Theme Compatibility, Images, Mobile and Checkout
Shopify themes differ in how they render menus, product variants, collection filters, galleries and carts. The Night Eye app listing describes theme adaptability, but you should test the exact theme and apps running on your store before relying on dark mode across every page.
| Store area | What to verify before publishing |
|---|---|
| Product pages | Prices, variant selectors, galleries, availability labels, reviews and add-to-cart controls remain readable. |
| Collections | Product cards, filters, sorting menus, sale badges and pagination retain usable contrast. |
| Cart and cart drawer | Backgrounds, totals, quantity controls, discount fields and checkout buttons look correct. |
| Product images | Brand colors, white-background product photos and logos remain recognizable. Inspect image treatment on your own theme. |
| Mobile storefront | The toggle is visible, doesn’t overlap sticky controls, and remains usable while scrolling. |
| Shopify checkout | Do not assume the storefront app embed also darkens Shopify-hosted checkout; checkout customization is a separate Shopify capability. |
For checkout specifics, see Shopify documentation on checkout app extensions. A storefront dark mode setting is not evidence of checkout support.
Frequently Asked Questions About Shopify Dark Mode
How much does Night Eye for Shopify cost?
The Shopify App Store currently lists $4.99 per month or $39.99 per year, with a 15-day free trial. Charges are in USD. Confirm the current terms on the Shopify app listing before installation.
Can I schedule dark mode for certain hours?
Yes. Night Eye provides a timer to activate dark mode during selected hours, plus an option to hide the toggle outside the scheduled period.
Can I change where the dark mode button appears?
Yes. Choose one of four corners and adjust its X/Y offsets separately for desktop and mobile. Check that it does not cover other floating storefront controls.
Will dark mode work with my Shopify theme?
App embeds work with Shopify themes, but specific visual results depend on the theme and any additional apps or custom code. Verify the pages and interactions that matter to your store, particularly sticky headers, cart drawers and collection filters.
Why does my store return to light mode while scrolling?
One Shopify App Store review reported a theme switching back to light mode during scrolling. A general fix has not been publicly verified. If you see this on your store, confirm that the app embed is enabled, reproduce it on the affected page, and record which theme, browser and screen size are involved. Send that information and a short video to Night Eye support for investigation rather than assuming the issue is resolved.
Does Night Eye change the Shopify checkout?
Night Eye for Shopify is presented as a storefront customization app. Shopify checkout has separate extension and styling rules, so check checkout independently and do not assume the storefront toggle carries over.
How do I disable or uninstall Night Eye?
To hide dark mode temporarily, deactivate it in the Night Eye settings or turn off the app embed and save your theme. To remove the app, go to Shopify admin → Settings → Apps, select the app menu and choose Uninstall. Shopify advises checking for any extra removal requirements and reviewing billing before uninstalling. See Shopify’s uninstall guide.
Do shoppers need the Night Eye browser extension?
No. The Shopify app adds the storefront toggle for visitors. The separate Night Eye browser extension is for individuals who want dark mode on websites they browse, including the Shopify admin interface.
Add a Dark Mode Toggle to Your Store
Install Night Eye from the Shopify App Store, enable its theme app embed, customize the widget and test your live storefront before inviting shoppers to use it.