GPSR Shopify: Instructions on how to integrate relevant information to meet GPSR requirements using metafields in Shopify

Here is a more detailed step-by-step guide on how to implement the new GPSR Product Safety Regulation (General Product Safety Regulation) with metafields in Shopify. In addition to instructions on how to insert and use metafields statically, you will also find a way to dynamically use metafields to integrate GPSR-relevant content.

Setting up meta fields in Shopify

Access to meta fields in the admin area

  • Sign in to your Shopify admin account.
  • Navigate to Settings > Metafields .
  • In the Metafields section, select the Products category because you want the GPSR information to appear on product pages.

    Create new metafields for GPSR-relevant information

    Here you create meta fields to store information required by the Product Safety Regulation.

    Click the Add Metafield button.

    Fill in the input fields as follows:

    Metafield 1: Security information

    • Title: Safety Information
    • Namespace and key: product.gpsr_info (this name is unique and serves as a reference for the meta field in the theme code).
    • Description: (Optional) “Information on how to use the product safely.”
    • Content type: Select Rich-Text so you can insert paragraphs, lists, and formatting.
    • Validation: If required for all products, select "Required".

    Metafield 2: Warnings

    • Description: Warnings
    • Namespace and key: product.warnings .
    • Content type: Textfeld .
    • Description: “Displays warnings for using the product.”
    Metafield 3: Purpose
    • Description: Purpose
    • Namespace and key: product.usage_instructions .
    • Content type: Rich-Text .
    • Description: “Instructions for safe handling and use of the product.”
    • Click Save to create the metafields.

    Create additional metafields (optional)

    Depending on your specific GPSR requirements, you can add additional fields such as:

    Metafield 4: CE marking
    • Designation: CE marking
    • Namespace and key: product.ce_label .
    • Content type: Datei if you want to upload a graphic for the CE mark.
    Metafield 5: Manufacturer information
    • Description: Manufacturer information
    • Namespace and key: product.manufacturer_details .
    • Content type: Text or Rich-Text .

      Linking metafields to products

      Edit products

      • In your Shopify admin, go to Products .
      • Open a product for which you want to add GPSR information.
      • Scroll down to Metafields . There you will see the fields you created previously.

        insert information

        Fill in the respective meta fields:

        • Safety information: Detailed information about risks or safety measures.
        • Warnings: Short, concise warnings (e.g. “Not suitable for children under 3 years”).
        • Intended use: Instructions for proper use.
        • CE marking: Upload a logo if required.
        • Manufacturer information: Name, address and contact information of the manufacturer.
        • Save the changes.

        Repeat

        Repeat this process for all products that require GPSR-relevant information.

        Customize theme code

        Access to the theme code

        • Go to Online Store > Themes .
        • Select your active theme and click Actions > Edit Code .

        Edit product template

        Open the file product.liquid (for older themes) or main-product.liquid (for modern themes).

        Insert the following code where you want the GPSR information to appear:

        <div class="product-gpsr-info"> <h3>Security information</h3> <p> {{ product.metafields.product.gpsr_info.value }} </p> </div> <div class="product -warnings"> <h3>Warnings</h3> <p> {{ product.metafields.product.warnings.value }} </p> </div> <div class="product-usage"> <h3>Intended use</h3> <p> {{ product.metafields.product.usage_instructions.value }} </p> </div> {% if product.metafields.product.ce_label %} <div class="product-ce"> <h3>CE marking</h3> <img src=" {{ product.metafields.product.ce_label.value }} " alt="CE marking"> </div> {% endif %} <div class="product-manufacturer"> <h3>Manufacturer information</h3> <p> {{ product.metafields.product.manufacturer_details.value }} </p> </div>

        Optional: Condition sections

        If a meta field is empty, you can hide it by adding a {% if %} condition to the code:

        {% if product.metafields.product.gpsr_info %} <div class="product-gpsr-info"> <h3>Security information</h3> <p> {{ product.metafields.product.gpsr_info.value }} </p> </div> {% endif %}

        Save : Click Save to apply the changes.

        Styling of meta fields (optional)

        Edit CSS file

        • Open the file theme.css or theme.scss.liquid .
        • Add custom CSS to customize the display of the new information:
        .product-gpsr-info , .product-warnings , .product-usage , .product-ce , .product-manufacturer { margin : 20px 0 ; } .product-gpsr-info h3 , .product-warnings h3 , .product-usage h3 , .product-ce h3 , .product-manufacturer h3 { font-size : 1.5rem ; font-weight : bold; margin-bottom : 10px ; } .product-gpsr-info p , .product-warnings p , .product-usage p , .product-manufacturer p { font-size : 1rem ; line-height : 1.5 ; }
        • Save the file.

          Testing and Publishing

          test product page

          • Open the product page in the frontend.
          • Check that all information is displayed correctly.
          • Make sure the presentation is clear and user-friendly.

            Publish changes

            • After testing, return to the admin area.
            • Publish your theme if everything works as expected.

              Setting up meta fields dynamically in Shopify

              The steps to set up the metafields are identical:

              Access to metafields:

              In the admin area, go to Settings > Metafields > Products .

              Create new metafields:

              Example metafields:

              • Security information: namespace product.gpsr_info , type Rich-Text .
              • Warnings: Namespace product.warnings , type Text .
              • Purpose: Namespace product.usage_instructions , type Rich-Text .
              • Optional: CE marking as image ( product.ce_label ) or manufacturer information ( product.manufacturer_details ).
              • Saving and linking to products:
              • Go to a product, scroll to the Metafields section, and paste the content into the appropriate fields.
              • Repeat this for all relevant products.

              Integrating Dynamic Content in the Theme Editor

              Using the Shopify theme editor, you can dynamically display the GPSR meta fields on the product page without having to manually edit the code.

              Open Theme Editor

              • In your Shopify admin, go to Online Store > Themes .
              • Select your active theme and click Customize to open the theme editor.

              Select product page

              • Select the product page view from the drop-down menu at the top of the theme editor.
              • Click on the area where you want to add the security information and other meta fields (e.g. main description, additional section).

              Add Dynamic Content

              Create a metafield section:

              • In the Theme Editor, click Add Section .
              • Choose a section that supports text or rich text (for example, Text Block, Custom Text, or Details).

              Insert dynamic metafield:

              • Edit the content of the text block.
              • Click the Connect Dynamic Source icon (a small button with three circles).
              • Select one of the metafields you created previously, for example “Security Information” (namespace: product.gpsr_info ).
              • Example:
              • Select “Safety Information” and the text from this meta field will appear on the product page.
              Insert additional meta fields:
              • Add additional sections for other information such as “Warnings” or “Intended Use”.
              • Repeat the process by linking the dynamic sources to the respective meta fields.

              Adjust section order and presentation

              Arrange the sections in the desired order, e.g.:
              • safety information
              • warnings
              • Purpose of use
              • CE marking (if applicable)
              • Customize the appearance by using the section's style options (e.g. font size, colors, spacing).

              Check preview

              • Use the preview feature in the theme editor to make sure the information is displayed correctly and attractively.
              • Also check products where not all meta fields are filled in – Shopify automatically hides dynamic content if there are no values.

              Save and publish changes

              • After adding and testing the dynamic content on the product page, click Save in the Theme Editor.
              • The meta fields are now automatically displayed on the product pages without having to manually edit the theme code.

              Advantages of the dynamic method

              • No code knowledge required.
              • Changes to the meta fields are immediately visible on the product page.
              • Flexibility: Sections can be customized, moved or removed at any time using the theme editor.

              With this method, you can implement the GPSR specifications in Shopify quickly and easily. Here you can find the instructions as a PDF , free of charge of course.