All pages
Powered by GitBook
1 of 10

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Showing GPSR information on product pages

With ThemeWare® you display the product safety information under the GPSR – the manufacturer information and the responsible person – right on your product pages. You maintain the information via custom fields and show it either in the description, in the manufacturer tab or in a separate tab.

Note: The GPSR information appears as soon as you enable the feature in the theme configuration and fill the corresponding custom fields on the manufacturer or product.


Requirements

  • a product with an assigned manufacturer

  • the manufacturer's GPSR information (manufacturer information and/or responsible person)


Step 1: Enable GPSR in the theme

"Theme Manager" => your ThemeWare® theme => "Product pages" tab => "GPSR – Product safety (in tabs)" block

For "Show product safety (GPSR)", select the desired placement: "show in the description", "show in the manufacturer tab" or "show in a separate tab". Then use "Show manufacturer information (GPSR)" and "Show responsible person (GPSR)" in the "Basic configuration" section to define which information is displayed. Save your changes.


"Catalogues" => "Manufacturers" => select manufacturer => "Custom fields" block => your theme's custom field set

Fill in the matching custom fields:

  • Manufacturer information – the name or registered trade name of the manufacturer, the full postal address and an electronic contact address (email or website URL)

  • Responsible person – the name of the responsible person, the full postal address and an electronic contact address (email or website URL)

Save the manufacturer.


The GPSR information now appears at the chosen position on the product page. If nothing shows up, clear the Shopware cache once.


You can find all configuration options and custom fields in detail in the ThemeWare® manual:

Showing care symbols & product symbols

With ThemeWare® you show care instructions, seals or certificates as small symbols right on the product page – e.g. washing symbols on textiles or an organic seal on groceries. Important information becomes graspable at a glance and builds customer trust.


  • a product you want to assign symbols to

  • the symbols as an image (SVG or PNG) – depending on the source, on a property option or in the product


For symbols that are used on several products (e.g. care instructions or seals), it is best to use properties with an image. The image is a native Shopware field on the individual

Embedding product videos (YouTube & Vimeo)

With ThemeWare® you embed product videos right on the product page – via a YouTube or Vimeo video ID or as your own HTML5 video. Show your product in action, build customer trust and keep visitors on the page longer.


  • a product you want to assign a video to

  • the video ID of the desired YouTube or Vimeo video (or a video file for an HTML5 video)


"Theme Manager" => your ThemeWare® theme => "Product pages" tab => "Tab "Description"" block => "Product videos" section

option
– the ThemeWare® custom field sits on the
group
and enables the symbols.

"Catalogues" => "Properties" => select property group => "Custom fields" area

Set the field "Show as product symbol" to yes and then assign an image to each desired option of this group. Save your changes.


For symbols that only concern a single product, use the symbol custom fields directly on the product.

"Catalogues" => "Products" => select product => "Specifications" tab => "Custom fields" area => your theme's custom field set

Select the desired images via the custom fields "→ Symbol 1" to "→ Symbol 3" and optionally assign a title to each ("Symbol 1–3 – Title") – it is used as a tooltip and alternative text. Save the product.


"Theme Manager" => your ThemeWare® theme => "Product pages" tab => "Product symbols" area

Choose the desired position via the "Show product symbols" configuration – e.g. below the product images (gallery), in the buy box, in the description, in the properties tab or in a separate tab. Optionally adjust style, size, subheadline and description text. Save your changes.


The symbols now appear at the chosen position on the product page – combined from both sources. If nothing shows up, clear the Shopware cache once.


You can find all positions, styles and configuration options in detail in the ThemeWare® manual:

Note: The symbols come from two sources that you can freely combine – from properties with an image (ideal for symbols used on many products) and from custom fields directly on the product (ideal for individual products). They appear as soon as you enable the product symbols in the theme configuration.

Requirements

Source A: properties with an image

Product symbols in a separate tab

Enable "Show product videos" and optionally set the position (above or below the properties). Save your changes.


"Catalogues" => "Products" => select product => "Specifications" tab => "Custom fields" section => your theme's custom field set

Enter the video ID in the matching custom field:

  • YouTube video(s) – the ID after the parameter ?v= from the YouTube address bar (e.g. eVrQ0Lvn5ZI)

  • Vimeo video(s) – the ID after the last slash / from the Vimeo address bar

  • Video 1–3 – alternatively, your own HTML5 video from the media manager

