Show combinations of clothing, arrangements of decor items, showcase an ensemble of ingredients—the possibilities are endless when using Tailor's new Shop the look section. Include high-quality images with the section, then identify products in the image to reveal more details and options for customers to add that product (or two, three, or all the listed products).
Add this section to
Customize section settings
Click the Shop the look section to customize its general settings.
Enable Wide display for the section to span the full width of the window. Otherwise, the section will be limited by a horizontal container.
Upload an image for desktop devices by clicking Select Image below Desktop image.
Landscape-style images (images that are wider than tall) work best for the desktop image container and desktop customer experience.
Upload an image for mobile devices by clicking Select Image below Mobile image.
Portrait-style images (images that are taller than wide) work best for the mobile image container and mobile customer experience.
View in list
Customize your Call to action text (default 'Shop the look'), then adjust the Option style by selecting Dropdown or Selectable boxes.
Determine how Sold out options (variants not stocked) will display and whether customers can still interact with them using product form features.
Selectable keeps out-of-stock variants visible and allows customers to select them, however, they cannot be added to the cart.
Disabled will keep out-of-stock variants visible, but not selectable by the customer.
Hidden excludes out-of-stock variants altogether from the product form.
Activate Enable color swatches to include swatches in the listed products view.
Choose a Color option style to display each color as a Color swatch or Variant image.
Customize promotion blocks
Click one of the preloaded Product blocks to connect a product.
Identify the product to display by clicking Select product.
Adjust the Main color and Contrast color to change the colors in the product hotspot.
Identify the product position in the image using the axis sliders.
Use the Horizontal axis slider to shift the position to the left or right (x-axis). Dragging to the left will move the hotspot to the left and right to the right.
Use the Vertical axis slider to shift the position up or down (y-axis). Dragging to the left will raise the hotspot up toward the top of the image while dragging to the right will lower it toward the bottom of the image.