PlantScraper: Other recommended variants

Goal

Show the correct recommended products for the exact variant the shopper selected.
If that variant has its own recommendations (stored in the variant metafield), show those.
If not, fall back to the product-level recommendations.
When the shopper changes variants, the list updates automatically.

How it decides what to show

  1. Look at the selected variant.

  2. If that variant has a list in custom.step_recommend, show those items.

  3. If that variant’s list is empty, look at the product.

  4. If the product has a list in custom.step_recommend2, show those variants instead.

  5. If neither metafield contains items, no recommended product variants are displayed.

What you create in the Shopify admin

Do these steps once, if not already created

1. Create the Metaobject type

  • Content → Metaobjects → Add type

  • Name: Recommended product

  • Fields:

    • Product – Type: Product (required)

    • Optionally, any other supporting fields like Notes or Tags

(If you already use another metaobject type that links to products, you can reuse it.)

2. Add metafield definitions for Variants

  • Settings → Custom data → Variants → Add definition

    • Name: Recommended Products (variant level)

    • Type: List of product variant → Recommended product

    • Namespace and key: custom.step_recommend

3. Add metafield definition for Products

  • Settings → Custom data → Products → Add definition

    • Name: Recommended Products (product level)

    • Type: List of product variant → Recommended product

    • Namespace and key: custom.step_recommend2

Add the content

You will do this whenever you want to control what product variants appear in the “Recommended Add-ons” carousel.

 

Attach the entries to a variant or product

  • If a single variant needs its own unique recommendations:
    Go to Products → Variant details → scroll to Metafields → fill Recommended Products (variant level) with your chosen entries.

  • If the same recommendations apply to the entire product:
    Go to Products → Product details → scroll to Metafields → fill Recommended Products (product level) with your chosen entries.

 

Variant with its own recommendations

  • Pick a variant that has entries in custom.step_recommend

  • Expected: Those recommended products appear

  • Switch to another variant

  • Expected: The list updates or disappears if the new variant has none

Product-level fallback

  • Clear custom.step_recommend on the variant

  • Fill custom.step_recommend2 on the product

  • Expected: Product-level recommendations appear

No metafields

  • Leave both metafields empty

  • Expected: The section does not show any recommendations

Common mistakes and how to fix them

Problem Fix
Nothing shows at all Make sure the snippet or block is on the correct product template and saved.
Wrong metafield keys Double-check the exact keys: custom.step_recommend and custom.step_recommend2.
Entries created but not visible Creating a metaobject entry isn’t enough — you must also link it in the product or variant metafield.
Recommendations don’t change when switching variants Ensure the provided JavaScript is included; it reloads the block dynamically when variants change.
Carousel doesn’t slide Confirm Splide is loaded in your theme (it’s used to power the slider).

Owner quick reference

  • Variant has its own recommendations: use custom.step_recommend

  • Product has shared recommendations: use custom.step_recommend2

  • Nothing filled: section stays hidden

For curious minds

  • The code checks product.selected_or_first_available_variant to determine which variant is active.

  • JavaScript listens for Shopify’s variant:change event to reload the snippet when the customer picks another variant.

  • The HTML uses <details> and <summary> to create the clickable accordion.

  • The product list is rendered inside a Splide carousel that updates live.