I’m using MetafieldsGuru and I ran into a very strange problem, where certain types of metafields (the 3 types of text) are not rendering at all for product or product variants while the rest work fine. I followed this tutorial step by step but… somehow it’s not working for me. I’ve checked my code several times and there’s no typos, I experimented with adding and removing “.value” at the end of my variable, iterated through variants for my product, assigned a variable for product.selected_or_first_available_variant, nothing changes the outcome.
First of all, I’d like to point out that this issue is not related to our awesome app. We always aim to deliver the ultimate user experience, so it’s important for me to make sure that it won’t be affected by any third-party issues. Not trying to be mean or anything like that, just making sure that a minor problem caused by your custom code (spoiler ) won’t ruin our app for you.
Now let’s see your specific problem in details. Let’s start with some boring theory/basics. The metafields are a Shopify feature that provides users with an extra space to store additional data used in various custom apps and themes, and they don’t affect either the storefront or functionality of a website. Nor does our app as it was designed for backend data management as well. What does affect the storefront is the custom Liquid code used to display the metafields content on the product page. When it comes to metafields usage in terms of custom Liquid code snippets, all you need to know is a metafield consists of four main components:
namespace,
key,
value,
type
Namespace is used to group different metafields (something like a folder or a logical container); key is a unique identifier to reference the information stored in metafields; value contain the data itself; and type represents the data type for a specific metafield: string, number, reference etc. In order to display a metafield at the storefront with Liquid, one should use a specific pattern:
{{ resource.metafields.namespace.key.value }}
That’s a really important part of custom functionality development, as the slightest mismatch between the namespace and key combinations (or even a type) used by the custom Liquid snippet and your actual metafields will prevent them from being grabbed by the Liquid code snippet. I didn’t find the variant with matching metafields (I checked all 4 of Bamboo Compression Socks’ variants), so I’m going to try and guess what’s going on. To my understanding, you’re trying to display the variant metafields on the product page. There is a couple of key things you may want to check:
Both namespace and key in the variant description metafield on your store spell “variant_description”:
If you look closer at these two code snippets, you’ll notice that the namespace in your actual metafields is different compared to the metafield namespace used in your code pattern. Which is definitely not great as it breaks the code pattern I mentioned earlier. You may want to try changing the variant metafield’s namespace from “variant_description” to “description” and see if it helps. Also, there’s no “shopping.img” metafileds for the product variants (see the screenshot above) or “description.variant_description” metafield for the parent product:
I guess that these two metafields won’t show up as they simple don’t exist.
The “selected_or_first_available_variant” variable might not work quite as you expected because of the peculiarities of Liquid. Liquid is preprocessed (compiled), so it can’t track the changes after the code it generates is sent to the browser. In other words, the aforementioned attribute returns the first available variant until the page is refreshed. Once you refresh the product page, it will parse the active variant ID based on the product URL and your code should display the correct metafield value. However, refreshing the product page every time a different variant is selected doesn’t seem to be the best solution. You may want to refer to this thread for a possible solution.
Oops, I just realised I sent the wrong screenshot. In real life the namespace was just description.
Thanks for the time you took to reply and sorry, you’re right, the mistake had nothing to do with your app! The problem was about the fact that even though I would click on preview button of a specifically product (for the US market), I would get redirected to the same product page but for Europe (which is where I am right now). That’s why my metafields for the products specific for the US were not rendering (duh).
) won’t ruin our app for you.
