How to Build a High-Speed Page for Products With 100+ Variants in Shopify
The Shopify Variant Bloat Problem
Shopify has a limit of 100 variants per product. But even before you hit that limit, products with many variants can cause serious page speed issues. Every variant adds data that needs to load — SKU, price, inventory, images — and when you have 50, 80, or 100+ variants, your product page can become painfully slow.
Page speed directly affects conversion rate. A 1-second delay in load time can reduce conversions by 7%.
What Causes Variant Bloat?
Variant bloat typically comes from selling products with many option combinations. For example, a t-shirt with 5 sizes x 10 colors x 3 fits = 150 variants. When variants multiply across multiple option dimensions, the numbers add up quickly.
Solution 1: Use Funnelish Instead of Shopify's Native Product Page
The cleanest solution for variant-heavy products is to use a Funnelish product page instead of Shopify's native product page. Funnelish pages load independently of your Shopify theme and don't carry the overhead of Shopify's variant JavaScript. You control exactly which variants are displayed and how — keeping your page lean and fast.
Solution 2: Reduce Variants by Separating Option Dimensions
Instead of creating one product with all combinations, split your product into multiple separate products — one per primary option — and let customers choose secondary options at a higher level.
Solution 3: Use Metafields and Dynamic Filtering
For advanced Shopify stores, use metafields to store variant data and JavaScript to dynamically filter and display the relevant options based on customer selections — loading only the variant data for currently visible options rather than all variants at once.
Solution 4: Lazy Load Variant Data
Implement lazy loading for variant images and data — only load variant information when a customer interacts with a selector, rather than loading all variant data on initial page load.
Solution 5: Compress and Optimize Variant Images
Convert all variant images to WebP format, compress them to under 100KB each, and use lazy loading so images only load when they come into the viewport.
Measuring Your Page Speed Improvements
Use Google PageSpeed Insights or GTmetrix to measure your page speed. Aim for a Largest Contentful Paint (LCP) under 2.5 seconds on mobile.
Fast Pages, Better Conversions
Browse our Funnelish funnel templates — all built with performance in mind, designed to load fast even on slow mobile connections.
Frequently Asked Questions
Why does having too many Shopify variants slow down my product page?
Every Shopify variant adds data that must load with the page — SKU, price, inventory level, and variant images. For products with 50-100+ variants, this data payload becomes significant, increasing page load time. Since a 1-second delay reduces conversions by approximately 7%, variant-heavy pages can meaningfully hurt funnel performance for paid traffic.
What is Shopify's variant limit and what happens when I reach it?
Shopify limits products to 100 variants maximum. If your product option combinations exceed 100, you'll need to split into multiple products by primary option (e.g. one product per color or flavor), use a third-party app that handles extended variants, or restructure your option dimensions to stay within the limit.
How does using Funnelish instead of Shopify's product page solve the variant speed problem?
Funnelish product pages load independently of your Shopify theme and its variant JavaScript overhead. You choose exactly which variants to display and control how variant data loads, keeping the page lean. Funnelish pages are also built for conversion-focused paid traffic, with faster load times than typical Shopify theme product pages.
What is the best way to reduce variant count without limiting customer options?
Split products by primary option dimension. Instead of one product with Size x Color x Quantity combinations, create separate products per flavor or color with quantity options as variants. Customers see the same choices but variant counts per product drop significantly.
How do I optimize variant images for faster page loading?
Convert all variant images to WebP format (40-60% smaller than JPEG), compress each to under 100KB, and size them to the maximum displayed dimensions. Implement lazy loading so variant images only load when a customer selects that variant or the image enters the viewport, rather than loading all variant images on page load.
What page speed score should I target for a high-converting Shopify product page?
Target a Google PageSpeed Insights mobile score of 60+ (ideally 80+) and a Largest Contentful Paint (LCP) under 2.5 seconds on mobile. LCP is the metric most correlated with conversion rate on product pages. Use GTmetrix or PageSpeed Insights to measure before and after making variant or image optimizations.