Shop the Look

Shop The Look

Plugin User Manual

The Shop The Look plugin extends Shopware’s CMS builder — known as Experience Worlds — with two powerful new content blocks that turn standard editorial photography into fully interactive, shoppable experiences. No coding or custom development is required; everything is configured directly inside the page builder interface.

The first block, Shop The Look, lets you place clickable hotspot pins on a lifestyle or editorial image. When a visitor hovers over one of those pins, a popup appears showing the linked product’s image, name, price, and a direct link to buy it. A product list panel can also be displayed alongside the image, complete with variant selectors and add-to-cart buttons.

The second block, Shop Look Slider, is a full-width image carousel where each slide can be independently linked to a CMS page, a category, a product detail page, or any custom URL of your choosing.

Who Is This Plugin For?

• Fashion, home decor, and lifestyle stores that use editorial-style photography

• Brands that want to present a complete “outfit” or “room setup” and allow customers to shop the entire look from a single page

• Marketing teams building campaign landing pages with interactive product highlights

Below is a summary of everything included with the plugin.

Shop The Look Block

• Interactive product hotspot pins placed directly on a lifestyle image

• Hotspot popup showing product image, name, price, and a View Product button

• Collateral product list panel shown beside the image (with multiple layout options)

• Variant selector per product — size, colour, and other options visible directly on the page

• Individual Add to Cart button per product

• Add All to Cart button to add every listed item in one click

• Flexible layout control: image only, product list only, or both side by side

• Image dimension presets or fully custom width and height

• Automatic “Complete The Look” section on product detail pages for any product used in a hotspot

Shop Look Slider Block

• Full-width image carousel with configurable navigation arrows and dot indicators

• Auto-slide with configurable timing

• Per-slide link configuration: CMS page, storefront URL, or custom URL

• Open links in the same tab or a new tab

General

• Both blocks live inside the standard CMS page builder — no code required

• All plugin data and configuration entries are cleanly removed on uninstall

3.1  Finding the Blocks

To locate the plugin blocks, navigate to:

Admin → Content → Shopping Experiences (Experience Worlds)

Open an existing CMS layout or create a new one. In the block picker panel on the left side of the builder, look under the Image category. You will see two new entries:

• Shop The Look Block

• Shop Look Slider Block

Drag either block onto your page layout to add it.

3.2  Configuring the Shop The Look Block

After adding the block to your layout, click on it to open its configuration panel. The panel has two tabs: Content and Settings.

Content Tab

Image Dimension

Choose a preset size for your main image. Available presets are: 90×90, 120×120, 150×150, 200×200, 300×300, 400×400, and 500×500. If none of these suit your layout, select Custom and enter your own values:

• Width (px) — any value between 50 and 2000 pixels

• Height (px) — any value between 50 and 2000 pixels

Look Image

Upload the lifestyle or editorial photograph that your hotspot pins will sit on. This is the primary image the customer sees. Until an image is uploaded, a placeholder graphic is displayed in its place.

Product Hotspots

This is the core feature of the block. Each hotspot is a pinned dot on your image that links to a specific product. Click Add Hotspot to create a new entry. For each hotspot you will configure:

Field

Description

X Position (%)

Horizontal placement of the dot. 0 = far left, 100 = far right.

Y Position (%)

Vertical placement of the dot. 0 = top edge, 100 = bottom edge.

Select Product

Search for and pick the product this hotspot should link to.

You can add as many hotspots as needed. Each one is labelled automatically (Hotspot 1, Hotspot 2, and so on). A live preview beneath the configuration shows your image with coloured dots indicating each pin position:

• Red dot — the hotspot currently being edited

• Blue dots — all other configured hotspots

To remove a hotspot, click the Remove button next to it. To save the page, at least one hotspot with a product selected must exist.

Important

If you try to save the CMS page without at least one hotspot that has a product assigned, a validation error will be shown and the page will not save.

Settings Tab

Layout Style

Controls how the image and the product list are arranged on the storefront. The four available options are shown in the quick-reference table in Section 5.

Show Prices

Toggle ON to display prices in both the product list panel and the hotspot popup. Toggle OFF to hide all pricing information.

Show Variant Switch

Toggle ON to display variant selectors (for example, Size: S / M / L, or colour swatches) directly on each product card in the list panel. Customers can choose their preferred variant before adding to cart without leaving the page. Toggle OFF to hide these controls.

Add All Products to Cart Button

Toggle ON to show a large Add All to Cart button at the bottom of the product panel. Clicking it adds every ticked product to the cart in one action. Individual products can be unticked by the customer before clicking if they only want a subset. Toggle OFF to hide this button.

Add Single Product to Cart Button

Toggle ON to show an individual Add to Cart button beneath each product in the list. Toggle OFF to hide per-product buttons.

Note

Both the single-product and add-all buttons can be active simultaneously, or you can enable just one, or neither — depending on the customer experience you want to create.

3.3  Configuring the Shop Look Slider Block

After adding the block to your layout, click on it to open its configuration panel. As with the Shop The Look block, there are two tabs: Content and Settings.

Content Tab

This is where you manage the images that appear in the carousel. Use the media upload area to add images. You can drag them to reorder, or remove individual images using the delete control beside each one.

