How can I find the code for custom 'fake' product variants in a Shopify store?

Store Design
, ,
1

Hi all,

I’ve taken over the maintenance of a Shopify store for a client and need to make some updates to the store. However, when the store was created it seems the builder constructed the site using “fake variants”. What I mean by that is instead of using the “actual” variants in Shopify, they have some custom…something…running that looks at all the products in a collection and then displays each individual product as a variant pill on each product page.

When I look at the product template code here are the two sections at play.

“variant_picker”: {
“type”: “variant_picker”,
“disabled”: true,
“settings”: {
“picker_type”: “button”
}
},
“71248ca7-2055-41ce-96a5-9f11a2b5f274”: {
“type”: “product_variant”,
“settings”: {
}
},

The first section is the standard Variant Picker from the Theme (Dawn 9.0.0…yes updating the theme is part of the work I need to do, but the update breaks this functionality). However as you can see this is disabled (hidden on the template builder page).

The second “bit” here (part in bold) is the section that generates the “fake” variant pills.

I need to find this code but can’t. There is nothing I can see in the Sections area of the theme and nothing in the Snippets either. If I disable/remove this code it goes away on the page previews, so I know this is at least the bit driving the “feature”. When I’m in the theme, and click to “add a section” this fake thing does show up as Product Variants (as opposed to the standard Variant Picker).

Any thoughts on how to find where the heck this code is? Or, is this some odd ball “fuction” of the old version of the Dawn theme?

Thanks!

-J

2

Hi J,

The second part, "71248ca7-2055-41ce-96a5-9f11a2b5f274" appears to be an ID of a section or block that would have been added through the admin. If you can look at this particular product template in the theme editor, then you should be able see what the section is. If you can identify the section, then you may just need to follow the trail of crumbs via the code to see where this is at. The only thing I could see here that you might to be able to search within the code base is: “type”: “product_variant”. If you are editing this code in a code editor like Sublime or VS Code, you should hopefully be able to track this down, but if you are using the Shopify Code editor, it may be a little bit harder. Something I like to do is try to find the closest element using inspect element, copy and paste classes or an ID and search that way.

The “fake variants” is a very common thing done for products in Shopify, because it a) Helps avoid the 100 variant limit, and B) Allows you to merchandise different variations of products on the collection page.

Hope some of this was helpful.

3

“you may just need to follow the trail of crumbs via the code to see where this is at”

Yeah…that’s what I had to do. Basically had to run a Diff on the entire them and then track down all the “changes”. Would have been SO much easier if there were just a few comments in the code here/there.

Thanks for the suggestions.

-J