Getting Started: Install, Set Up, and Update Firefly

This guide takes you from an unopened Firefly theme package to a reviewed, unpublished storefront copy. It also explains how to update without overwriting the theme currently serving customers.

Before you install

• Use the current Firefly release ZIP supplied through the official delivery channel. Do not unzip it before uploading to Shopify.
• In Shopify Admin, duplicate the current live theme or download a backup before changing production.
• Confirm that you can access Online Store > Themes and the store’s menus, products, collections, markets, languages, shipping, and payment settings needed for setup.
• Make a short inventory of app embeds, app blocks, tracking code, custom Liquid, and custom CSS used by the current storefront. A newly uploaded theme is independent and does not automatically inherit them.

Upload Firefly

1. From Shopify Admin, go to Online Store > Themes.
2. Choose the option to add or upload a theme, then select the Firefly ZIP.
3. Wait for Shopify to finish processing the package. Keep this copy unpublished while you configure it.
4. Open Customize for the uploaded theme and use its preview link for review.

A valid theme package contains the theme folders directly at the ZIP root, including assets, config, layout, locales, sections, snippets, and templates. If Shopify reports that these folders are missing, check that you selected the release ZIP rather than a folder containing it.

Choose a Theme style first

In the theme editor, open Theme settings and choose a Theme style. The selector names are Firefly, Ember, Midnight, and Scarlet. Each choice applies a coordinated starting point for colors, typography, spacing, cards, and controls.

Choose the closest direction before fine-tuning individual settings. Changing Theme style later can replace multiple global values. For details, see Theme Styles, Color Schemes, and Global Settings.

First setup checklist

Brand and navigation

• Under Logo, select a Logo image, set Desktop logo width and Mobile logo width, and add a Favicon.
• Configure the Header’s Main menu. If used, also select a Customer account menu and Secondary menu.
• Add footer menus, brand information, newsletter content, social links, policy links, and localization controls appropriate to the store.

Global presentation

• Review the five color schemes: Accent 1, Accent 2, Background 1, Background 2, and Inverse.
• Check typography scale, page width, page margin, section spacing, buttons, inputs, variant pills, cards, media, drawers, pop-ups, and badges.
• If using a custom brand color, verify text contrast and every major action on both light and dark surfaces.

Templates and commerce

• Review the Home, Product, Collection, Collections list, Search, Cart, Blog, Article, Page, 404, Password, Gift card, and applicable Customer templates.
• Test products with different option counts, media types, availability, prices, selling plans, and quantity rules actually used by your catalog.
• Check cart quantity changes, line properties, discounts, notes, and the handoff to Shopify Checkout.
• Verify collection filtering and sorting with your real Shopify Search & Discovery configuration.

Apps, markets, and policy

• Re-enable only the app embeds and app blocks required for this theme copy. Confirm their placement and consent behavior.
• Review each published market and language, including prices, currency formatting, translated navigation, and localization selectors.
• Confirm store policies, shipping rates, payment methods, taxes, domains, notification emails, and checkout configuration in Shopify Admin. These are not created by the theme.

Preview before publishing

Use real products and realistic content rather than placeholders. Test at least the following paths in the unpublished preview:

• Home page navigation to a collection and product.
• Variant selection, quantity adjustment, add to cart, cart edit, and checkout handoff.
• Search, empty search, filters, sorting, and pagination.
• Newsletter and contact forms, including validation and success/error states.
• Keyboard navigation, visible focus, zoom, and mobile menus.
• Any enabled promo pop-up, autoplay media, app block, floating player, or scroll-to-top control.

Shopify’s desktop and mobile preview controls are useful, but also open the preview URL on the browsers and devices your customers actually use.

Publish

Publish only after the unpublished copy is complete. Shopify will ask you to confirm that it should replace the current live theme. Keep the previous theme available for a short rollback window, and avoid making simultaneous changes to both copies unless you record them.

Update Firefly safely

1. Duplicate or download the current live theme.
2. Upload the new Firefly release as a separate unpublished theme.
3. Read the release notes and compare the new theme’s settings, templates, app blocks, and customizations with the live copy.
4. Reapply necessary store-specific configuration in the new copy. A fresh upload does not merge hand-edited Liquid, CSS, JavaScript, or every setting from an older theme.
5. Repeat the storefront and purchase-path preview, then publish the new copy when ready.

Avoid editing the live theme to “catch up” while testing an update. Make changes in one unpublished theme copy, record what changed, and publish that copy only after review.

Find the installed version

Open the theme editor and view Theme information. Use the displayed theme version in change records and support requests; do not infer it from the ZIP filename or the name you gave the theme in Shopify Admin.

Next: configure Theme styles, color schemes, and global settings.