Firefly Theme Documentation

Firefly is a Shopify Online Store 2.0 theme built with JSON templates, header and footer section groups, theme and app blocks, dynamic sources, native product media, storefront filters, cart experiences, and Shopify customer forms. Use this documentation to install the theme, choose a Theme style, configure storefront templates, and troubleshoot theme settings.

This documentation covers the Firefly Theme. Firefly Sky SEO Suite and Firefly Sky SEO AI Blog are separate products with their own documentation collections. Settings or behavior described here should not be assumed to apply to either app.

Start here

1. Upload the current Firefly release as an unpublished theme and open its preview.
2. Choose Firefly, Ember, Midnight, or Scarlet from Shopify’s Theme style selector.
3. Add your logo, favicon, menus, brand information, social links, and required app blocks or app embeds.
4. Review the Home, Product, Collection, Search, Cart, Blog, Page, Password, and Customer templates with real store content.
5. Preview both desktop and mobile layouts, test the purchase path, and publish only when the unpublished copy is ready.

For installation details and a safe update process, see Getting Started: Install, Set Up, and Update Firefly.

Browse the documentation

• Getting Started: Install, Set Up, and Update Firefly — upload, preview, first setup, backups, and updates.
• Theme Styles, Color Schemes, and Global Settings — presets, the five named schemes, typography, layout, cards, and custom brand colors.
• Header, Footer, and Global Storefront Elements — menus, predictive search, announcement content, localization, payment icons, and floating controls.
• Home Page and Content Sections — the section catalog and guidance for composing a flexible home page.
• Product Pages and Merchandising — media, variants, quantity rules, selling plans, pickup availability, product blocks, and honest merchandising.
• Variant Swatches and Media Grouping — native, image, and ALT-gradient swatches plus variant-specific media groups.
• Collections, Search, and Product Cards — filtering, sorting, search results, predictive search, and card presentation.
• Cart, Checkout, and Purchase Flow — drawer, page, notification, cart details, upsells, progress messaging, and the Shopify checkout handoff.
• Blogs, Articles, Pages, and Page Templates — editorial content, comments, standard pages, contact, FAQ, and order-support templates.
• Password, Gift Cards, and Customer Accounts — password storefront, gift-card display, classic customer account templates, and hosted account boundaries.
• Promo Pop-up and Campaign Countdown — display modes, newsletter signup, a shared absolute campaign deadline, success content, and testing.
• FAQ and Troubleshooting — quick answers and a reliable process for isolating storefront issues.
• Support, Compatibility, and Support Boundaries — what to include in a support request and which systems remain controlled by Shopify, apps, or the merchant.

How Firefly uses Shopify data

Many storefront features are conditional. A setting can enable the presentation, but Firefly can only render data that Shopify or an installed app actually provides. For example:

• Collection and search filters appear only when Shopify supplies filter data for the current result set.
• Ratings appear only when a product has valid rating data and the relevant section setting is enabled.
• Selling plans, quantity rules, volume pricing, pickup availability, recommendations, and 3D media depend on the product, market, location, or app configuration.
• Country and language selectors require more than one available option.
• Order history, gift-card values, and fulfillment links come from Shopify records; the theme does not create those records.

Work safely in the theme editor

Make substantial changes in an unpublished copy. Check the affected template with real content, then preview common desktop and mobile widths. Keep campaign claims, delivery estimates, testimonials, reviews, comparison data, and pricing statements accurate and supportable. Custom Liquid, custom CSS, and third-party app output can change theme behavior, so record those additions when troubleshooting.

Version and support

To identify the installed release, open the theme editor and read Theme information. Include that value, the affected page or preview URL, your browser and device, and clear reproduction steps when requesting help.

Contact Firefly Theme support