--- title: Picture Step description: Spiff Knowledge Base --- [Skip to content](https://help.spiffcommerce.com/knowledge-base/content/workflows/step-types/pictures#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) # Picture Step ## A guide to using Picture Steps, including configuration, options, regions, and the distinction between images and illustrations. The picture step allows users to choose from a preselected list of JPEG and PNG [images](https://support.spiffcommerce.com/docs/content/assets/images/) to add to their design. [Images](https://support.spiffcommerce.com/docs/content/assets/images/) are raster-based PNGs or JPGs/JPEGs that you can curate for use in workflows rather than [Illustrations](https://support.spiffcommerce.com/docs/content/assets/illustrations/) from an [Illustration steps](https://support.spiffcommerce.com/docs/content/assets/illustrations/). This could be used for anything from changing the base design of your products to selecting from a variety of patches or different predefined logos. Picture steps can also be used in conjunction with [Material steps,](https://support.spiffcommerce.com/docs/content/workflows/step-types/materials/) where you want to change the texture of a products surface, but still want to add designs or personalisation to it, this picture step could function simply as a color selection with a variety of different color [images](https://support.spiffcommerce.com/docs/content/assets/images/), with any detail you need. The difference between [images](https://support.spiffcommerce.com/docs/content/assets/images/) and [illustrations](https://support.spiffcommerce.com/docs/content/assets/illustrations/) is that [images](https://support.spiffcommerce.com/docs/content/assets/images/) are raster-based, meaning you cannot change the color of the components of the [image](https://support.spiffcommerce.com/docs/content/assets/images/) and you may notice a loss of quality if increase the size of them with regions significantly. On the other hand, [illustrations](https://support.spiffcommerce.com/docs/content/assets/illustrations/) are vector based and can change color and be resized in any manner while retaining a smooth edge. Complex [images](https://support.spiffcommerce.com/docs/content/assets/images/) should always be used in a raster format, since an SVG with far too many paths would be difficult to display on web and mobile application ![](https://help.spiffcommerce.com/hubfs/Knowledge%20Base%20Import/Screen20Shot202020-09-2420at2011_28_4620am-Aug-06-2025-03-31-15-2425-AM.png) ## Adding Steps Let's start by adding our new step. Navigate to your desired [workflow](https://support.spiffcommerce.com/docs/content/workflows/) and choose a scene within, simply use the "Add Step+" button and select the "Picture Step". Once an option has been added and some regions, hit save. ![pictureStep AddStep](https://help.spiffcommerce.com/hubfs/Knowledge%20Base%20Import/pictureStep-AddStep-1024x440-1.png) ## Picture Step Config The Picture step features standard [step configurations](https://support.spiffcommerce.com/docs/content/workflows/step-settings/config/), read more about [step config here.](https://support.spiffcommerce.com/docs/content/workflows/step-settings/config/) ![Screenshot 2023 03 09 at 11.31.47 am](https://help.spiffcommerce.com/hubfs/Knowledge%20Base%20Import/Screenshot-2023-03-09-at-11_31_47-am-1024x137-1.png) ## Picture Step Options The ['Options'](https://support.spiffcommerce.com/docs/content/workflows/step-settings/options/) for Picture Steps are standard, read more about [Options](https://support.spiffcommerce.com/docs/content/workflows/step-settings/options/) and [Shared Options](https://support.spiffcommerce.com/docs/content/options/) [here.](https://support.spiffcommerce.com/docs/content/workflows/step-settings/options/) ![](https://help.spiffcommerce.com/hubfs/Knowledge%20Base%20Import/Screen20Shot202020-10-0520at2011_23_2120am-2.png) ## Picture Step Regions The [Region](https://support.spiffcommerce.com/docs/content/workflows/step-settings/regions/) behaviour for [Picture Steps](https://support.spiffcommerce.com/docs/content/workflows/step-settings/regions/) is standard. Read more about [Regions](https://support.spiffcommerce.com/docs/content/workflows/step-settings/regions/) here. Since [Images](https://support.spiffcommerce.com/docs/content/assets/images/) can be export in many different resolutions and height/width ratios, it's important to set the regions based on the same ratio as the [image](https://support.spiffcommerce.com/docs/content/assets/images/) asset, to avoid stretching it. Every asset used in this step should have the same height/width ratio. Eg. all exported in a rectangle format, or all square, rather than a variety of sizes. - [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.