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.

[meisbellajack]

If you don't want to manually build a custom schema mapping pipeline or state management engine in React from scratch, you can let an established app handle the backend configuration logic while keeping your storefront entirely headless.

You can implement a custom options engine by utilizing our app, Misk Variant & Product Options. Built to support modern API configurations and flexible schemas, Misk allows you to assign infinite visual color swatches, number layout parameters, image upload fields, and conditional rule arrays directly to your catalog. You can expose this structured configuration payload effortlessly to your Hydrogen frontend layouts, keeping your code exceptionally clean, blazing fast, and infinitely scalable!