Variant Picker in "Featured Product" is not working

[MaCopine]

Hello Community,

I have a product with 3 Variants which I want to integrate in a landing page.
Unfortunately the variant picker isn't showing.

See: https://macopine.de/pages/ma-copine%C2%AE-x-fabia-bengs-color-edition

I tried it out in an updated version of my theme "north" and it is working on there. Unfortunately I can't do an update because of some manual changes in the code.
But suprisingly both codes for the variant picker (old and new theme version) are the same.

I really don't know what to do.

The code seems to be right but it won't show the variant picker: That's the code

[Gabe]

Hey @MaCopine 

Thanks for the link and you have reached the German community but we chat in English too that's no probs! 

My first question would be if you could paste the actual code itself here so I can run and debug it? However, debugging the code with regard to the North theme and its updates won't really be possible as the theme updates are quite complex and internal:

Have you spoken to the theme developers? And can you pinpoint the variant-picker code in the Chrome Developer Console by any chance?

[MaCopine]

Hallo,

danke für die Antwort!!

Habe den Code und den Screenshot (Google Developer Console - hoffe das passt, kenne mich da nicht all zu gut aus)


Im Folgenden der Code der gesamten Seite:

Spoiler

{
"sections": {
"main": {
"type": "main-page",
"disabled": true,
"settings": {
}
},
"4afc18ae-14a3-4e76-95ae-366f9ab686e2": {
"type": "image-with-text-overlay",
"settings": {
"bg_image": "shopify:\/\/shop_images\/Unbenannt-12_31da41c6-a84c-46ac-a91c-0b3f4cab2065.jpg",
"bg_image_mobile": "shopify:\/\/shop_images\/handyverison2.jpg",
"parallax": false,
"desktop_height": "desktop-height-650",
"mobile_height": "mobile-height-350",
"vertical_alignment": "content-middle",
"text_alignment": "center",
"overlay_color": "#000000",
"overlay_opacity": 11,
"disable_top_spacing": true,
"disable_bottom_spacing": true
}
},
"68ce3945-3cf7-48b2-af49-d371d03a738a": {
"type": "featured-product",
"blocks": {
"template--19569972216140__68ce3945-3cf7-48b2-af49-d371d03a738a-title-1": {
"type": "title",
"settings": {
"uppercase": true
}
},
"template--19569972216140__68ce3945-3cf7-48b2-af49-d371d03a738a-price-1": {
"type": "price",
"settings": {
}
},
"template--19569972216140__68ce3945-3cf7-48b2-af49-d371d03a738a-description-1": {
"type": "description",
"settings": {
}
},
"template--19569972216140__68ce3945-3cf7-48b2-af49-d371d03a738a-variant_picker-1": {
"type": "variant_picker",
"settings": {
"color_picker": true
}
},
"template--19569972216140__68ce3945-3cf7-48b2-af49-d371d03a738a-buy_buttons-1": {
"type": "buy_buttons",
"settings": {
"show_quantity_selector": true,
"show_dynamic_checkout": true
}
}
},
"block_order": [
"template--19569972216140__68ce3945-3cf7-48b2-af49-d371d03a738a-title-1",
"template--19569972216140__68ce3945-3cf7-48b2-af49-d371d03a738a-price-1",
"template--19569972216140__68ce3945-3cf7-48b2-af49-d371d03a738a-description-1",
"template--19569972216140__68ce3945-3cf7-48b2-af49-d371d03a738a-variant_picker-1",
"template--19569972216140__68ce3945-3cf7-48b2-af49-d371d03a738a-buy_buttons-1"
],
"settings": {
"product": "invisibles-x-fabia-bengs-color-edition",
"product_image_feature": "zoom",
"show_taxes_included": true,
"disable_top_spacing": false,
"disable_bottom_spacing": false
}
},
"f9bb5fc4-bc40-4a72-a674-303b4f64b2d9": {
"type": "image-with-text-overlay",
"blocks": {
"template--19569972216140__f9bb5fc4-bc40-4a72-a674-303b4f64b2d9-title-1": {
"type": "title",
"settings": {
"heading_size": "h3",
"title": "Entdecke die Ma Copine® INVISIBLES in der exklusiven Haarfarbe von FABIA BENGS!",
"color": "#ffffff"
}
},
"template--19569972216140__f9bb5fc4-bc40-4a72-a674-303b4f64b2d9-content-1": {
"type": "content",
"settings": {
"text": "<p>Gemeinsam mit Fabia haben wir Extensions in ihrer individuellen Haarfarbe entworfen. 100% gewohne Ma Copine® Qualität mit Invisible Tapes.<\/p>",
"color": "#ffffff"
}
},
"23c89c88-8d23-4abc-8025-c30a06e3e0ac": {
"type": "button",
"settings": {
"button_text": "Jetzt sichern",
"button_link": "shopify:\/\/products\/invisibles-x-fabia-bengs-color-edition",
"button_style": "pill alt",
"button_color": "white"
}
}
},
"block_order": [
"template--19569972216140__f9bb5fc4-bc40-4a72-a674-303b4f64b2d9-title-1",
"template--19569972216140__f9bb5fc4-bc40-4a72-a674-303b4f64b2d9-content-1",
"23c89c88-8d23-4abc-8025-c30a06e3e0ac"
],
"settings": {
"parallax": true,
"desktop_height": "desktop-height-450",
"mobile_height": "mobile-height-400",
"vertical_alignment": "content-middle",
"text_alignment": "center",
"overlay_color": "#fabb44",
"overlay_opacity": 100,
"disable_top_spacing": true,
"disable_bottom_spacing": true
}
},
"d71a68b9-a187-4805-bb01-6cdc2b9faaf3": {
"type": "image-with-text",
"blocks": {
"template--19569972216140__d71a68b9-a187-4805-bb01-6cdc2b9faaf3-title-1": {
"type": "title",
"settings": {
"title": "INVISIBLES x FABIA BENGS",
"heading_size": "h2",
"color": "#ffffff",
"animation": "animation left-to-right"
}
},
"template--19569972216140__d71a68b9-a187-4805-bb01-6cdc2b9faaf3-text-1": {
"type": "text",
"settings": {
"text": "<p>Sichere dir jetzt die INVISIBLES x FABIA BENGS<\/p><p><strong>Die Limitied Edition gibt es nur für kurze Zeit!<\/strong><\/p>",
"color": "#ffffff",
"animation": "animation left-to-right"
}
},
"template--19569972216140__d71a68b9-a187-4805-bb01-6cdc2b9faaf3-button-1": {
"type": "button",
"settings": {
"button_text": "Jetzt sichern",
"button_link": "shopify:\/\/products\/invisibles-x-fabia-bengs-color-edition",
"button_style": "pill alt",
"button_color": "white",
"animation": "animation left-to-right"
}
}
},
"block_order": [
"template--19569972216140__d71a68b9-a187-4805-bb01-6cdc2b9faaf3-title-1",
"template--19569972216140__d71a68b9-a187-4805-bb01-6cdc2b9faaf3-text-1",
"template--19569972216140__d71a68b9-a187-4805-bb01-6cdc2b9faaf3-button-1"
],
"settings": {
"image": "shopify:\/\/shop_images\/BLONDE_10041801-463f-4c33-b29c-21e2169ee247.png",
"height": "adapt",
"full_width": true,
"direction": "image-right",
"text_alignment": "text-center",
"bg_color": "#fabb44",
"disable_top_spacing": true,
"disable_bottom_spacing": true
}
},
"8997fee1-5cdb-42ce-9066-199079899e2a": {
"type": "spacer",
"settings": {
"spacer_mobile": 50,
"spacer_desktop": 100
}
},
"2c5d77eb-8dbf-443e-bbaf-415f7b37c747": {
"type": "text-with-icons",
"blocks": {
"template--19569972216140__2c5d77eb-8dbf-443e-bbaf-415f7b37c747-icon-1": {
"type": "icon",
"settings": {
"icon": "eye",
"heading": "Unsichtbare Klebestellen",
"text": "<p>Durch unsere Invisible Tapes wird deinem Umfeld nicht auffallen, dass du Extensions trägst!<\/p>"
}
},
"template--19569972216140__2c5d77eb-8dbf-443e-bbaf-415f7b37c747-icon-2": {
"type": "icon",
"settings": {
"icon": "plant",
"heading": "100% Russisches Echthaar",
"text": "<p>Kein Verfilzen & Kein Verknoten. Die höchste Qualität an Echthaar Extensions.<\/p>"
}
},
"template--19569972216140__2c5d77eb-8dbf-443e-bbaf-415f7b37c747-icon-3": {
"type": "icon",
"settings": {
"icon": "star",
"heading": "Geschmeidig & Glänzend",
"text": "<p>Haarverlängerungen & -verdichtungen mit langanhaltendem Glanz. Für deinen neuen Look.<\/p>"
}
}
},
"block_order": [
"template--19569972216140__2c5d77eb-8dbf-443e-bbaf-415f7b37c747-icon-1",
"template--19569972216140__2c5d77eb-8dbf-443e-bbaf-415f7b37c747-icon-2",
"template--19569972216140__2c5d77eb-8dbf-443e-bbaf-415f7b37c747-icon-3"
],
"settings": {
"text_alignment": "center",
"icon_position": "top",
"icon_size": "medium",
"heading_size": "small",
"mobile_swipe": true,
"color_bg": "#fabb44",
"color_heading": "#ffffff",
"color_text": "#ffffff",
"disable_top_spacing": false,
"disable_bottom_spacing": false
}
},
"cc1b2130-e4d5-42dd-a495-e52223f2bc6f": {
"type": "divider",
"settings": {
"divider": "wave",
"divider_height_mobile": 50,
"divider_height_desktop": 100,
"divider_background": "#ffffff",
"divider_foreground": "#fabb44"
}
},
"070723a1-10a7-4e4e-a228-714fcafa6b39": {
"type": "image-gallery",
"blocks": {
"template--19569972216140__070723a1-10a7-4e4e-a228-714fcafa6b39-image-1": {
"type": "image",
"settings": {
"image": "shopify:\/\/shop_images\/354541659_1421113708733897_4313768315135540549_n.jpg",
"overlay_color": "#000000",
"overlay_opacity": 0,
"link_text": "",
"link": "",
"animation": ""
}
},
"template--19569972216140__070723a1-10a7-4e4e-a228-714fcafa6b39-image-2": {
"type": "image",
"settings": {
"image": "shopify:\/\/shop_images\/353595148_778308773949205_4856437766098865554_n.jpg",
"overlay_color": "#000000",
"overlay_opacity": 0,
"link_text": "",
"link": "",
"animation": ""
}
},
"template--19569972216140__070723a1-10a7-4e4e-a228-714fcafa6b39-image-3": {
"type": "image",
"settings": {
"image": "shopify:\/\/shop_images\/355392084_637744628284772_8963307242276465040_n.jpg",
"overlay_color": "#000000",
"overlay_opacity": 0,
"link_text": "",
"link": "",
"animation": ""
}
},
"78b4511e-4a1d-4e36-81c9-88dbe3d0ecb6": {
"type": "image",
"settings": {
"image": "shopify:\/\/shop_images\/355108354_2250873601786185_7601728645482964518_n.jpg",
"overlay_color": "#000000",
"overlay_opacity": 0,
"link_text": "",
"link": "",
"animation": ""
}
}
},
"block_order": [
"template--19569972216140__070723a1-10a7-4e4e-a228-714fcafa6b39-image-1",
"template--19569972216140__070723a1-10a7-4e4e-a228-714fcafa6b39-image-2",
"template--19569972216140__070723a1-10a7-4e4e-a228-714fcafa6b39-image-3",
"78b4511e-4a1d-4e36-81c9-88dbe3d0ecb6"
],
"settings": {
"grid_num": 4,
"image_ratio": "portrait",
"disable_top_spacing": false,
"disable_bottom_spacing": false
}
},
"1120006e-9422-41a3-934b-931a4eaefb8b": {
"type": "divider",
"settings": {
"divider": "wave",
"divider_height_mobile": 50,
"divider_height_desktop": 100,
"divider_background": "#fabb44",
"divider_foreground": "#ffffff"
}
},
"8ed21718-d59d-45b7-9d55-15d5fea68deb": {
"type": "email-signup",
"settings": {
"title": "E-Mail Newsletter",
"text": "<p>anmelden und nichts mehr verpassen...<\/p>",
"bg_color": "#fabb44",
"heading_color": "#ffffff",
"text_color": "#ffffff",
"disable_top_spacing": true,
"disable_bottom_spacing": true
}
}
},
"order": [
"main",
"4afc18ae-14a3-4e76-95ae-366f9ab686e2",
"68ce3945-3cf7-48b2-af49-d371d03a738a",
"f9bb5fc4-bc40-4a72-a674-303b4f64b2d9",
"d71a68b9-a187-4805-bb01-6cdc2b9faaf3",
"8997fee1-5cdb-42ce-9066-199079899e2a",
"2c5d77eb-8dbf-443e-bbaf-415f7b37c747",
"cc1b2130-e4d5-42dd-a495-e52223f2bc6f",
"070723a1-10a7-4e4e-a228-714fcafa6b39",
"1120006e-9422-41a3-934b-931a4eaefb8b",
"8ed21718-d59d-45b7-9d55-15d5fea68deb"
]
}