Save the product.


The videos now appear on the product page at the chosen position. If nothing shows up, clear the Shopware cache once.


You can find all configuration options and custom fields in detail in the ThemeWare® manual:

Note: The videos are maintained per product via custom fields and appear as soon as you enable the product videos in the theme configuration.

Requirements

Step 1: Enable product videos in the theme

ThemeWare® "Product videos"

Note: "Show in the manufacturer tab" only takes effect if the manufacturer is displayed as its own tab.

Step 2: Add the GPSR information to the manufacturer

Note: You can alternatively maintain the GPSR information directly on the product ("Specifications" tab => "Custom fields" block). Information maintained on the product overwrites that of the manufacturer.

Result

ThemeWare® Tip: Adjust the subheadlines via the snippets twt.detail.gpsr.manufacturerInformation.title and twt.detail.gpsr.responsiblePerson.title – the placeholder %manufacturer% is replaced by the manufacturer name.

Further information

Note: Only options with an image are displayed as a symbol. The group still appears in the properties table as usual.

Source B: individual symbols on the product

Note: The symbols from the custom fields are displayed before the symbols from the properties.

Enable in the theme + choose the position

Result

ThemeWare® Tip: Upload the symbols as SVG or PNG in your desired colour – they are not recoloured.

Further information

Step 2: Add the video to the product

Note: You can enter multiple video IDs comma-separated.

Preview images: For YouTube/Vimeo you define one preview image globally in the theme configuration ("Product pages" tab => "Placeholder (YouTube/Vimeo videos)" section => Layout type "Preview image" + "Preview image" field) – these videos only load after a click for privacy reasons anyway. For HTML5 videos (Video 1–3) you assign the preview image per video in the Shopware media manager.

Result

ThemeWare® Tip: Use meaningful video titles (custom field "Video 1–3 – Title") – they improve accessibility and SEO. Adjust the headline above the videos via the snippet twt.detail.productVideos.title.

Further information

Create a product layout

In dieser Anleitung erfährst du, wie du ein Produkt-Layout erstellen kannst.

Layout erstellen

  1. Wechsel über die Hauptnavigation in die "Erlebniswelt-Verwaltung" (1) (2) deines Shops ("Inhalte" => "Erlebniswelten")

  2. Optional: Du kannst die Layouts über den Reiter "Produktseiten" auf diesen Seitentyp eingrenzen (3)

  3. Klicke auf den Button "Neues Layout anlegen" (4)

  4. Wähle im folgenden Schritt den Typ "Volle Breite" aus (5)

    • Hinwies: Die Auswahl dient lediglich als Basis, du kannst später beliebig Sektionen hinzufügen und entfernen

  5. Zum Abschluss der Erstellung musst du deinem Layout einen Namen vergeben (6)

  6. Erstelle das Layout nun mit dem Button "Layout erstellen" (7)

Du hast nun ein Erlebniswelt-Layout vom Typ "Produktseite" angelegt. Fülle dies nun mit deinem gewünschten Inhalt.


Wie du ein Produkt selber anlegen kannst, erfährst du in der Shopware Dokumentation:

Hinweis: Wie du ein Produkt-Layout einem Produkt zuweisen kannst erfährst du im Artikel .

Screenshots

Weiterführende Informationen

Shopware 6 Erlebniswelt-Verwaltung
Shopseiten-Typ auswählen
Sektions-Typ auswählen
Shopseiten-Layout benennen
Assign a product layout

Creating a custom tab on the product page

With ThemeWare® you add your own tab with individual content to the product page – entirely without code. You maintain the title and text conveniently via custom fields per product, and the tab is enabled in the theme configuration. This lets you add e.g. care instructions, a size chart or further product info in a dedicated tab.

Note: "Custom tab" here refers to the integrated ThemeWare® tab that you set up without code via custom fields and the theme configuration. An individual template customization (Twig/HTML) is generally possible as well – how that works is described in the tutorial .


Requirements

  • a product you want to add a custom tab to

  • the content you want to show in the tab (e.g. care notes or usage notes)


Step 1: Enable the custom tab in the theme

"Theme Manager" => your ThemeWare® theme => "Product pages" tab => "Tab "Custom content"" block => "Show custom tab"

Set "Show custom tab" to "show". In the "Basic configuration" section you can optionally use "Show headline" to define whether a headline appears within the tab. Save your changes.


