Overview

Afterwards, you can check below whether the labels appear on your product page.

1. Open the templateIn WordPress, go to Appearance → Editor → Templates and open “Single Product”. With a classic theme, skip to step 4.
2. Insert a blockBelow the “Add to Cart with Options” block, insert a “Custom HTML” block.
3. Paste the codePaste the widget code and save the template. It then applies to all product pages.
4. Classic themeWithout the block editor, output the code in your child theme via the hook woocommerce_single_product_summary with priority 35, or use a snippet plugin.

Widget code for the legal guarantee notice

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Brand-Model.svg"
  data-garan-klein="https://…/GARAN-Brand-Model-nested.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Open the Shopping ExperienceIn the Administration, go to Content → Shopping Experiences and open the layout of your product pages, or create a new one of the type “Product page”.
2. Insert the placeholderBelow the buy box, add a block with a text element, switch to the source code view and insert <div data-garantielabel></div>.
3. Load the scriptAdd the line with widget.js via the theme (for example in base.html.twig) or via a plugin for custom scripts, then save the layout and assign it to the products.
4. Alternative in the themeDevelopers extend the buy box template (buy-widget.html.twig) in their own theme with the placeholder and load the script in the template head.

Widget code for the legal guarantee notice

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Brand-Model.svg"
  data-garan-klein="https://…/GARAN-Brand-Model-nested.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Open the product pageIn the Wix Editor, open the Wix Stores product page. Changes there apply to all products.
2. Add the elementGo to “Add Elements” → “Embed Code” and choose the “Embed HTML” element.
3. Paste the codePaste the widget code, drag the element below the add-to-cart button and make it large enough for the whole graphic to be visible.
4. PublishPublish the site and check a product page.

Widget code for the legal guarantee notice

<div data-garantielabel data-darstellung="voll" data-sprache="en"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Brand-Model.svg"
  data-garan-klein="https://…/GARAN-Brand-Model-nested.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Open the product templateIn the Designer, open the “Products Template” under Pages.
2. Add a Code EmbedDrag the “Code Embed” element from the Add panel below the Add to Cart button.
3. Paste the codePaste the widget code and save.
4. PublishPublish the site. Embedded scripts do not run in the Designer itself.

Widget code for the legal guarantee notice

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Brand-Model.svg"
  data-garan-klein="https://…/GARAN-Brand-Model-nested.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Use a child templateChanges belong in a child template (for NOVA: NOVAChild) so that updates do not overwrite them.
2. Extend the templateIn the child template, extend the template of the item detail page and place the widget code below the add-to-basket button. It then applies to all items.
3. Single itemFor one item only: in the OnPage Composer, drag a text portlet below the add-to-basket button and paste the code in source code view. The OnPage Composer edits each page separately.
4. CheckClear the cache or publish the draft and check an item.

Widget code for the legal guarantee notice

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Brand-Model.svg"
  data-garan-klein="https://…/GARAN-Brand-Model-nested.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Open the productEdit the product in Commerce or on the store page.
2. Add a code blockAdd a code block in the additional information section.
3. Paste the codePaste the widget code, leave “Display Source” switched off and save.
4. Load the script centrallyYou can also load the line with widget.js once via the store page’s Code Injection. The placeholder still has to be in every product.

Widget code for the legal guarantee notice

<div data-garantielabel data-darstellung="voll"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Brand-Model.svg"
  data-garan-klein="https://…/GARAN-Brand-Model-nested.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Create a CMS blockUnder Content → Blocks, create a new block and paste the widget code. From version 2.4.3, Page Builder opens; use the “HTML Code” element there.
2. Create a widgetUnder Content → Elements → Widgets, create a widget of the type “CMS Static Block” for your theme.
3. Place itAs the layout update, choose “All Product Types” and select the container “Product View Extra Hint”. It sits below the add-to-cart button.
4. Flush the cacheSave, flush the cache and check a product page.

Widget code for the legal guarantee notice

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Brand-Model.svg"
  data-garan-klein="https://…/GARAN-Brand-Model-nested.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Check your versionFrom Gambio 26.09.0, you switch on both labels in the shop settings, per customer group if you wish. For older versions from 4.6, Gambio says there is a module. In that case you do not need the widget.
2. Add the scriptFor the widget, go to „Einstellungen“ → „Suchmaschinenoptimierung“ → „Tracking-Codes“ (Settings → Search engine optimisation → Tracking codes) and insert the line with widget.js in the „Body“ section. It is then loaded on all shop pages.
3. Set the placeholderIn the item description, open the source code view in the editor and insert the placeholder <div data-garantielabel></div> where you want it.
4. CheckAfter saving, open the source code view again. If the placeholder is still there, the label appears on the product page.

