Product Pages and Merchandising

Firefly’s Product section combines native Shopify product data with reorderable product-information blocks. Build the page around real catalog behavior: the products, variants, selling plans, quantity rules, inventory, media, pickup locations, and apps your store actually uses.

Open the Product template

1. Customize an unpublished Firefly theme.
2. Use the template selector to open Products > Default product, or another product template assigned by the store.
3. Choose representative products from the preview selector. Check a simple product and each materially different catalog type.
4. Edit the Product section and reorder its blocks to match the decision flow.

Product media settings

The main Product section provides:

• Enable sticky product information
• Desktop media size
• Constrain media to screen height
• Media fit
• Desktop layout: Stacked, Two columns, Thumbnails, or Thumbnail carousel
• Desktop media position
• Image zoom
• Mobile thumbnails and Mobile media width
• Mobile media spacing and content spacing
• Hide other variants’ media after selecting a variant
• Loop videos
• Trust badge image, position, and size
• Content color scheme and section padding

Firefly can render native images, external video, Shopify-hosted video, and 3D models. Model/XR controls and media details appear only when the product supplies the corresponding media. Use accurate alt text and a deliberate first media item; customers may encounter it before any gallery interaction.

Product-information blocks

The Product section supports the following blocks:

• App
• Text
• Vendor
• Title
• Price
• SKU
• Inventory
• Quantity selector
• Variant picker
• Buy buttons
• Sticky add to cart
• Reviews
• Description
• Share
• Custom Liquid
• Collapsible tab
• Pop-up
• Rating
• Complementary products
• Payment badges
• Product highlight
• Emoji benefits
• Estimated shipping
• Icon with text

Blocks display only when their required content or Shopify data exists. Keep the Title, Price, Variant picker, Quantity selector where appropriate, and Buy buttons in a predictable sequence. Put secondary explanations after the primary purchase controls.

Variants and option selection

The Variant picker can present options as dropdowns or pills and supports color-swatch presentation where configured. Firefly updates the selected variant’s availability, price, compare-at price, media, quantity rules, and purchase controls from Shopify data.

For step-by-step screenshots and setup rules, see Variant Swatches and Media Grouping.

• Use clear option names such as Size and Color.
• Confirm every option combination points to the intended variant.
• Check sold-out and unavailable combinations.
• If variant-specific media is used, test the Hide other variants’ media setting with each option.
• Do not use a visual swatch that misrepresents the actual product color or material.

Quantity rules and volume pricing

Firefly follows Shopify’s variant quantity minimum, maximum, and increment. When Shopify supplies native volume price breaks or unit-price information, the theme can present those values. Test products with non-default rules directly; do not assume a normal quantity of one applies to every market or customer.

Merchant-entered tier labels, benefits, or captions are explanatory content. They do not create a discount. A savings amount should appear only when supported by a real compare-at price or Shopify’s actual volume pricing.

Selling plans and subscriptions

When a product has Shopify selling plans, Firefly can present plan choices and send the selected plan with the cart line. The theme does not create subscription contracts or plan pricing. Configure plans in Shopify or the responsible subscription app, then test:

• one-time purchase versus each available plan;
• required selling-plan products;
• price and descriptive text after switching plans;
• the selected plan in cart and checkout.

Buy buttons and checkout paths

Buy buttons can add the selected variant and quantity to the cart and can show Shopify’s dynamic checkout button where available. Some blocks or section settings may offer a skip-cart path. The resulting checkout is hosted by Shopify; Firefly controls the storefront selection and handoff, not the checkout layout or payment availability.

Always test a valid selection, missing selection, sold-out variant, quantity-rule failure, required selling plan, and network/server error behavior used by the catalog.

Gift-card recipient form

For gift-card products, Firefly can render Shopify’s recipient fields when that feature is available. Verify the recipient email, name, message, and send date rules configured by Shopify. The storefront product form is separate from the gift card a customer receives after purchase.

Pickup availability

Pickup availability appears only when the selected variant and store locations provide pickup data. The message reflects Shopify’s location configuration; the theme does not reserve inventory or change fulfillment rules. Check variant switches, unavailable locations, and pickup instructions.

Ratings and reviews

The Rating block appears only when valid product rating data exists. The Reviews app block or Reviews content must be backed by a review system and real customer records. Firefly does not generate a default five-star rating.

Use only reviews you have permission to publish. Keep author, rating, content, incentives, and moderation consistent with applicable policy and law.

Complementary and related products

Complementary product blocks and Related products sections rely on Shopify recommendations or app data. Empty recommendations can produce no products; choose a layout that remains coherent in that state. Ensure quick-add and option-selection behavior matches the products returned.

Product claims and supporting content

• Product highlight starts empty. Add only current, verifiable product facts.
• Estimated shipping should be enabled only when the wording reflects actual fulfillment policy, cutoff time, holidays, destination, inventory, and carrier capability.
• Trust and payment badges do not alter payment, shipping, warranty, return, or protection terms.
• Icon, emoji, collapsible, and custom content should not contradict the product record or policies.

Featured product

The Featured product section can place a product purchase experience on another template. It uses many of the same media and product blocks as the Product page. Test it independently because surrounding template sections, available width, and sticky behavior differ from the main Product template.

Product-page test checklist

• Desktop and mobile gallery, zoom, video, model, thumbnails, and variant media.
• Simple and multi-option products; available, sold-out, and unavailable selections.
• Currency and market-specific prices, compare-at prices, and unit prices.
• Quantity minimum, maximum, increment, and native price breaks where used.
• One-time and selling-plan selections where used.
• Pickup availability, gift-card recipient fields, and personalization line properties where used.
• Add to cart, dynamic checkout, sticky add, cart details, and checkout handoff.
• Keyboard order, focus, form errors, zoom, contrast, and narrow layouts.

Continue with Collections, Search, and Product Cards or Cart, Checkout, and Purchase Flow.