How we solved Shopify’s product grouping challenge with a custom “parent-child” setup

Understanding the Core Problem

One of Shopify’s main limitations is the lack of a native 'grouping' feature that allows multiple individual products to be displayed as a single listing in a collection. This presents challenges for stores that offer products with multiple variations, such as different colors but want each variation to have its own product detail page. Shopify’s standard setup and third-party apps available in the Shopify App Store present product variations in two primary ways:

1. All colors as variants of a single product

This keeps the collection page uncluttered but limits the ability to have unique product pages for each color. However, SEO opportunities are reduced since all variations share a common URL.

2. Each color as a separate product

This allows for independent product pages, offering unique content and metadata per variant. However, it creates a messy browsing experience with multiple identical listings appearing in the collection view. Also, users can be confused when seeing multiple color variants as separate items.

We needed a hybrid solution that allows for distinct product pages per color while keeping the category page visually streamlined.

source: shopify.com

Exploring Shopify’s Limitations

Before we developed our custom solution, we experimented with a few workarounds.

1. Custom liquid logic

We tried to use Shopify’s Liquid templates to dynamically group products but quickly encountered several limitations. Liquid does not support converting JSON strings into objects or lists of objects, making it impossible to parse and manipulate structured data efficiently. Additionally, dynamic operations like appending or removing elements from lists do not work as expected, as Liquid only allows such operations on strings. Moreover, the where Liquid filter cannot be used to compare non-string values, making it challenging to filter collections based on numeric or boolean attributes.

A clear example of this limitation is trying to filter products by ID within a collection. In our case, this functionality was essential, but Shopify's Liquid language does not support the where filter for checking whether a product ID exists in a list of IDs.

assign filtered_products = collection.products | where : "id", id contains in unique_products

Since Liquid does not support this type of comparison, we couldn’t dynamically filter product lists. While JavaScript could handle these tasks on the frontend, doing so would break Shopify’s pagination, as filtering products client-side would result in fewer than the expected number of items being displayed per page. These restrictions forced us to look for a more robust backend solution.

2. Metafields and tag-based filtering

Based on our previous experience, we already knew that filtering products using the where filter only works for simple string comparisons, making more complex conditions impossible to implement. We initially thought of adding a metafield like hidden=true and filtering products using a simple where condition. However, this approach introduced a major issue when used alongside Shopify’s filtering system.

For example, if a red scarf was visible in the collection while a white one was marked as hidden, selecting the white color in the filter would show no results. Although the filter suggested that white products were available, they remained hidden and did not appear in the collection. This created a confusing user experience where customers could see filtering options but were unable to view all the expected products.

3. Displaying only “Primary” products in collections

When displaying products in the collection view, we initially chose to show only one representative product per color family to reduce clutter. However, this method caused problems with filtering. Since only the primary product was added to the collection, filters did not display colors that were not explicitly included in the collection. To address this issue, the filtering system would need to be modified to accommodate this custom approach, ensuring that all color variations are correctly displayed. However, implementing such changes would require significant customization of Shopify’s filtering logic, which could be complex and difficult to maintain. Due to these potential complications, we decided to explore an alternative solution that would provide a more seamless and scalable approach to product grouping.

Our Custom “Parent-Child” Product Model

To keep the collection page tidy while offering individual product pages, we introduced a parent-child product structure (similar to the 'simple' and 'configurable' product approach in Magento 2).

1. The “Parent Product” concept

We designate a single “parent” product that appears in the collection. This parent product contains all possible color and size variants to ensure that the filtering mechanism works correctly. It displays swatches (color options) and available sizes, allowing users to quickly identify different variations.

Below are screenshots showing the variant configuration settings for both the parent product and child product.

“parent” product:

“child” product:

2. Linking via Metafields

In Shopify, you can store extra information in metafields. The parent product has a metafield that contains a list of product objects representing each color variation declared in the product's color variants. Furthermore, each child product also has a metafield specifying which color it represents. Thanks to this, we can determine which product from the list of products corresponds to each color variation in the parent product's variants.

This ensures all color options are properly indexed, allowing the filtering system to work seamlessly and providing customers with accurate product selection.

3. Smooth inventory synchronization