Widget code for the legal guarantee notice

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Brand-Model.svg"
  data-garan-klein="https://…/GARAN-Brand-Model-nested.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Use a child themeTheme changes belong in a child theme so that updates do not overwrite them.
2. Choose the spotIn templates/catalog/product.tpl, find the area below the add-to-cart button.
3. Paste the codePaste the widget code there. Alternatively, use an HTML block module from the Addons marketplace at the hook displayProductAdditionalInfo.
4. Clear the cacheClear the cache under Advanced Parameters → Performance and check.

Widget code for the legal guarantee notice

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Brand-Model.svg"
  data-garan-klein="https://…/GARAN-Brand-Model-nested.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Module or child themeThe extension belongs in a small module or a child theme (in theme.php with 'parentTheme' => 'apex') so that updates of the APEX theme do not overwrite it. You activate it under Extensions → Modules or Extensions → Themes. You need file access for this; usually your agency takes care of it.
2. Extend the blockExtend the template page/details/inc/productmain.html.twig and paste the widget code in the block details_productmain_tobasket after {{ parent() }}. With parent(), the add-to-basket button stays unchanged.
3. GARAN label per productFor your own GARAN labels, create two attributes under Administer Products → Attributes, for example “GARAN full” and “GARAN small”, and enter the addresses of the two files on the product under Selection → Assign Attributes. In the template, output the values in data-garan-voll and data-garan-klein.
4. Clear the cacheClear the template cache with vendor/bin/oe-console oe:cache:clear and check the product page, including variants.

Widget code for the legal guarantee notice

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Brand-Model.svg"
  data-garan-klein="https://…/GARAN-Brand-Model-nested.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Check your versionFrom plentyShop LTS 5.0.83, ShopBuilder offers the widgets “Guarantee of conformity” and “Guarantee of durability”. The “Guarantee of durability” widget shows the GARAN label if the manufacturer, the model and the commercial guarantee of durability are maintained for the item.
2. Open ShopBuilderUnder Shop » ShopBuilder, open the content for the single item page (content type Item).
3. Insert the Code widgetFor the notice directly on the item page, drag the “Code” widget below the “Add to basket” widget and paste the code from above, with <script2> instead of <script>.
4. Save and checkSave and check the item page in the live shop, also when switching variations. After plentyShop updates, regenerate the contents under Shop » ShopBuilder.

Widget code for the legal guarantee notice

<div data-garantielabel></div>
<script2 src="https://www.garantielabel.app/widget.js" async></script2>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Brand-Model.svg"
  data-garan-klein="https://…/GARAN-Brand-Model-nested.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Check your versionThese steps apply to ePages Base, the older version. If you have ePages Now, use the built-in features above.
2. Add the scriptUnder „Einstellungen“ → „Allgemeine Einstellungen“ → „Erweiterte Einstellungen“ (Settings → General settings → Advanced settings), insert the line with widget.js in the field „HTML-Head-Bereich“ (HTML head area) and save. It then applies to all pages.
3. Placeholder in the productUnder „Produkte“ → „Produkte“ (Products → Products), open the item, insert the placeholder <div data-garantielabel></div> in the „Erweiterte Beschreibung“ (extended description) via „Quellcode“ (source code), apply and save.
4. CheckRefresh the page cache via „Ihre Seite anzeigen“ (view your site) and check the product page. Then open the source code view again: if the placeholder is still there, the editor has not removed it.

Widget code for the legal guarantee notice

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Brand-Model.svg"
  data-garan-klein="https://…/GARAN-Brand-Model-nested.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. Creator or Website Builder?If the editor’s address starts with cms.e.jimdo.com, you are using Jimdo Creator. In the Website Builder (builder.e.jimdo.com), you cannot add custom code.
2. Add the elementOn the product’s page, below the store item, choose “Add Element” → “More elements and Add-ons” → “Widget/HTML”.
3. Paste the codePaste the widget code, for a GARAN label with the addresses in data-garan-voll and data-garan-klein, and save.
4. Load the script centrallyIf you like, add the line with widget.js once under Menu → Settings → “Edit Head”. Then each product’s element only needs the placeholder.

Widget code for the legal guarantee notice

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Brand-Model.svg"
  data-garan-klein="https://…/GARAN-Brand-Model-nested.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

1. PlaceholderPlace the code on the product page directly below the buy area. The label appears exactly there.
2. Save and publishThen reload the product page and check below.

Widget code for the legal guarantee notice

<div data-garantielabel></div>
<script src="https://www.garantielabel.app/widget.js" async></script>

<div data-garantielabel
  data-garan-voll="https://…/GARAN-Brand-Model.svg"
  data-garan-klein="https://…/GARAN-Brand-Model-nested.svg"></div>
<script src="https://www.garantielabel.app/widget.js" async></script>