--- title: Product Overlay Step description: Product Overlay Step --- [Skip to content](https://help.spiffcommerce.com/knowledge-base/content/workflows/step-types/product-overlay#main-content) [![c306e0b841df22eb274a13eb284de3893a945dde-256x102](https://help.spiffcommerce.com/hubfs/c306e0b841df22eb274a13eb284de3893a945dde-256x102.svg)](https://www.spiffcommerce.com/) - [Home](https://help.spiffcommerce.com/knowledge-base/) - Support Show submenu for Support - [Getting Started](https://help.spiffcommerce.com/knowledge-base/getting-started) - [Content](https://help.spiffcommerce.com/knowledge-base/content) - [Configurations](https://help.spiffcommerce.com/knowledge-base/configuration) - [Add-Ons](https://help.spiffcommerce.com/knowledge-base/additional-features) - [Troubleshooting](https://help.spiffcommerce.com/knowledge-base/troubleshooting) - [Developer Docs](https://developer.spiffcommerce.com/) - [Product Page](https://www.spiffcommerce.com/) Open main navigation Close main navigation - [Home](https://help.spiffcommerce.com/knowledge-base/) - Support Show submenu for Support - [Getting Started](https://help.spiffcommerce.com/knowledge-base/getting-started) - [Content](https://help.spiffcommerce.com/knowledge-base/content) - [Configurations](https://help.spiffcommerce.com/knowledge-base/configuration) - [Add-Ons](https://help.spiffcommerce.com/knowledge-base/additional-features) - [Troubleshooting](https://help.spiffcommerce.com/knowledge-base/troubleshooting) - [Developer Docs](https://developer.spiffcommerce.com/) - [Product Page](https://www.spiffcommerce.com/) - [Contact us](mailto:support@spiff.com.au) [Contact us](mailto:support@spiff.com.au) How can we help you? - There are no suggestions because the search field is empty. 1. [Spiff Knowledge Base](https://help.spiffcommerce.com/knowledge-base?hsLang=en) 2. [Content](https://help.spiffcommerce.com/knowledge-base/content?hsLang=en) 3. [Workflow Steps](https://help.spiffcommerce.com/knowledge-base/content?hsLang=en#workflow-steps) # Product Overlay Step ## Adding Product Overlays to Workflows for Enhanced Product Information Display The Product Overlay step, similar to the [Silent Step](https://support.spiffcommerce.com/docs/content/workflows/step-types/silent-step/), enables you to insert an [image asset](https://support.spiffcommerce.com/docs/content/assets/images/) or [illustration](https://support.spiffcommerce.com/docs/content/assets/illustrations/) into your [workflow's](https://support.spiffcommerce.com/docs/content/workflows/) [panel](https://support.spiffcommerce.com/docs/content/workflows/experience-configurator/panels/) completely externally. With this, you are able to insert product information, ingredient information, barcodes or anything else at the [product](https://support.spiffcommerce.com/docs/store/products/) level, rather than inside the [workflow](https://support.spiffcommerce.com/docs/content/workflows/) itself. Not only does this enable you to create universal [workflows](https://support.spiffcommerce.com/docs/content/workflows/) that can be used over many [products](https://support.spiffcommerce.com/docs/store/products/), but can further improve your [production experience](https://support.spiffcommerce.com/docs/order-management/) by adding the key information automatically that cannot be edited by the customer into the panels that you need. ![Screen Shot 2020 10 05 at 11.24.53 am](https://help.spiffcommerce.com/hubfs/Knowledge%20Base%20Import/Screen-Shot-2020-10-05-at-11_24_53-am-1.png) For example, you may sell a variety of wine bottles that all share the same sized label attached. The label is the design area of the bottle that your customers to add design elements, but you need to display the product information on the side, alcohol content, bottle size etc. This is done with a Product Overlay Step. In this case, you could create an endless amount of [workflows](https://support.spiffcommerce.com/docs/content/workflows/) and attach them all to every [product](https://support.spiffcommerce.com/docs/store/products/). You could even add your logo that cannot be edited or overlapped. Adding your product overlay asset Let's start by adding our product overlay asset. To do this, navigate to your [Product](https://support.spiffcommerce.com/docs/store/products/) List page via [Store\>Products](https://hub.spiff.com.au/#/products) in the [Spiff Hub](https://hub.spiff.com.au/#/products). From here, find or search for your appropriate product and click on it to access the [Produc](https://support.spiffcommerce.com/docs/store/products/)t Edit screen. ![Screen Shot 2022 12 02 at 10.39.29 am](https://help.spiffcommerce.com/hubfs/Knowledge%20Base%20Import/Screen-Shot-2022-12-02-at-10_39_29-am-1024x322-1.png) Once you have accessed the [Product](https://support.spiffcommerce.com/docs/store/products/) Edit page, scroll down to ["Product Details"](https://support.spiffcommerce.com/docs/store/products/product-details/), the second section of your edit page. The "Overlay Image" section is where you will add your product overlay asset. Use the 'New" button to upload a new image or SVG asset, or select one directly from your Spiff [Assets](https://support.spiffcommerce.com/docs/content/assets/) Manager via the "Existing" button. This will connect your overlay asset to your [product](https://support.spiffcommerce.com/docs/store/products/). Once this is done, hit save and then navigate back to your applicable [workflow.](https://support.spiffcommerce.com/docs/content/workflows/) ![Screen Shot 2022 12 02 at 10.40.54 am](https://help.spiffcommerce.com/hubfs/Knowledge%20Base%20Import/Screen-Shot-2022-12-02-at-10_40_54-am-1024x450-1.png) Adding the Product Overlay Step Let's start by adding our new step. Navigate to your [workflow](https://support.spiffcommerce.com/docs/content/workflows/) and add a "Product Overlay Step" via the +ADDSTEP button within one of your workflow's [scenes.](https://support.spiffcommerce.com/docs/content/workflows/scenes/) See below. ![Screen Shot 2022 12 02 at 10.27.10 am](https://help.spiffcommerce.com/hubfs/Knowledge%20Base%20Import/Screen-Shot-2022-12-02-at-10_27_10-am-1024x427-1.png) Product Overlay Step Config The Product overlay step is unique in that it has no [config](https://support.spiffcommerce.com/docs/content/workflows/step-settings/config/) settings. The step is built this way since the product overlay asset is inherited from the [product](https://support.spiffcommerce.com/docs/store/products/), rather than being added to the [workflow](https://support.spiffcommerce.com/docs/content/workflows/) itself, therefore the [config](https://support.spiffcommerce.com/docs/content/workflows/step-settings/config/) panel is redundant. ![Screen Shot 2022 12 02 at 10.34.00 am](https://help.spiffcommerce.com/hubfs/Knowledge%20Base%20Import/Screen-Shot-2022-12-02-at-10_34_00-am-1024x318-1.png) Regions for the Product Overlay Step As explained in the [Regions](https://support.spiffcommerce.com/docs/content/workflows/step-settings/regions/) and [Panels](https://support.spiffcommerce.com/docs/content/workflows/experience-configurator/panels/) documentation, your region will determine where your [Step](https://support.spiffcommerce.com/docs/content/workflows/step-types/) [Assets](https://support.spiffcommerce.com/docs/content/assets/)will appear. Access this via your step's ["Regions"](https://support.spiffcommerce.com/docs/content/workflows/step-settings/regions/) tab. If your Product Overlay is designed with the entire [panel](https://support.spiffcommerce.com/docs/content/workflows/experience-configurator/panels/) size in mind, you can simply use the same width and height in your region to cover the entire [panel](https://support.spiffcommerce.com/docs/content/workflows/experience-configurator/panels/). ![Screen Shot 2022 12 02 at 10.34.20 am](https://help.spiffcommerce.com/hubfs/Knowledge%20Base%20Import/Screen-Shot-2022-12-02-at-10_34_20-am-1024x167-Aug-06-2025-03-31-01-2583-AM.png) Finalising your Product Overlay step. Once you have added your overlay asset to your product and created the appropriate [regions](https://support.spiffcommerce.com/docs/content/workflows/step-settings/regions/) for it, the Product Overlay step is now ready to use. ![](https://help.spiffcommerce.com/hs-fs/hubfs/Knowledge%20Base%20Import/Screen-Shot-2022-12-02-at-10_16_22-am-1.png?width=670&height=366&name=Screen-Shot-2022-12-02-at-10_16_22-am-1.png)   If you use the overlay step in a workflow, you MUST have a product overlay asset selected on the product page.   - [Getting started](https://help.spiffcommerce.com/knowledge-base/getting-started?hsLang=en#main-content) - [Ecommerce Plugins](https://help.spiffcommerce.com/knowledge-base/getting-started?hsLang=en#ecommerce-plugins) - [3D Models](https://help.spiffcommerce.com/knowledge-base/getting-started?hsLang=en#3d-models) - [Printer Setup](https://help.spiffcommerce.com/knowledge-base/getting-started?hsLang=en#printer-setup) - [Content](https://help.spiffcommerce.com/knowledge-base/content?hsLang=en#main-content) - [Workflows](https://help.spiffcommerce.com/knowledge-base/content?hsLang=en#workflows) - [Themes](https://help.spiffcommerce.com/knowledge-base/content?hsLang=en#themes) - [Workflow Steps](https://help.spiffcommerce.com/knowledge-base/content?hsLang=en#workflow-steps) - [Assets](https://help.spiffcommerce.com/knowledge-base/content?hsLang=en#assets) - [Configuration](https://help.spiffcommerce.com/knowledge-base/configuration?hsLang=en#main-content) - [Orders](https://help.spiffcommerce.com/knowledge-base/configuration?hsLang=en#orders) - [Products](https://help.spiffcommerce.com/knowledge-base/configuration?hsLang=en#products) - [Additional Features](https://help.spiffcommerce.com/knowledge-base/additional-features?hsLang=en#main-content) - [Order Management](https://help.spiffcommerce.com/knowledge-base/additional-features?hsLang=en#order-management) - [Engagement Optimisation](https://help.spiffcommerce.com/knowledge-base/additional-features?hsLang=en#engagement-optimisation) - [Additional Customisation](https://help.spiffcommerce.com/knowledge-base/additional-features?hsLang=en#additional-customisation) - [Dynamic Pricing](https://help.spiffcommerce.com/knowledge-base/additional-features?hsLang=en#dynamic-pricing) - [Troubleshooting](https://help.spiffcommerce.com/knowledge-base/troubleshooting?hsLang=en) - [Developer Docs](https://help.spiffcommerce.com/knowledge-base/developer-docs?hsLang=en) [![880d1d95153037f5b68501da7ef50994ebc548b0-256x102](https://help.spiffcommerce.com/hubfs/880d1d95153037f5b68501da7ef50994ebc548b0-256x102.svg "880d1d95153037f5b68501da7ef50994ebc548b0-256x102")](http://spiffcommerce.com)              www.spiffcommerce.com **Contact Us**                 ✉️  support@spiff.com.au              [Privacy Policy](https://www.spiffcommerce.com/privacy)            [Terms of Service](https://www.spiffcommerce.com/terms)         © 2025 SpiffCommerce. All rights reserved.