How to Get All Custom Field Data on The Shopware 6 Storefront

We’ve just come across a Stack Overflow question by Marakeshh. The author is wondering whether it is possible to get all custom field data on the Shopware 6 storefront. Marakeshh also asks how to achieve the desired goal if there is such a possibility. Here at Firebear, we know a possible resolution. Although displaying custom fields on the Shopware 6 storefront is a complex procedure, it doesn’t require advanced coding skills. You can find all the guidelines in the official documentation or our blog. So, let’s add custom field data to Shopware 6 product pages.

Note that we provide Shopware integration with external platforms. Contact our support for further information or try our Improved Import, Export & Mass Actions. We can also help you transfer products with custom fields to your e-commerce website.

Get Improved Import, Export & Mass Actions for Shopware by Firebear Studio

Explore Shopware

The Issue

The story’s origin is quite simple: the author tries to display custom product fields on a product page. Instead of a nice-looking frontend page, Marakeshh gets a technical name and value.

However, the desired result would be to get the label, and the position displayed as defined in the backend (see image below).

Another goal is to loop through the custom fields to display them. Currently, there is no way to know which custom fields you get back. Therefore, the author cannot define the labels on the go. So, let’s take a look at the most obvious solution.

The Solution

Shopware 6 provides the ability to display custom fields on product pages with the help of the default instruments. You just need to find the Shopware 6 Custom Fields page in your administration interface. It is situated in the main menu under Settings -> System -> Custom Fields.

You can see sets of Shopware 6 custom fields that are already available. Use the context menu on the right to either delete or edit them.

To address our issue, you need to click the Add New Set button. It initiates the creation of new Shopware 6 custom filed sets that will be visible on the frontend. The following form displays:

At this stage, you need to specify a unique technical name that cannot be changed later. Set the field position and manage its label (frontend display). Note that you can apply localized labels with the help of the “Manage labels in all administration languages” toggle and assign your set to store pages. Save your new set and create custom fields for it.

Click the New custom field button in the area below the General Information form:

Note that the following form changes following the selected field type. For instance, the Select Field type requires you to specify the field’s technical name, position, label, placeholder, and help text (see the image below).

Next, you need to decide whether your new custom field is multi-select or not.

You can add as many custom fields as you need. When all of them are added, save your new set. You can find a detailed description of available custom field types here: Shopware 6 custom field types.

Displaying the custom field content on the Shopware storefront is associated with corresponding template adjustments. Modify the description.html.twig file available under /custom/plugins/YourTheme/src/Resources/views/storefront/page/product-details/. The derivation starts as follows:

Other file content depends on where you need to display the additional field or not. Place it below the description text. Use the following code to include the original content of the page_product_detail_description_content_text block:

Along with this snippet:

The following code will help you integrate the custom field:

Note that Shopware 6 stores the technical name in the settings of the additional field. 

Below, you can see an example of how a custom field is assigned to a product page on a Shopware 6 storefront: 

Check this article for more information: Changing a template in Shopware 6.

How to Import Custom Fields to Shopware 6

As we’ve already mentioned above, you can use Improved Import, Export & Mass Actions for Shopware to automate the product data transfers. The extension lets you transfer custom fields with all the related information. It also provides the ability to automate all data transfers with the help of schedules. Specify when a particular data transfer should be launched, and the tool will follow the selected time frame. Besides, it lets you create schemes to match external attributes to ones used in Shopware 6. You teach the module how to treat unsupported data and what designations to use to replace it. As a result, any external update is easily adopted and moved to Shopware 6. Contact our support for more details.

Shopware 6 Essentials FAQ

Get Improved Import & Export for Shopware by Firebear Studio

Explore Shopware