Since each child product has its own inventory, we needed a way to keep everything synchronized. To achieve this, we developed a custom Shopify app that listens for webhooks triggered by inventory updates, such as manual stock changes or customer orders. Whenever the stock level of a child product changes, the parent product’s metafield data is updated accordingly, along with any other linked products. This ensures that stock availability remains consistent across the store, preventing mismatches and improving the accuracy of displayed inventory.

4. Setting a default child product

We added an extra metafield in the parent product specifying which child product is “default”. This default product serves two main purposes:

1. Redirect: If someone clicks the parent product URL or lands on it directly, we redirect them to the default child product page.

2. Default display: On the collection page, we show images and other details from this default product, so users get a consistent view of the item they’re most likely to buy. Below are screenshots showing the metafield settings for both the parent product and child product.

“parent” product:

“child” product:

Additionally, the following screenshot displays the collection page, where two products with multiple color variants are shown after implementing our custom solution. This demonstrates how the parent-child structure ensures a clean and organized product display while maintaining full variant functionality.

Advantages of the Parent-Child Model

1. Cleaner collection view - Customers see just one listing representing all color variants, reducing clutter.

2. Better filtering - Because the collection has a single “parent product” with product colors and size variants filtering doesn’t break. You can still straightforwardly display color options, referencing each child product in the background.

3. Easier inventory management - Our custom app and webhooks keep every product’s stock consistent, so there’s no confusion about which colors or sizes are actually available.

4. Consistent User Experience - Clicking on any swatch seamlessly redirects to the correct product, allowing customers to browse every color in one place while retaining separate detail pages.

Impact on SEO and Conversions

1. Benefits for SEO

- Unique URLs for each color

Each color (child product) has its own unique URL, making it easier for search engines to index specific color variations like “red [product name]” or “blue [product name].” This improves search visibility and makes it more likely that customers searching for a specific color will find the right product.

- Improved internal linking

The parent product effectively becomes a central hub linking to various child products. This enhanced internal link structure can help search engine crawlers better understand your site’s organization.

2. Conversion Advantages

- A smoother user experience

A single parent item in the collection avoids visual clutter. It’s easier for shoppers to navigate and find the color they want, which can boost conversions.

- Unique landing pages for each variant

Each color-specific product page can be customized with a description, images, or other information matching that color. This personalization can improve engagement and purchase likelihood.

- Clear, consistent inventory

Since each product maintains its own stock but remains linked to the parent product, inventory is always accurate. This prevents customers from seeing out-of-stock colors or running into mismatched availability, reducing frustration and abandoned carts.

- Shorter path to purchase

From the collection page, users can immediately see color swatches, select a color, and be taken to the corresponding product page. This makes the buying process faster and more seamless.

Potential SEO Challenges

- Duplicate or thin content

If all child products share the same description with only color words changed, search engines might see them as duplicates. Provide unique info or angles (e.g., styling tips for each color) to distinguish them.

- Meta tags & structured data

Each child product needs its own meta title, meta description, and possibly unique structured data. If all child pages share identical tags, any SEO benefits can be reduced.

- Redirects & indexing

Another consideration is how redirects and indexing are handled. If the parent product redirects to the default child product, a clear strategy is necessary. Should the parent page be indexed at all, or should it have a canonical link pointing to a specific child product? Alternatively, should each child product function as a fully independent page? These decisions impact how search engines understand and rank the product pages, influencing overall visibility and search performance.

source: shopify.com

Conclusion

Our solution introduces the concept of a “parent product” linked to multiple “child products”, which keeps the collection view clean and ensures that filters work properly. This approach prevents customers from being overwhelmed by too many color entries in the collection while allowing them to easily see all available colors and sizes in one place.

This solution is ideal for merchants who want separate product detail pages for each color while maintaining a grouped look on the category page. By implementing this model, stores can improve user experience and enhance SEO, ensuring better product organization and seamless navigation for customers. Looking ahead, we plan to expand our custom app to introduce automated management of all metafields necessary for this approach. This development will streamline the process, reducing manual effort and ensuring that all product relationships and filtering mechanisms work smoothly and efficiently.

Want to take your Shopify store even further? Personalize your checkout with Hatimeria’s app – colors, fonts, and branding, all in your control.

If you're looking to optimize your Shopify store with a structured product grouping system, reach out to our team for expert guidance and development support.