Home Page and Content Sections

Firefly’s home page is a JSON template made from reorderable sections. Start with a small content hierarchy, then add only the sections that help customers understand the store, evaluate products, or take a useful next step.

Edit the home page

1. In Shopify Admin, open Online Store > Themes and customize an unpublished Firefly copy.
2. Use the template selector to open Home page.
3. Add, remove, reorder, hide, and configure sections in the left sidebar.
4. For every section, check its Color scheme, desktop and mobile layout, content alignment, image crop, spacing, links, and empty states.
5. Preview the page with real products, collections, images, and copy before publishing.

Initial home-page composition

A fresh Firefly home template starts with the following sequence:

1. Slideshow
2. Horizontal Ticker
3. Comparison table
4. Icon bar
5. Vertical ticker
6. Horizontal Ticker
7. Results
8. Testimonials
9. Contact form

This is a starting composition, not a required layout or a complete section list. Replace sample copy and remove sections that do not have accurate, useful content.

Hero, slides, and media

Hero

Hero supports desktop and mobile images, an optional second image, stacking images on mobile, desktop/mobile section height, overlay treatment, content positions, an optional content container, mobile text-below behavior, and mobile full-width buttons. Heading, Text, and Button blocks let you assemble the message. Keep the primary heading specific and ensure the image remains understandable at both crops.

Slideshow

Slideshow provides layout, desktop/mobile height, pagination style, auto-rotation, change interval, mobile content-below behavior, and an accessibility description. Each slide can have desktop/mobile images, heading, text, button, positions, overlay, and color scheme. Avoid placing essential information only in an auto-rotating slide; reduced-motion preferences and customer interaction can stop autoplay.

Image/video slider

This media carousel supports desktop/mobile aspect ratio, direction, full width, loop, autoplay and speed, center/fade/adaptive-height options, arrow and dot controls, color scheme, slide counts, and spacing. Test a mixed media set on narrow screens and confirm every video has an understandable poster or adjacent label.

Before & After slider

Choose Before and After images, starting divider position, image fit, labels, label/divider color schemes, and desktop/mobile placement and height. Use comparable, authentic images captured under conditions that make the comparison fair. Do not imply a result the images do not substantiate.

Video

The Video section accepts Shopify-hosted video or a YouTube/Vimeo URL, plus a cover image, autoplay, loop, and desktop/mobile aspect ratio. Browser autoplay policies can require muted playback or customer interaction.

Editorial layouts

Image with text and Multirow

Use these for benefits, process steps, brand stories, or category introductions. They provide desktop/mobile image placement, content order and alignment, widths, gaps, padding, schemes, and action content. Keep each row focused on one idea and avoid repeating the same heading structure across too many consecutive sections.

Collage

Collage combines Image, Product, Collection, and Video blocks. Configure the large-block side, mobile layout, row height, gaps, content padding, card style, and color scheme. Check that every visual block has a meaningful destination or description.

Rich text

Rich text is suitable for short introductions, announcements, policy summaries, or calls to action. Use its alignment, width, scheme, spacing, heading, text, and button controls rather than placing long unstructured copy in a hero.

Commerce and discovery sections

Featured collection

Select a collection, product count, desktop/mobile columns, carousel or swipe behavior, View all link, image ratio, second-image, vendor, rating, and quick-add options. Ratings appear only when products have valid rating data. Multi-variant products may require an option-selection step instead of immediate add.

Featured product

Featured product uses the selected product’s media and product-information blocks. Configure it with the same care as the main Product template, especially variants, selling plans, quantity rules, availability, and add-to-cart behavior. See Product Pages and Merchandising.

Collections grid

Collection blocks can use a selected collection, custom image, and custom title. Set columns, description visibility, full-width layout, View all behavior, mobile swipe, scheme, and spacing. Use consistent image crops so the grid remains stable.

Featured blog

Select a blog and configure post count, columns, image ratio, date, author, excerpt, View all, color scheme, and responsive spacing. Articles without featured images should still make sense in the chosen layout.

Bundle deals

Add up to five Product blocks and set each default quantity. Section controls include price updates when variants change, combined price display, optional checkout handoff, cart opening after add, labels, campaign note, layout, alignment, and responsive spacing.

Bundle deals adds the selected variants and quantities. It does not create a discount from promotional copy. Eligible automatic discounts are applied by Shopify in cart or checkout, and displayed prices must follow the actual selected variants and quantities.

Related products

Configure product count, columns, image ratio, vendor, rating, and mobile grid or swipe behavior. Recommendations appear only when Shopify returns products for the current product context.

Structured content and proof

Feature grid and Icon bar

Use these for concise differentiators, services, materials, or guarantees that the business can support. Controls cover desktop/mobile alignment, columns, swipe behavior, cards, icons/images, links, schemes, and spacing.

Comparison table and Comparison

Comparison table pairs benefit rows with featured and alternative values, plus logos and separate cell schemes. Comparison builds textual First, Featured, and Comparison columns. Use neutral, current criteria; identify what is being compared and retain evidence for objective claims.

Results

Results blocks can present a percentage, caption, and evidence link. Publish a result only when there is a genuine study or data source. State the sample, method, period, and material conditions near the claim or through a clear evidence link.

Testimonials

Testimonials support rating, image, review, avatar, author, and context. Use real, authorized customer content. Do not create a rating or customer identity for visual completeness.

Pricing table

Pricing table presents merchant-entered plan names, price text, benefits, and calls to action. It is display content; it does not create Shopify products, subscription plans, selling plans, or checkout prices.

FAQ and Collapsible content

FAQ uses Question and Answer blocks. Collapsible content offers icon, heading, rich content, or selected Page content, plus container and image-layout options. Write questions in customer language and keep important policy terms visible and linked to the full policy.

Engagement and utilities

• Newsletter and Email signup banner use Shopify customer forms. Configure content, button type, width, alignment, images, and scheme.
• Contact form supports form layout, phone visibility, button layout, content, alignment, scheme, and spacing.
• Horizontal Ticker and Vertical ticker provide repeated motion/text treatments with speed, typography, layout, and accessibility controls.
• Page content renders the selected Shopify Page content in a section.
• Order support links customers to Shopify account/order resources and a merchant-selected contact page; it is not a third-party tracking lookup service.
• Custom Liquid, Custom section, and Apps provide extension points. Their merchant code or third-party output can alter accessibility, performance, and styling.

Build a useful page rhythm

1. Open with the primary value proposition and one clear action.
2. Follow with product/category discovery.
3. Answer the strongest purchase questions with evidence, comparison, or structured content.
4. Present verified social proof only where it adds context.
5. End with a useful next action such as a collection, FAQ, newsletter, or contact path.

Check the final page in all four Theme styles and any custom-brand path used by the store. Revisit images, buttons, icons, borders, overlays, contrast, motion, and section spacing on desktop and mobile.

Next: configure Product pages and merchandising.