Create custom product options with image display on hydrogen

[LuLue7775]

I now trying to add custom variants. Shopify backend provides very limited options (text only), but I need some variants with numers selection, images displays along with variants. What's the most elegant way doing this?

[jamalsoueidan]

Are you using hydrogen or liquid?

[LuLue7775]

Hi, I'm using hydrogen.
I was trying to POST custom attribute with GraphQL and seemed like it did create extra key value paired attribute, but I couldn't find that attribute on shopify backend

I just want to take in a customers' customization option in text form (let's say, customers' name) on the hydrogen frontend.

Here's what I did
https://community.shopify.com/c/shopify-scripts/shopfront-hydrogen-custom-cart-attribute-post-to-shopify-backend/td-p/2078537

[LuLue7775]

I just solved the issue. I need to put that in lines array

              <AddToCartButton
                attributes={{
                  key: 'cart_attribute',
                  value: 'This is a cart attribute',
                }} // This won't be passed as single item data. Which makes sense...  
                lines={[
                  {
                    merchandiseId: selectedVariant.id,
                    quantity: 1,
                    attributes: [
                      {
                        key: 'CUSTOM NAME',
                        value: 'LU',
                      },
                    ],
                  },
                ]}
                variant="primary"
                data-test="add-to-cart"
                analytics={{
                  products: [productAnalytics],
                  totalValue: parseFloat(productAnalytics.price),
                }}
              >
               //...

[LuLue7775]

However, back to the question...
If this is an product option that needs to display image(demo of that particular option), what's the best practice doing so?
Since the adminstrator of this shop need to upload images for different products, whose options are different from product to product

[juanpprieto]

Hi @LuLue7775

To attach custom data to product variants you could create and link up metafields to the Product Variant. My recommendation is to create a metafield which references a metaobject. The metaobject could then contain all the extra fields you want for a given variant.

Here are some screens to get you there:

You could then query the metafield and the metaobject refernce when querying each variant (or Product).

Here is some basic example queries for metaobjects to get you started.