Settings Tab

Heading

Optional text shown above the slider on the storefront. The default value is “Shop the Look”. Leave this field blank if you prefer no heading.

Navigation Arrows

Controls where the previous and next arrow buttons appear:

• Inside — arrows are overlaid on the slider image

• Outside — arrows appear to the left and right of the slider frame

• None — no arrows are shown

Navigation Dots

Controls the position of the slide-indicator dots:

• Inside — dots appear within the slider

• Outside — dots appear below the slider

• None — no dot indicators are shown

Speed

The transition duration between slides, in milliseconds. For example, 300 gives a fast transition and 1000 gives a one-second transition.

Auto Slide

Toggle ON to have slides advance automatically without any user interaction. Toggle OFF to require manual navigation.

Autoplay Timeout

How long each slide stays visible before advancing to the next, in milliseconds. This setting only applies when Auto Slide is enabled.

Per-Slide Link Settings

Each image in the slider can be independently configured with its own destination link. For each slide you can set:

• Link Type — choose from one of three options:

  • Shop Page: links to an existing CMS page you select from a dropdown

  • Category or Product Detail Page: links to an existing storefront URL (categories or product pages shown in a dropdown)

  • Custom URL: enter any full URL, internal path, or external link

• Open in New Tab — toggle ON to open the linked page in a new browser tab when the slide is clicked

Note

If a slide has no link configured, it still appears normally in the slider. Clicking it simply does nothing, and a tooltip reading “No link configured for this slide” is displayed.

This section describes what customers experience when they interact with each block on the published storefront.

4.1  Shop The Look on a CMS Page

When a customer visits a page that contains the Shop The Look block, they see the main lifestyle image with small dot indicators placed at the hotspot positions. Hovering over any dot opens a popup that displays:

• A product thumbnail image

• The product name, which is a clickable link to the full product detail page

• The product price (if the Show Prices setting is enabled)

• A View Product button

If the chosen layout includes the product list panel, all hotspot products are also listed alongside the image in individual product cards.

4.2  Selecting Variants in the Product List

When the Show Variant Switch setting is enabled, each product card in the list panel displays the available options for that product. Colour variants appear as filled colour swatches. All other variant types — such as size — appear as labelled radio buttons. The customer selects the variant they want before adding the item to their cart.

4.3  Adding Products to the Cart

Single product: If the Add Single Product to Cart Button setting is enabled, an Add to Cart button appears beneath each product card. Clicking it adds that specific product — with the selected variant — to the cart.

All products at once: If the Add All Products to Cart Button is enabled, an Add All to Cart button appears at the bottom of the product panel. By default, every product has its checkbox ticked. The customer can untick any items they do not want before clicking. The button label updates dynamically: if some items are out of stock, or if a required variant has not been selected, the button state adjusts accordingly. If a product that requires a variant selection has none chosen, the customer sees an alert asking them to make their selections first.

4.4  Out of Stock Handling

If the variant selected for a product is out of stock, the customer sees the message “Selected size is out of stock” and the add-to-cart action for that item is disabled.

4.5  “Complete The Look” on the Product Detail Page

This is an automatic feature that requires no additional configuration from you. If a product has been used as a hotspot in any published Shop The Look CMS element, that product’s own detail page will automatically display a Complete The Look section below the standard cross-selling area.

This section presents a table of all the other products that appear alongside the current product in any Shop The Look layout. The table includes:

• Product thumbnail

• Product name and product number

• Variant selector dropdown, if the product has variants

• Price

• An Add to Cart button

This feature works for both simple products and variant products. If a customer is viewing a specific variant — for example, Blue / Size M — the plugin identifies the parent product and looks up the associated looks automatically.

Important

The Complete The Look section only appears if the product (or its parent variant product) has been added as a hotspot in at least one published Shop The Look CMS element. Make sure the CMS page using the element is published and active.

4.6  Shop Look Slider on a CMS Page

When a customer visits a page that contains the Shop Look Slider block:

• Slides are displayed in the configured order

• Navigation arrows (previous / next) appear according to the admin setting

• Dot indicators appear according to the admin setting

• If Auto Slide is enabled, slides rotate automatically at the interval set in Autoplay Timeout

• Clicking a slide navigates to its configured destination — a CMS page, storefront URL, or custom URL

• If a slide has no link configured, clicking it does nothing

The following table summarises the four layout styles available for the Shop The Look block and what each one displays on the storefront.

Layout Style

Image Visible

Product List Visible

Image → Products

Yes — left side

Yes — right side

Products → Image

Yes — right side

Yes — left side

Only Image

Yes

No

Only Products

No

Yes

When you uninstall the Shop The Look plugin via the Shopware plugin manager, you will be given the option to keep or discard user data.

If you choose NOT to keep user data, the plugin will automatically remove:

• All CMS slots of type ict-shop-the-look and ict-shop-look-slider

• All CMS blocks of type ict-shop-the-look-block and ict-shop-look-slider-block

• All plugin system configuration entries

If you choose to keep user data, none of the above items will be deleted and your content will remain in the database.

Recommendation

If you plan to reinstall the plugin later, choose to keep user data so that your existing Shop The Look layouts and slider configurations are preserved.