# Shop the look

{% columns %}
{% column width="58.333333333333336%" %}
Promote multiple products in an image with **Hot spots** links for each product.

<div><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FyQZFlfoiVb9OH7k3FNBk%2Fshop-the-look-1A.png?alt=media&#x26;token=0f6f5130-86e3-4fb8-ab5c-939ed2caf0dc" alt=""><figcaption></figcaption></figure> <figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2F8VuwmzGc1pkk0x2T9714%2Fshop-the-look-1B.png?alt=media&#x26;token=3fb8bb55-8588-4f9e-9796-ef703fed3f42" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}

{% column width="41.666666666666664%" %}
{% hint style="info" %}
**Key features**

Hot spots&#x20;

Product showcase

Flexible overlay content

Custom layout and styles
{% endhint %}
{% endcolumn %}
{% endcolumns %}

<h2 align="center">Set up image</h2>

***

Upload a single image of two or more of your products together. Adjust the position, size, and shape of your image before adding the hot spots next.

### <mark style="color:$primary;">Image and overlay color</mark>

Upload an image and optional mobile image for smaller screen sizes. Adjust the overlay colour or set it to 0% to turn it off.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Image</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Custom mobile image</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"> </li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Overlay opacity</mark></td><td valign="top"><mark style="color:$info;">0 - 100%</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr></tbody></table>

### <mark style="color:$primary;">Image layout</mark>

Set the image placement, width, and media ratio.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Desktop placement</mark></td><td valign="top"><mark style="color:$info;">Left /</mark> <mark style="color:$info;">Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Desktop width</mark></td><td valign="top"><mark style="color:$info;">40 - 70%</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Media ratio</mark></td><td valign="top"><mark style="color:$info;">Portrait (2:3)</mark><br><mark style="color:$info;">Portrait (4:5)</mark><br><mark style="color:$info;">Square (1:1)</mark><br><mark style="color:$info;">Landscape (5:4)</mark><br><mark style="color:$info;">Landscape (3:2)</mark><br><mark style="color:$info;">Custom</mark></td></tr></tbody></table>

<h2 align="center">Product showcase</h2>

***

The product showcase appears next to the main image. When hot spots are clicked, the linked product will appear with an image, title, price, and other details. You can customize the image ratio, image width, and other styles, including the overall appearance.

### <mark style="color:$primary;">Heading</mark>&#x20;

Upload an image or video to appear with the collection list on mobile devices.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Heading</mark></td><td valign="top"><mark style="color:$info;">Portrait (2:3)</mark><br><mark style="color:$info;">Portrait (4:5)</mark><br><mark style="color:$info;">Square (1:1)</mark><br><mark style="color:$info;">Landscape (5:4)</mark><br><mark style="color:$info;">Landscape (3:2)</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Heading size</mark></td><td valign="top"><mark style="color:$info;">1 - 6</mark></td></tr></tbody></table>

### <mark style="color:$primary;">Desktop product style</mark>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Image ratio</mark></td><td valign="top"><mark style="color:$info;">Portrait (2:3)</mark><br><mark style="color:$info;">Portrait (4:5)</mark><br><mark style="color:$info;">Square (1:1)</mark><br><mark style="color:$info;">Landscape (5:4)</mark><br><mark style="color:$info;">Landscape (3:2)</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Image width</mark></td><td valign="top"><mark style="color:$info;">200 - 500px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Vendor</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"> </li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Out of stock badge</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"> </li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Sale price</mark></td><td valign="top"><mark style="color:$info;">30 - 70%</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Appearance</mark></td><td valign="top"><mark style="color:$info;">Plain</mark><br><mark style="color:$info;">Card</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Corner radius</mark></td><td valign="top"></td></tr></tbody></table>

### <mark style="color:$primary;">Mobile product style</mark>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Image ratio</mark></td><td valign="top"><mark style="color:$info;">Portrait (2:3)</mark><br><mark style="color:$info;">Portrait (4:5)</mark><br><mark style="color:$info;">Square (1:1)</mark><br><mark style="color:$info;">Landscape (5:4)</mark><br><mark style="color:$info;">Landscape (3:2)</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Image width</mark></td><td valign="top"><mark style="color:$info;">200 - 500px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Vendor</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"> </li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Out of stock badge</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"> </li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Sale price</mark></td><td valign="top"><mark style="color:$info;">Select color</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Card color scheme</mark></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Card padding</mark></td><td valign="top"><mark style="color:$info;">Use globals</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Corner radius</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile placement</mark></td><td valign="top"><mark style="color:$info;">Over image</mark><br><mark style="color:$info;">Stacked below</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Overlay style</mark></td><td valign="top"><mark style="color:$info;">Gradient</mark><br><mark style="color:$info;">Solid</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Overlay opacity</mark></td><td valign="top"><mark style="color:$info;">0 - 100%</mark></td></tr></tbody></table>

<h2 align="center">Add hot spots</h2>

***

Hot spots are clickable icons that mark the different products in your shoppable image. Select what products to link to and position them over the products in your image.

<sub><mark style="color:$info;">Click hot spot block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="196.5">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Product</mark></td><td>Select the product that the hot spot links to.</td></tr><tr><td><mark style="color:blue;">Horizontal position</mark></td><td>For desktop and mobile, use the slider to move the hot spot from left to right to align with the product's horizontal position.</td></tr><tr><td><mark style="color:blue;">Vertical position</mark></td><td>For desktop and mobile, use the slider to move the hot spot from bottom to top to align with the product's vertical position.</td></tr></tbody></table>

### <mark style="color:$primary;">Hot spots style</mark>

Choose to show a number for each hot spot, set the hot spot and number colors, and adjust their size for desktop and mobile.

<sub><mark style="color:$info;">Click hot spot block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="196.5">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show hot spot numbers</mark></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><mark style="color:blue;">Hot spot color</mark></td><td></td></tr><tr><td><mark style="color:blue;">Number color</mark></td><td></td></tr><tr><td><mark style="color:blue;">Desktop size</mark></td><td><mark style="color:$info;">20 - 40px</mark></td></tr><tr><td><mark style="color:blue;">Mobile size</mark></td><td><mark style="color:$info;">20 - 40px</mark></td></tr></tbody></table>

<h2 align="center">Section styles</h2>

***

Customize general style options for the section and content area. Settings for **Content area** allow you to adjust the width, borders, and dropshadow of the container of the section content.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<details>

<summary>Content area</summary>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Width</mark></td><td><mark style="color:$info;">Full width</mark><br><mark style="color:$info;">Full width padded</mark><br><mark style="color:$info;">Page width</mark></td></tr><tr><td><mark style="color:blue;">Full width on mobile</mark></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> option.</mark></td></tr><tr><td><mark style="color:blue;">Set content to page width</mark></td><td><ul class="contains-task-list"><li><input type="checkbox" checked></li></ul></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Border</mark></a></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Corner radius</mark></a></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> and <strong>Page width</strong> options.</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Dropshadow</mark></a></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Section</summary>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Top padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Bottom padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Dividers</mark></td><td><mark style="color:$info;">None</mark><br><mark style="color:$info;">Top only</mark><br><mark style="color:$info;">Bottom only</mark><br><mark style="color:$info;">Both</mark></td></tr><tr><td><mark style="color:blue;">Force dividers full width</mark></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr><tr><td><mark style="color:blue;">Anchor ID</mark></td><td>Link directly to the section on any page. <a href="../anchor-id">Learn more</a></td></tr></tbody></table>

</details>

[^1]: Modify in [Global styles > Borders and styles > Large elements](https://help.fluorescent.co/section-studio/global-styles/borders-and-styles#large-elements)