---
description: >-
  The "Featured collage" section allows you to spotlight a chosen product by
  positioning it in a distinct area alongside the predefined collection.
---

# Featured collage

{% hint style="success" %}
**Tip:** This section can be enhanced with the "[<mark style="color:blue;">Product</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/featured-collage/product)" and "[<mark style="color:blue;">Image</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/featured-collage/image)" blocks. Press the **"Add block"** button to connect it with the section.&#x20;

\*Only one additional block can be displayed in this section. To add a new block, first remove the default block by clicking the trash icon next to its name.
{% endhint %}

## Featured collage

{% hint style="success" %}
**Tip:** To hide the title, description, or button, leave the corresponding fields blank.
{% endhint %}

Use the **"Heading"** placeholder to add a section title. It will be placed on the top of the section.

The font size of the title can be changed to "Small", "Medium", or "Large" in the **"Heading font size"** drop-down.

If you need to set up the color of the title, use the **"Heading color"** picker. Here you can paste the hex code to the related field or choose the color using the paint pallet. The color settings will be used for both desktop and mobile.

Use the **"Description"** input field to add some descriptive text strings to the section that will appear under the heading.

The color of the description can be set in the **"Description color"** picker. The color you apply for the item will be used for a desktop and mobile.

### Content <a href="#content" id="content"></a>

In the **"Collection"**, choose any collection by pressing the "Select" button to display products in the section.

The collection's position can be set to the left or right in the **"Collection position"** picker. This option won't work on mobile and can be applied only to the desktop.

The number of products per row can be set in the **"Products in row"**. Choose if to display 2, 3, 4, 5, or 6 items in each row.

By adjusting the **"Image or product column width"** slider from 25 to 75, you can determine the width of the product grid relative to the featured product. Settings the point to 25 on the slider results in a wider display of the collection compared to the product. As the input number changes, the width of the featured image increases accordingly.

Here is an example of the settings that can be applied to the section in the following paragraph:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FWUlnByPnubIj1clwPbZ6%2Ffeatured%20collage_content.png?alt=media&#x26;token=06100d8e-472a-461d-b67b-1ba1adb2cc2b" alt=""><figcaption></figcaption></figure>

### Layout

The layout settings change the look and feel of the section.

Choose one of the options "Heading on top" or "Heading top center" in the **"Layout"** picker.

Use the **"Mobile align"** settings to change the alignment of the heading and description to the "Left" or "Center". Leave the "Auto" option to use the pre-designed theme settings.

To add a divider between sections, use the **"Dividing line"** to set the position: "Top", "Bottom", or "Both". The dividing line will be hidden once you use the option "None".

On the **"Top spacing"** and **"Bottom spacing"** scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### **Button "View All"** <a href="#button-view-all" id="button-view-all"></a>

Activate the **"Enable "View all"** checkbox to show the "View All" button on desktop and mobile if the collection contains more products than is displayed in the column.

Use the **"Style"** drop-down to change the button's appearance in the sections. The theme includes three styles that can work out in your store: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following [help page](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#buttons).

Use the **"Color"** picker to change the button background color for the "Primary" style. For the "Secondary" style the colorized text and border inside the button will be added. If you used the "Link style", the color will be applied to the text link.

### Product card <a href="#product-card" id="product-card"></a>

Choose the appropriate aspect ratio of the product images in the **"Image ratio"**. You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Each image ratio you can check [here](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#content).

**Show second image on hover**

Use the option to display a second product image when hovering over the product card.

**Show vendor**

Display the product vendor above the product title by simply enabling the checkbox.

**Show variants**

To showcase the available product variants for the product cards and a featured image, activate the option.

Check the following examples of how the section might be displayed on desktop and mobile:

{% tabs %}
{% tab title="Desktop" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FfQtXJSrwaYIyaZ4fbdFS%2Ffeatured%20collage_desktop.png?alt=media&#x26;token=eedc389f-3194-4973-bcfa-a9891816ed72" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FaBvDMgpNfXFCaSMVDt6k%2Ffeatured%20collage_mobile.png?alt=media&#x26;token=1a5b0dfc-76a0-44c2-b438-2804f806db3d" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}
