Dynamic Imaging is not a standard Searchspring Product offering. Talk to your Sales Representative to discuss adding this feature to your Service Plan.
Most common in Apparel and Fashion industries, interactive Color Swatches exist in the Product Listing item display, allowing the shopper to manually click a Color Swatch, updating the displayed Thumbnail Image for that chosen variation.
However, rather than manually forcing your shopper to click the Color Swatch for the variation they want to see, your shopper would have a much better experience if the displayed Thumbnail Images automatically updated to reflect a Color Filter selection and/or when Searching by Color. For example, with the results Filtered by Blue, your shopper would expect to see Product Images specific to Blue, and not the default Thumbnail Image assigned to that Product.
We call this Dynamic Imaging. Given the required JSON data format, Searchspring can achieve this dynamic logic in your Product Listing display, showing the shopper color-specific images when Filtering or Searching by Color:
[{
"option_id": 146,
"color": "Coral Red",
"color_family": "Red",
"swatch_hex": "#ff4040",
"thumbnail": "/images/pgf-ess-cord-sm_600x600.png",
"price": 54,
"status": "In Stock"
},{
"option_id": 147,
"color": "Kelly Green / White",
"color_family": ["Green","White"],
"swatch_hex": ["#4cbb17","#ffffff"],
"thumbnail": "/images/pgf-ess-kgwht-sm_600x600.png",
"price": 54,
"status": "In Stock"
},{
"option_id": 148,
"color": "Fuschia Orange",
"color_family": ["Orange","Pink"],
"swatch_img": "/swatches/fuschia_orange.png",
"thumbnail": "/images/pgf-ess-fuor-sm_600x600.png",
"price": 68.95,
"status": "Out of Stock"
},{
"option_id": 149,
"color": "Perfect Petals",
"color_family": "Pink",
"swatch_img": "/swatches/perfect_petals.png",
"thumbnail": "/images/pgf-ess-prpt-sm_600x600.png",
"price": 68.95,
"status": "In Stock"
},{
"option_id": 150,
"color": "Island Time",
"color_family": ["Yellow","Orange","Multi"],
"swatch_img": "/swatches/island_time.png",
"thumbnail": "/images/pgf-ess-istm-sm_600x600.png",
"price": 68.95,
"status": "Out of Stock"
}]
Required Values
- color: The Name of the Color variant; attaching this to the Color Swatch object allows Searches by these Simple Colors to trigger our dynamic logic
- color_family: These assignments attached to the Color Swatch object must match the Color Family Filter assignments found in your core Product Feed; provide multiple values if this Color belongs to multiple Families
- swatch_hex / swatch_img: Based on how you want the Color Swatch to display, provide either a HEX Color or Swatch Image URL; when displaying dual-color swatches, include two HEX Colors in your swatch_hex assignment
Optional Values
- option_id: If your item display includes an Add to Cart function, include the option's id to ensure we add the correct variant to the Cart once a Color Swatch is triggered
- price: If your Color variants differ in Pricing, include these prices to dynamically show the correct Price when a Color Swatch is triggered
- status: Include this indicator if In Stock vs Out of Stock Color Swatches are to display differently
Comments
0 comments
Please sign in to leave a comment.