# Shoppable hero

{% columns %}
{% column width="58.333333333333336%" %}

<div data-with-frame="true"><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FPPVGOBz0rznPNUbESP6M%2FShoppable-hero-2.jpg?alt=media&#x26;token=126aa4c5-73c8-444d-9361-f3c780ae31a1" alt=""><figcaption><p>Click to enlarge</p></figcaption></figure></div>
{% endcolumn %}

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

Featured product cards

Supports autoplay video

Mobile-specific media options

Flexible overlay content

Custom layout and styles
{% endhint %}

{% hint style="info" %}
**Blocks**

[Content](#content-block)
{% endhint %}

{% endcolumn %}
{% endcolumns %}

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

***

You can set the section height in **pixels** to be the exact same height on all devices or as a **percentage** to adapt to the section height of the screen height.

<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;">Section height</mark></td><td valign="top"><mark style="color:$info;">Adapt to screen height (50 - 100%)</mark><br><mark style="color:$info;">Fixed height (300 - 800px)</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile section height</mark></td><td valign="top"><mark style="color:$info;">Adapt to screen height (50 - 100%)</mark><br><mark style="color:$info;">Fixed height (300 - 800px)</mark></td></tr></tbody></table>

<h2 align="center">Background media</h2>

***

Display an image or autoplay video (without sound) as the section background. After uploading your media, you can set the focal point, overlay opacity, and choose to show alternate mobile media to best fit smaller screen sizes.

<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;">Media type</mark></td><td valign="top"><mark style="color:$info;">Image</mark><br><mark style="color:$info;">Video</mark></td></tr></tbody></table>

<details>

<summary>Image</summary>

<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">Upload an image with a minimum pixel width of 2500px for best results.</td></tr><tr><td valign="top"><mark style="color:blue;">Custom mobile image</mark></td><td valign="top">Upload an alternate image to display on mobile devices. You may want to use an image with portrait orientation.</td></tr></tbody></table>

</details>

<details>

<summary>Video</summary>

<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;">Video</mark></td><td valign="top">Upload an  <code>.mp4</code> or <code>.mov</code> . For best results, keep the video length under 15 seconds.</td></tr><tr><td valign="top"><mark style="color:blue;">Video focal point</mark></td><td valign="top">Specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.</td></tr><tr><td valign="top"><mark style="color:blue;">Custom mobile video</mark></td><td valign="top">Upload an alternate video to display on mobile devices. You may want to use a video with portrait orientation.</td></tr><tr><td valign="top"><mark style="color:blue;">Mobile video focal point</mark></td><td valign="top">Specify the main focus of the mobile video.</td></tr></tbody></table>

</details>

<details>

<summary>Overlay colors</summary>

<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;">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>

</details>

<h2 align="center">Content block</h2>

***

Click the **Content block** nested under the section to add heading text with buttons that overlay the section background media. You can customize the position and alignment of the content in the section settings.

<details>

<summary>Content</summary>

<sub><mark style="color:$info;">Click Content block 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;">Overline</mark></td><td valign="top">Add small text above the heading.</td></tr><tr><td valign="top"><mark style="color:blue;">Overline size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Heading</mark></td><td valign="top">Add a section title.</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><tr><td valign="top"><mark style="color:blue;">Text</mark></td><td valign="top">Add multiple lines of rich text. Use the buttons to make the text bold or italicized, or to add a link.</td></tr><tr><td valign="top"><mark style="color:blue;">Text size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr></tbody></table>

</details>

<details>

<summary>Buttons</summary>

Add a primary and secondary button under the text content. When both buttons are added, they will appear inline.

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

<table data-header-hidden><thead><tr><th width="239.54400634765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Link</mark></td><td valign="top">Enter the URL that you want the button to link to.</td></tr><tr><td valign="top"><mark style="color:blue;">Label</mark></td><td valign="top">Add text to the button.</td></tr><tr><td valign="top"><mark style="color:blue;">Size</mark></td><td valign="top"><mark style="color:$info;">XS</mark><br><mark style="color:$info;">S</mark><br><mark style="color:$info;">M</mark><br><mark style="color:$info;">L</mark></td></tr><tr><td valign="top"><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Style</mark></a></td><td valign="top"><mark style="color:$info;">Solid</mark><br><mark style="color:$info;">Outline</mark><br><mark style="color:$info;">Text</mark></td></tr><tr><td valign="top"><a data-footnote-ref href="#user-content-fn-2"><mark style="color:blue;">Color scheme</mark></a></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Primary</mark><br><mark style="color:$info;">Secondary</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Overlay soft</mark></td></tr></tbody></table>

</details>

<details>

<summary>Layout</summary>

Adjust the **max width** of the content.

<sub><mark style="color:$info;">Click Content block 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;">Content width</mark></td><td valign="top"><mark style="color:$info;">300 - 1440px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Make full width</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

Change the **position** and **alignment** of the content.

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

<table data-header-hidden><thead><tr><th width="239.3984375" valign="top">Setting</th><th valign="top">Options</th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Position</mark></td><td valign="top"><mark style="color:$info;">Top / Middle / Bottom</mark><br><mark style="color:$info;">Left / Center / Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile position</mark></td><td valign="top"><mark style="color:$info;">Top / Middle / Bottom</mark><br><mark style="color:$info;">Left / Center / Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Alignment</mark></td><td valign="top"><mark style="color:$info;">Left / Center / Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile alignment</mark></td><td valign="top"><mark style="color:$info;">Left / Center / Right</mark></td></tr></tbody></table>

</details>

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

***

Select a list of products to display over the hero media.

<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;">Products</mark></td><td valign="top">Select one or more products to display as cards with a "View product" button.</td></tr><tr><td valign="top"><mark style="color:blue;">Position</mark></td><td valign="top"><mark style="color:$info;">Left / Center / Right</mark></td></tr></tbody></table>

<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;">60 - 200px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile image width</mark></td><td valign="top"><mark style="color:$info;">60 - 120px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Card width</mark> (<mark style="color:$info;">Desktop only)</mark></td><td valign="top"><mark style="color:$info;">340 - 420px</mark></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th width="239.3984375" valign="top">Setting</th><th valign="top">Options</th></tr></thead><tbody><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><tr><td valign="top"><mark style="color:blue;">Vendor</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox" checked></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" checked></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Card padding</mark></td><td valign="top"><a data-footnote-ref href="#user-content-fn-3"><mark style="color:$info;">Use globals</mark></a><br><mark style="color:$info;">Custom (1 - 8)</mark></td></tr><tr><td valign="top"><a data-footnote-ref href="#user-content-fn-4"><mark style="color:blue;">Corner radius</mark></a></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;">Button style</mark></td><td valign="top"><mark style="color:$info;">Solid</mark><br><mark style="color:$info;">Outline</mark><br><mark style="color:$info;">Text</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Button color scheme</mark></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Primary</mark><br><mark style="color:$info;">Secondary</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Overlay soft</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Sale price color</mark></td><td valign="top"></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-5"><mark style="color:blue;">Border</mark></a></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-5"><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-5"><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 [global button styles](https://help.fluorescent.co/section-studio/sections/global-styles/buttons)

[^2]: Modify [global style colors](https://help.fluorescent.co/section-studio/sections/global-styles/colors)

[^3]: Modify card padding in [global styles](https://help.fluorescent.co/section-studio/sections/global-styles/layout-and-spacing)

[^4]: Modify option in [global styles](https://help.fluorescent.co/section-studio/global-styles/borders-and-styles#medium-elements)

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