Collections, Search, and Product Cards

Collections and search help customers narrow the catalog. Firefly presents Shopify’s products, filters, sorting, pagination, and predictive results; it does not create catalog data or filter definitions by itself.

Collection banner

The Collection banner can show the collection description and image. Configure:

• Show collection description
• Show collection image
• Desktop and mobile image position
• Desktop and mobile image height
• Desktop and mobile content alignment
• Color scheme and padding

Write the description in the Shopify collection record. Check long copy and tall images on mobile; the banner should introduce the category without pushing the first products unnecessarily far down the page.

Collection product grid

The Product grid provides:

• Products per page
• Desktop and mobile columns
• Image ratio
• Second image, vendor, rating, and quick-add controls
• Enable filtering
• Desktop filter layout: Horizontal, Vertical, or Drawer
• Enable sorting
• Desktop/mobile grid spacing, Color scheme, and padding

Filtering appears only when Shopify returns collection.filters for the current collection and market. Configure filter sources in Shopify, then test each value against real products. If no filters appear, enabling the theme setting alone is not enough.

Quick add is a section-level option. A simple product can be added directly when Shopify allows it; a product requiring variant or selling-plan selection may open or link to a selection interface instead.

Collections list

The collections-list template includes sorting, image ratio, desktop/mobile columns, collections per page, heading alignment, scheme, spacing, and padding. Sort options include alphabetical order, date order, and product count. Provide a useful image and description for each collection because an empty record cannot be improved by layout settings alone.

Search results

Firefly’s Search template can present products, articles, and pages. Settings include:

• Results per page
• Desktop and mobile columns
• Product image ratio
• Vendor, rating, and quick-add controls
• Filtering and sorting
• Horizontal, Vertical, or Drawer filter layout
• Article date and author display
• Grid spacing, Color scheme, and padding

Test product-only, article-only, mixed, empty, and paginated searches. Search result quality and resource eligibility are controlled by Shopify’s search system and store content.

Predictive search

Header predictive search uses global Theme settings:

• Enable predictive search
• Show vendor
• Show price

Predictive search is a fast suggestion surface, not a replacement for the full results page. Check keyboard navigation, focus return, long product names, no-result queries, and prices in every active market.

Product-card settings

Global Product cards settings control Style, Image padding, Text alignment, Color scheme, border thickness/opacity, corner radius, and shadow opacity/offset/blur. Individual sections decide whether to show the second image, vendor, rating, or quick add.

Use a consistent image ratio and source photography. Adapt-to-image preserves each source ratio but can produce uneven rows; fixed ratios crop to a uniform frame. Verify focal content at desktop and mobile widths.

Collection and blog cards

Collection cards and Blog cards have their own global style, image padding, alignment, scheme, border, radius, and shadow controls. Editing Product cards does not automatically make these other card types identical.

Ratings, badges, and prices

• Ratings appear only when the product has valid rating data and the section enables rating display.
• Sold-out and sale badges follow global Badge settings and current Shopify product/variant price and availability data.
• Sale text can use the configured placeholder, but a sale must still be supported by actual price data.
• Currency-code display follows the global Currency format setting and Shopify’s formatted money values.

Troubleshooting filters

1. Confirm Enable filtering is on in the Collection or Search section.
2. Confirm Shopify has filter definitions and returns values for the current catalog, market, and result set.
3. Test an unmodified unpublished Firefly copy to rule out custom Liquid, app output, or CSS.
4. Try a collection with products that actually contain the relevant option, vendor, availability, price, or metafield values.
5. Check mobile Drawer and desktop layout separately.

Review checklist

• Collection description/image, product count, pagination, empty collection, and unavailable products.
• Every filter value, clear-all action, sorting option, URL state, back navigation, and no-results state.
• Quick add for simple and multi-variant products.
• Product cards with long titles, no image, sale, sold out, rating, vendor, and different currencies.
• Keyboard navigation and visible focus in filter drawers, sorting, pagination, and predictive search.

For cart behavior after quick add, see Cart, Checkout, and Purchase Flow.