3. Configuration
After the app has been installed, the basic settings must first be configured. Since the normal app configurations could not yet be translated at the time of the development of the app, an extra module for the administration was developed. This can be found in your administration under "Settings", then in the left submenu on "Plugins" or from Shopware 6.4 on "Extensions" and there on "STL - Configuration". Here you can make the following settings.
3.1 General
3.1.1 Inheritance
With the help of automatic inheritance, looks of the root product are always displayed for all variants as well. A classic use case would be that you have products in different sizes. Since the size of a product should usually not play a role in a look and a look should therefore apply to all sizes, it is sufficient in this case to activate the inheritance and create the look for the root product. The look is then automatically displayed for all size variants. Thus, the look does not have to be created separately for each size variant.
However, looks that are created in the root product and transferred to the variants by inheritance are not displayed in the administration for the variants in this case. It is possible that different looks are displayed for a variant in the administration than for the root product. Nevertheless, the looks of the root product are displayed on the product page of the variant. So, theoretically, you can still create certain looks only for variants, but they will not be displayed in the store until the inheritance mode is disabled.
This mode is not so good, for example, if your products also have different colors. This is because the color usually plays a role within a Look. Thus, for example, a Look applies to the blue variant, but not to the red variant. In this case, it would not make sense for the same Look to be displayed for all variants. However, there is an automation for this. You can find out more about this under "Properties for automatic looks".
3.1.2 Properties for automatic looks
This configuration is only active if you have not activated inheritance. Here you can select properties for which looks should be automatically applied to variants with the same value in this property. This makes sense, for example, if your products have different colors and different sizes. In this case, it would make sense to select the "Color" property in this configuration. If, for example, a look is created for the variant "Red - XL", this look will also be created for all variants that are also red, i.e. that have the same value in the "Color" property. Since the color can play a role in the Look, this is a good way to create a Look automatically for all sizes of a color. Since the size usually does not play a role in a Look, it would not make sense here to select the "Size" property. Because then the Look would be applied to all other colors with the size "XL", which doesn't make much sense for the Look.
Note that the properties available for selection here are not specified by the app, but by your store. So here you will see all the properties you have created under "Catalogues -> Properties".
In contrast to the automatic inheritance (see above), the looks adopted with this logic are also displayed in the administration at the corresponding variants. However, the look can only be edited at the variant where it was originally created.
If after some time of app usage you consider adding another property or removing a property, you can then click the "Reassign looks based on current selection" button. Previously automatically applied looks will then first be deleted and then a new assignment will be performed based on the currently selected properties.
3.2 Shop the Look Element
The settings for the Shop the Look element can initially be maintained globally here and then also customized individually for products.
3.2.1 Activate Shop the Look on product page
Here you can globally activate or deactivate the display of the "Shop the Looks" element on product pages with just one checkbox.
3.2.2 Show cover of currently visited product next to slider
Here you can specify whether the cover of the currently visited product should still be displayed next to the Look slider in the "Shop the Look" element. Depending on where the element is placed, it is recommended to activate this option so that you always have the entire Look in view.
3.2.3 Headline
Here you can optionally define a headline that will be displayed above the "Shop the Look" element. Note that this field must be filled in per language.
3.2.4 Position on the product page
Here you can specify the position of the "Shop the Look" element on the product page. The choices are currently "Above the Tabs" and "Below the Tabs". In this case, "Tabs" means the tabs on the product page where, for example, the description and ratings are located.
3.2.5 Product Box Layout
Here you can define how the products of a look should be displayed within the "Shop the Look" element. The following options are available:
Image Only (Plugin): This is a layout provided by the app that displays only the cover image of the products.
Custom Layout: This allows you to select a custom layout. As soon as the option is selected, a new text field appears in which you can enter the name of your custom layout. The template of the custom layout must then exist according to the original templates (same path and structure of the name) in an own theme or app. For example, if the template is called "storefront/product/card/box-image-with-button.html.twig", "image-with-button" must be entered in the text field for the custom layout. Tip: The layouts "standard", "image" and "minimal" from Shopware can also be used. These were deliberately not included as an option here, as they did not meet the Responsive requirements for Shopware apps within the "Shop the Look" element. If you still want to use the layouts, you can write their names in the custom layout field.
3.3 Shop the Look Page
3.3.1 Shop page for "Shop the Look" page
Here you can select the experience world to be used for the "Shop the Look" page. Only the default template from the app is available here, or your own templates that you have duplicated from the default template. For more on customizing the "Shop the Look" page, see "Customize the Shop the Look Page" below.
3.4 Customize Shop the Look page
You can get to the "Shop the Look" page in the store after clicking on the "To Look" button in the "Shop the Look" element. On this page all products of the look are listed again. You can customize this page. To do so, go to "Content -> Shopping Experiences" in the administration. In the category "Shop pages" you will find the layout "Default "Shop the Look" page". You cannot edit this layout directly. Click on the small menu icon next to the layout and duplicate the layout. Now click on the duplicated layout. First click on the gear icon and choose a different layout name and then save the layout. Now you can, for example, edit the text element or place other elements in other locations. Note that the "Shop the Look Product listing" block cannot be deleted. This takes care of the output of the Look's products. However, you can open the block's settings and customize the layout type for the product boxes, for example. After you have customized your layout, you need to select it in the basic settings. To do this, go to "Settings -> Plugins / Extensions -> STL - Configuration" again. In the field "Shop page for "Shop the Look" page" your layout is now available.
3.5 Note about inactive and sold out products in Looks
In the "Shop the Look" element on the product page and on the look page, inactive products are not displayed. For sold out products, it depends on your shop settings. In the administration, under "Settings -> Shop -> Products", you can determine whether products without stock should be hidden. This app is also based on this setting. If the setting is active, no sold out products will be displayed in looks.
If it happens that a look can no longer display a valid product, then the entire look will be hidden.
Last updated