Custom code for products Shopify

Ask the community
1

How do I refer to an element within the product list on funnelish?

I have variants listed within each product for the product list. I need to refer to the variant (extract) the value of the selected variant and pass this to Shopify as an order.

Essentially have a x1, x2 and x3 bundle. With 3 different sizes. The x1 I can map the product to Shopify to process orders. The x2 and x3 I can’t because they can pick size of each one.

Any solutions highly appreciated

2

Hey @Coder,

You actually don’t need to write custom code to extract those variant values and pass them to Shopify. Funnelish has a built-in way to handle complex bundles (like an x2 or x3 pack where the customer picks different sizes for each item).

Instead of using a custom script, you can handle this directly in the Shopify App settings within your funnel:

  1. Go to your Funnel Apps > Shopify > Automations.
  2. Create an automation for your x2 or x3 bundle product.
  3. Use the Bundle/Sub-products mapping feature. This allows you to map the single Funnelish bundle product to multiple individual Shopify products or variants.
  4. Make sure “Enable dynamic variants” is toggled on. As long as your variant names in Funnelish match the variant titles in Shopify, Funnelish will automatically grab their selections and pass them to the Shopify order.

If you still absolutely need to target the elements via code for another custom reason:
The product list items use the .pl-item class, and the variant dropdowns or options are typically housed within .pl-variants and .pl-variant-selector. You can use a standard change event listener in your Custom JS to grab the value of those selectors when a user interacts with them.

But definitely try the native Shopify bundle mapping first—it handles the API side for you and is much more stable! Let me know if you run into any snags setting up the automation.