"Catalogues" => "Products" => select product => "Specifications" tab => "Custom fields" section => your theme's custom field set

Fill in the matching custom fields:

  • Custom tab – Text – the actual content of the tab. The tab only appears if this field is filled.

  • Custom tab – Title (optional) – an individual tab name for this specific product. If the field stays empty, the global snippet twt.detail.tabCustom.title is used.

Save the product.


The custom tab now appears on the product page. If nothing shows up, check that the "Custom tab – Text" custom field is filled and clear the Shopware cache once.


You can find all configuration options and custom fields in detail in the ThemeWare® manual:

Step 2: Add the content to the product

Note: Fill in the custom fields for variants too, so the tab appears there as well.

Result

ThemeWare® Tip: For a shop-wide identical tab name (e.g. "Care instructions") the snippet twt.detail.tabCustom.title is enough – the tab is then named the same on all product pages. You adjust the headline within the tab via twt.detail.tabCustom.headline (%product% is replaced by the product name).

Further information

Individual template customizations (Twig/HTML)

Assign a product layout

In dieser Anleitung erfährst du, wie du ein Produkt-Layout einem Produkt zuweisen kannst.

Layout zuweisen

  1. Wechsel über die Hauptnavigation in die "Produkt-Verwaltung" (1) (2) deines Shops ("Kataloge" => "Produkte")

  2. Wähle das gewünschte Produkt aus (3)

  3. Wechsel in den Tab "Layout" (4)

  4. Klicke auf den Button "Layout zuweisen" bzw. "Layout ändern" (5)

  5. Es erscheint ein Pop-up "Layout auswählen"

  6. Wähle das gewünschte Layout aus (6)

  7. Bestätige deine Auswahl mit "Speichern" (7)

  8. Nun kannst du das geänderte Produkt "Speichern" (8)

Du hast nun ein Produkt-Layout einem Produkt zugewiesen.

Hinweis: Wie du ein Produkt-Layout erstellst erfährst du im Artikel .

Screenshots

Shopware 6 Produkt-Verwaltung
Shopware 6 Produkt-Editor
Layout auswählen
Fertig!
Create a product layout

Providing datasheets as PDF

With ThemeWare® you provide technical datasheets as PDF right on the product page – either in the description tab or in a dedicated datasheets tab, with an embedded preview and download link. This way your customers find all important product information in one place.

Note: The datasheets are maintained per product via custom fields and appear as soon as you enable them in the theme configuration and have added at least one datasheet (Datasheet 1–3).


Requirements

  • a product you want to assign a datasheet to

  • a PDF file in the Shopware media manager


Step 1: Enable datasheets in the theme

"Theme Manager" => your ThemeWare® theme => "Product pages" tab => "Tab "Description"" block => "Datasheets" section

At "Show datasheets" select where the datasheets should appear: "show in the description" or "show in a separate tab". With "Show preview" you define whether the embedded PDF preview is shown in the description tab – in the separate tab it is always displayed, and the download link remains available at all times in both cases. Save your changes.


"Catalogues" => "Products" => select product => "Specifications" tab => "Custom fields" section => "Datasheets" custom field set of your theme

Fill in the matching custom fields:

  • Datasheet 1–3 – select a PDF file from your media manager for each

    • e.g. "aero-mini_data-sheet_en.pdf"

  • Datasheet 1–3 – Title – the desired link text for the respective datasheet

Save the product.


The datasheets now appear on the product page at the chosen position. If nothing shows up, clear the Shopware cache once.


You can find all configuration options and custom fields in detail in the ThemeWare® manual:

