{"id":11421,"date":"2024-04-17T15:50:01","date_gmt":"2024-04-17T13:50:01","guid":{"rendered":"https:\/\/100shoppers.com\/?p=11421"},"modified":"2024-04-19T13:30:54","modified_gmt":"2024-04-19T11:30:54","slug":"multivariate-widget","status":"publish","type":"post","link":"https:\/\/100shoppers.com\/de\/multivariate-widget\/","title":{"rendered":"Multivariate widget"},"content":{"rendered":"

The multivariant plugin allows you to display offers for multiple variants of the same product within a single widget, such as different colors or sizes.<\/p>\n\n\n\n

IMG<\/p>\n\n\n\n

Plug-in code (widet)<\/h2>\n\n\n\n
<div \n   class="bb-widget" \n   id="{unique_id_element}" \n   data-bb-id="{your-plugin-id}" \n   data-bb-var-default="1" \n   data-bb-var-name-opt1="{variant-name}" \n   data-bb-var1-value-opt1="{variant1-value}" \n   data-bb-var1-number="{variant1_product_GTIN_number}" \n   data-bb-var1-sku="{product_manufacturer_unique_ID}"data-bb-var1-name="{_product_name_}"data-bb-var1-category="{_product_category_path_}"data-bb-var1-price="{optional_product_suggested_retail_price}"\n   \ufeffdata-bb-var1-description="{_optional_product_short_description_}"data-bb-var1-image="{_optional_product_image_URL_}"\n\n   ...\n data-bb-varn-value-opt1="{variantN-warto\u015b\u0107}" \n   data-bb-varn-number="{variantN_product_GTIN_number}"data-bb-alt="{identifier_container_with_your_alternative_content}" \n><div><\/code><\/pre><\/div>\n\n\n\n
where<\/strong>: <\/p>\n\n\n\n
Required parameters:<\/h2>\n\n\n\n
    \n
  • your-plugin-id =”{unique plugin_ID_to_download_in_the panel}”<\/li>\n\n\n\n
  • id=”{unique_identifier_of_the_element}”<\/li>\n\n\n\n
  • data-bb-var-default=”{the_number_of_the_variant_to_be_displayed_as_the_default}”<\/li>\n\n\n\n
  • data-bb-var-name-opt1=”{the_name_of_the_variant}” e.g. “Series”, “Color”, “Size”; several can be specified (\u2026opt1, \u2026opt2 etc.);<\/li>\n\n\n\n
  • data-bb-var1-value-opt1=”{the_value_of_the_next_variant}” such as “X series”, “Blue”, “XL”;<\/li>\n\n\n\n
  • data-bb-var1-number=”{GTIN_number_of_the_next_variant}”<\/li>\n\n\n\n
  • data-bb-var1-sku=”{your_unique_producer’s_product_ID}”<\/li>\n\n\n\n
  • data-bb-var1-category=”{the_category_path_of_your_product}”<\/li>\n\n\n\n
  • data-bb-add-source-params=”1=”{_the_source_extracted_from_the_utm_source_parameter_of _the_page_on_where_the_widget_is_displayed}”<\/li>\n<\/ul>\n\n\n\n
    For the source, this is the name of the source the user came from, e.g., facebook, instagram.<\/p>\n\n\n\n
    Optional parameters:<\/h2>\n\n\n\n
      \n
    • data-bb-var1-price=”{_catalog_suggested_price_}”<\/li>\n\n\n\n
    • data-bb-var1-description=”{_product_description_}”<\/li>\n\n\n\n
    • data-bb-var1-image=”{_URL_of_the_variant_image}”<\/li>\n\n\n\n
    • data-bb-abpar1=”{_additional_abpar_parameter_passed_along_with_the_transactions}”<\/li>\n\n\n\n
    • data-bb-alt<\/strong>=”{_container_ID_with_your_alternative_content_about_lacking_any_offers}”<\/li>\n<\/ul>\n\n\n\n
      <div id="{identifier}" style="display: none;">YOUR MESSAGE HERE<\/div>.<\/code><\/pre><\/div>\n\n\n\n
      Lack of offers in the widget <\/h3>\n\n\n\n
      In the data-bb-alt parameter<\/strong> in case of you lacking any offers in the widget, you can insert any content<\/strong> or other element<\/strong>, such as a banner<\/strong> by inserting HTML code. You can display, e.g. similar or complementary product.<\/p>\n\n\n\n
      Examples <\/h2>\n\n\n\n
      div\n   class="bb-widget"\n   id="bb-widget-2"data-bb-id="34903"data-bb-add-source-params="1"data-bb-var-default="1"data-bb-var-name-opt1="Seria"data-bb-var-name-opt2="Color"data-bb-var1-value-opt1="Z-Wave 5"data-bb-var1-value-opt2="White"data-bb-var1-number="5902020528968"data-bb-var1-sku="AXT"data-bb-var1-category="Z-wave5>Safety>Sensors>Buttons"data-bb-var1-price="599"data-bb-var2-description="White saftey button"data-bb-var2-value-opt1="Z-Wave 5"data-bb-var2-value-opt2="Black"data-bb-var2-number="5902020528944"data-bb-var2-sku="BCT4"data-bb-var2-category="Z-wave5>Safety>Sensors>Buttons"data-bb-var2-price="799"data-bb-var2-description="Black saftey button"\n><\/div><\/code><\/pre><\/div>\n\n\n\n
      div \n   class="bb-widget" \n   id="bb-widget-2" \n   data-bb-id="34903" \n   data-bb-var-default="1" \n   data-bb-var-name-opt1="Seria" \n   data-bb-var-name-opt2="Color" \n   data-bb-var1-value-opt1="Z-Wave 5" \n   data-bb-var1-value-opt2="White" \n   data-bb-var1-number="5902020528968" \n   data-bb-var2-value-opt1="Z-Wave 5" \n   data-bb-var2-value-opt2="Black" \n   data-bb-var2-number="5902020528944" \n   data-bb-var3-value-opt1="Z-Wave 5" \n   data-bb-var3-value-opt2="Blue" \n   data-bb-var3-number="5905279987227" \n   data-bb-var4-value-opt1="Z-Wave 5" \n   data-bb-var4-value-opt2="Green" \n   data-bb-var4-number="5905279987210" \n><\/div>\n<\/code><\/pre><\/div>\n\n\n\n
      Achtung <\/h2>\n\n\n\n
      On screens below 500px<\/strong>, we do not show call to action<\/strong> in the plugin(widget). If you want to display call to action, you should overwrite your own custom styles.<\/p>\n\n\n\n
      .buybox-widget .bb-go-to-store { display: block !important; \n}\n<\/code><\/pre><\/div>\n\n\n\n
      Other type of the widget <\/h2>\n\n\n\n
        \n
      • Embedded <\/li>\n\n\n\n
      • Popover<\/li>\n\n\n\n
      • Overlay <\/li>\n\n\n\n
      • Multivariate<\/li>\n\n\n\n
      • JSON<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"
        How to display offers for multiple variants<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[],"class_list":["post-11421","post","type-post","status-publish","format-standard","hentry","category-widget-types"],"yoast_head":"\nMultivariate widget - 100Shoppers<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/100shoppers.com\/de\/multivariate-widget\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Multivariate widget\" \/>\n<meta property=\"og:description\" content=\"How to display offers for multiple variants\" \/>\n<meta property=\"og:url\" content=\"https:\/\/100shoppers.com\/de\/multivariate-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"100Shoppers\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-17T13:50:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-19T11:30:54+00:00\" \/>\n<meta name=\"author\" content=\"Joanna Kaczmarek\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joanna Kaczmarek\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/100shoppers.com\\\/multivariate-widget\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/100shoppers.com\\\/multivariate-widget\\\/\"},\"author\":{\"name\":\"Joanna Kaczmarek\",\"@id\":\"https:\\\/\\\/100shoppers.com\\\/#\\\/schema\\\/person\\\/15522deedd2e86d7ac60378541c0846f\"},\"headline\":\"Multivariate widget\",\"datePublished\":\"2024-04-17T13:50:01+00:00\",\"dateModified\":\"2024-04-19T11:30:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/100shoppers.com\\\/multivariate-widget\\\/\"},\"wordCount\":279,\"publisher\":{\"@id\":\"https:\\\/\\\/100shoppers.com\\\/#organization\"},\"articleSection\":[\"Widget types\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/100shoppers.com\\\/multivariate-widget\\\/\",\"url\":\"https:\\\/\\\/100shoppers.com\\\/multivariate-widget\\\/\",\"name\":\"Multivariate widget - 100Shoppers\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/100shoppers.com\\\/#website\"},\"datePublished\":\"2024-04-17T13:50:01+00:00\",\"dateModified\":\"2024-04-19T11:30:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/100shoppers.com\\\/multivariate-widget\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/100shoppers.com\\\/multivariate-widget\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/100shoppers.com\\\/multivariate-widget\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/100shoppers.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Help Center\",\"item\":\"https:\\\/\\\/100shoppers.com\\\/category\\\/help-center\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widget types\",\"item\":\"https:\\\/\\\/100shoppers.com\\\/category\\\/help-center\\\/widget-types\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Multivariate widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/100shoppers.com\\\/#website\",\"url\":\"https:\\\/\\\/100shoppers.com\\\/\",\"name\":\"100Shoppers\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/100shoppers.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/100shoppers.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/100shoppers.com\\\/#organization\",\"name\":\"100Shoppers\",\"url\":\"https:\\\/\\\/100shoppers.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/100shoppers.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/100shoppers.com\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/logo.webp\",\"contentUrl\":\"https:\\\/\\\/100shoppers.com\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/logo.webp\",\"width\":1024,\"height\":111,\"caption\":\"100Shoppers\"},\"image\":{\"@id\":\"https:\\\/\\\/100shoppers.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/100shoppers.com\\\/#\\\/schema\\\/person\\\/15522deedd2e86d7ac60378541c0846f\",\"name\":\"Joanna Kaczmarek\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/100shoppers.com\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/cropped-asia-96x96.png\",\"url\":\"https:\\\/\\\/100shoppers.com\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/cropped-asia-96x96.png\",\"contentUrl\":\"https:\\\/\\\/100shoppers.com\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/cropped-asia-96x96.png\",\"caption\":\"Joanna Kaczmarek\"},\"url\":\"https:\\\/\\\/100shoppers.com\\\/de\\\/author\\\/j-kaczmarek\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Multivariate widget - 100Shoppers","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/100shoppers.com\/de\/multivariate-widget\/","og_locale":"de_DE","og_type":"article","og_title":"Multivariate widget","og_description":"How to display offers for multiple variants","og_url":"https:\/\/100shoppers.com\/de\/multivariate-widget\/","og_site_name":"100Shoppers","article_published_time":"2024-04-17T13:50:01+00:00","article_modified_time":"2024-04-19T11:30:54+00:00","author":"Joanna Kaczmarek","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Joanna Kaczmarek","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/100shoppers.com\/multivariate-widget\/#article","isPartOf":{"@id":"https:\/\/100shoppers.com\/multivariate-widget\/"},"author":{"name":"Joanna Kaczmarek","@id":"https:\/\/100shoppers.com\/#\/schema\/person\/15522deedd2e86d7ac60378541c0846f"},"headline":"Multivariate widget","datePublished":"2024-04-17T13:50:01+00:00","dateModified":"2024-04-19T11:30:54+00:00","mainEntityOfPage":{"@id":"https:\/\/100shoppers.com\/multivariate-widget\/"},"wordCount":279,"publisher":{"@id":"https:\/\/100shoppers.com\/#organization"},"articleSection":["Widget types"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/100shoppers.com\/multivariate-widget\/","url":"https:\/\/100shoppers.com\/multivariate-widget\/","name":"Multivariate widget - 100Shoppers","isPartOf":{"@id":"https:\/\/100shoppers.com\/#website"},"datePublished":"2024-04-17T13:50:01+00:00","dateModified":"2024-04-19T11:30:54+00:00","breadcrumb":{"@id":"https:\/\/100shoppers.com\/multivariate-widget\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/100shoppers.com\/multivariate-widget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/100shoppers.com\/multivariate-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/100shoppers.com\/"},{"@type":"ListItem","position":2,"name":"Help Center","item":"https:\/\/100shoppers.com\/category\/help-center\/"},{"@type":"ListItem","position":3,"name":"Widget types","item":"https:\/\/100shoppers.com\/category\/help-center\/widget-types\/"},{"@type":"ListItem","position":4,"name":"Multivariate widget"}]},{"@type":"WebSite","@id":"https:\/\/100shoppers.com\/#website","url":"https:\/\/100shoppers.com\/","name":"100Shoppers","description":"","publisher":{"@id":"https:\/\/100shoppers.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/100shoppers.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/100shoppers.com\/#organization","name":"100Shoppers","url":"https:\/\/100shoppers.com\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/100shoppers.com\/#\/schema\/logo\/image\/","url":"https:\/\/100shoppers.com\/wp-content\/uploads\/2025\/05\/logo.webp","contentUrl":"https:\/\/100shoppers.com\/wp-content\/uploads\/2025\/05\/logo.webp","width":1024,"height":111,"caption":"100Shoppers"},"image":{"@id":"https:\/\/100shoppers.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/100shoppers.com\/#\/schema\/person\/15522deedd2e86d7ac60378541c0846f","name":"Joanna Kaczmarek","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/100shoppers.com\/wp-content\/uploads\/2022\/10\/cropped-asia-96x96.png","url":"https:\/\/100shoppers.com\/wp-content\/uploads\/2022\/10\/cropped-asia-96x96.png","contentUrl":"https:\/\/100shoppers.com\/wp-content\/uploads\/2022\/10\/cropped-asia-96x96.png","caption":"Joanna Kaczmarek"},"url":"https:\/\/100shoppers.com\/de\/author\/j-kaczmarek\/"}]}},"_links":{"self":[{"href":"https:\/\/100shoppers.com\/de\/wp-json\/wp\/v2\/posts\/11421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/100shoppers.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/100shoppers.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/100shoppers.com\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/100shoppers.com\/de\/wp-json\/wp\/v2\/comments?post=11421"}],"version-history":[{"count":2,"href":"https:\/\/100shoppers.com\/de\/wp-json\/wp\/v2\/posts\/11421\/revisions"}],"predecessor-version":[{"id":11469,"href":"https:\/\/100shoppers.com\/de\/wp-json\/wp\/v2\/posts\/11421\/revisions\/11469"}],"wp:attachment":[{"href":"https:\/\/100shoppers.com\/de\/wp-json\/wp\/v2\/media?parent=11421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/100shoppers.com\/de\/wp-json\/wp\/v2\/categories?post=11421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/100shoppers.com\/de\/wp-json\/wp\/v2\/tags?post=11421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}