[Gabe]

@MaCopine 

Danke für den Code und das wirst du mit den Theme Entwickler anschauen müssen.

Der Code sieht auf den ersten Blick korrekt aus, aber es gibt mögliche Gründe, warum der Variantenpicker nicht angezeigt wird:

Es kann sein, dass einige der notwendigen CSS-Styles oder JavaScript-Dateien in der älteren Version des Themes fehlen oder nicht korrekt geladen werden. Diese Dateien könnten für die korrekte Anzeige und Funktionalität des Variantenpickers erforderlich sein. Stelle sicher, dass das Produkt "invisibles-x-fabia-bengs-color-edition" Varianten hat. Wenn es keine Varianten gibt, wird der Picker möglicherweise nicht angezeigt. 

Es ist möglich, dass es Unterschiede in den Template-Dateien zwischen den beiden Theme-Versionen gibt. Selbst wenn der hier bereitgestellte Code identisch ist, könnte es Unterschiede in anderen Dateien geben, die diesen Abschnitt beeinflussen. Beispiel: ein geänderter JavaScript-Code in der neuen Theme Version könnte mit der Funktionalität des Variantenpickers kollidieren. Es könnte auch in der neuen Version Bedingungen oder Liquid-Logik geben, die die Anzeige des Variantenpickers unter bestimmten Umständen verhindern.

Überprüfe in der Chrome Dev Console ob Fehlermeldungen angezeigt werden. Ich sehe einige die nicht besonders nett aussehen:

Kannst du auch die relevante Dateien (z.B. stylesheets, JavaScript-Dateien) zwischen den beiden Theme-Versionen vergleichen, falls du noch eine alte Version im Shop hast? Diese kannst du im diffchecker.com Tool machen:

Überlege vielleicht, ob du alle manuellen Änderungen in der aktualisierten Version des Themes replizieren kannst, sodass du von den Updates und Fixes der neueren Version profitieren kannst.

Teste den Variantenpicker auch in einem sauberen, unveränderten Theme, um sicherzustellen, dass er dort funktioniert.

Ich hoffe, diese Tipps helfen dir übers Wochenende weiter denn ich bin man al in den Feierabend bis Montag. Auch nicht vergessen die Theme Entwickler schnell anzuschreiben!