e.g. "Aero Mini Data Sheet"
  • Datasheets (Text) – optional description text above the datasheets

    • e.g. "Download the data sheet for the Aero Mini as a PDF. It contains all key technical specifications, product features, and dimensions."

  • Step 2: Add the datasheet to the product

    Note: Whether the description text comes from the custom field, the snippet or both is controlled in the theme configuration via the "Description text" configuration. You can find all custom fields and options in detail in the ThemeWare® manual (see below).

    Result

    ThemeWare® Tip: Use meaningful titles (custom field "Datasheet 1–3 – Title") – they are used as the link text and improve accessibility and SEO. Adjust the subheadline above the datasheets via the snippet twt.detail.datasheets.title.

    Further information

    Create a product layout with sidebar

    In dieser Anleitung erfährst du, wie du ein Produkt-Layout mit Sidebar erstellen kannst.

    Layout erstellen

    1. Wechsel über die Hauptnavigation in die "Erlebniswelt-Verwaltung" (1) (2) deines Shops ("Inhalte" => "Erlebniswelten")

    2. Optional: Du kannst die Layouts über den Reiter "Produktseiten" auf diesen Seitentyp eingrenzen (3)

    3. Klicke auf den Button "Neues Layout anlegen" (4)

    4. Wähle im folgenden Schritt den Typ "Sidebar" aus (5)

      • Hinwies: Die Auswahl dient lediglich als Basis, du kannst später beliebig Sektionen hinzufügen und entfernen

    5. Zum Abschluss der Erstellung musst du deinem Layout einen Namen vergeben (6)

    6. Erstelle das Layout nun mit dem Button "Layout erstellen" (7)

    Du hast nun ein Erlebniswelt-Layout vom Typ "Produktseite" mit Sidebar angelegt. Fülle dies nun mit deinem gewünschten Inhalt.


    Wie du ein Produkt selber anlegen kannst, erfährst du in der Shopware Dokumentation:

    Hinweis: Wie du ein Produkt-Layout einem Produkt zuweisen kannst erfährst du im Artikel .

    Screenshots

    Weiterführende Informationen

    Shopware 6 Erlebniswelt-Verwaltung
    Shopseiten-Typ auswählen
    Sektions-Typ auswählen
    Shopseiten-Layout benennen
    Assign a product layout

    Providing downloads on products

    With ThemeWare® you provide downloads (e.g. data sheets, manuals or certificates as PDF) right on the product page. Your customers find all important documents in one place – this builds trust and reduces enquiries.

    Note: The downloads are maintained per product via custom fields and appear in the "Description" tab as soon as you enable the downloads in the theme configuration and at least one download is stored.


    Requirements

    • a product you want to assign a download to

    • the desired PDF file in your Shopware media manager

    Note: Shopware 6's media manager does not currently support zip files. Please use PDF files.


    Step 1: Enable downloads in the theme

    "Theme Manager" => your ThemeWare® theme => "Product pages" tab => "Tab "Description"" block => "Downloads" section

    Set "Show downloads" to "show". Optionally, use "Description text" to show an introductory text above the downloads (from the snippet). Save your changes.


    "Catalogues" => "Products" => select product => "Specifications" tab => "Custom fields" section => "Downloads" custom field set

    Store the download in the matching custom fields:

    • Download 1–3 – select the PDF file from your media manager

      • e.g. "user_manual_aero-mini_en.pdf"

    • Download 1–3 – Title – the displayed link text

    Save the product.


    The downloads now appear in the "Description" tab of the product page. If nothing shows up, clear the Shopware cache once.


    You can find all configuration options and custom fields in detail in the ThemeWare® manual:

    e.g. "Aero Mini User Manual"
  • Download 1–3 – Description – optional description text for the download

    • e.g. "Download the user manual for the Aero Mini as a PDF."

  • Step 2: Add the download to the product

    Result

    ThemeWare® Tip: Use meaningful titles (custom field "Download 1–3 – Title") – without a title the file name is shown. Adjust the subheadline above the downloads via the snippet twt.detail.downloads.title and the introductory description text via twt.detail.downloads.text.

    Further information

    Product videos | ThemeWare® Manualdocs.themeware.design
    ThemeWare® Manual ⇒ Product videos
    Logo
    Product symbols | ThemeWare® Manualdocs.themeware.design
    ThemeWare® Manual ⇒ Product symbols
    Logo
    GPSR information on product pages | ThemeWare® Manualdocs.themeware.design
    ThemeWare® Manual ⇒ GPSR information on product pages
    Logo
    Custom tab | ThemeWare® Manualdocs.themeware.design
    ThemeWare® Manual ⇒ Custom tab
    Logo
    Product datasheets | ThemeWare® Manualdocs.themeware.design
    ThemeWare® Manual ⇒ Product datasheets
    Product downloads | ThemeWare® Manualdocs.themeware.design
    ThemeWare® Manual ⇒ Product downloads
    Logo
    Logo
    Shopware 6 - Catalogues - Create productsdocs.shopware.com
    Shopware Dokumentation: Produkte anlegen
    Shopware 6 - Catalogues - Create productsdocs.shopware.com
    Shopware Dokumentation: Produkte anlegen
    Logo
    Logo

    Product pages