How To Show Size Variants On Collection Page In Be Yours Theme

Topic summary

Goal: show size variants and sold‑out status directly on collection/featured collection pages (e.g., TOPS, NEW ARRIVALS) in Be Yours, without color swatches or hover (mobile-friendly).

Status/positions:

  • Customization is required; out-of-the-box app suggestion (color swatch hover) isn’t suitable for mobile.
  • Alternatives proposed: different apps for size display, custom development, third-party plugins, or showing sizes/stock on the product card.

Technical approaches shared:

  • Basic Liquid edit: in product-grid-item.liquid, output a variant option line (likely too limited; shows first option/variant only).
  • Advanced Liquid + JavaScript: header script to add to cart via AJAX and product-card/grid-item markup that loops size values, marks sold-out with a CSS class, and enables click-to-add for available sizes.

Open questions/issues:

  • Multiple users ask where exactly to paste code and which theme files to edit; confusion persists, especially for Dawn vs Be Yours file names.
  • Image examples illustrate desired “size swatches below price.” A video tutorial was linked for showing all variants and prices on collection pages.

Outcome: no confirmed, theme-specific solution accepted. Discussion remains open pending precise implementation steps for Be Yours and clear file locations.

Summarized with AI on January 7. AI used: gpt-5.

This video shows a neat way to display every variant and price of products on your Shopify collection pages.