# Collage

***

### 1. Our guide to set up a Collage section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Select **Collage.**
* Click **Save.**
  {% endhint %}

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/6aa6fb30-4a22-4123-bade-1ee08e7708fc/Screenshot%202023-11-15%20at%205.21.44%20PM.png" alt=""><figcaption></figcaption></figure>

### 2. Section Blocks:

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FCWUSCdOCzrsVtkkWLJxE%2FScreenshot%202023-12-23%20at%2011.10.44%20PM.png?alt=media&#x26;token=90fa2f36-af62-4ea0-99ab-8e7ded5aac9d" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Each College section contains three blocks. By default, the section contains a **video**, **product**, and **collection** block. *To create a collage of more than three blocks, add additional collage sections below the first and don't include a Heading value to the lower collage sections. The collage sections will appear to flow together as a single section.*

Mix and match between large and small blocks to create many different grid effects.
{% endhint %}

* **Image**: Use the "**Select image**" setting to add an image from the **Image library**.&#x20;

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/e1e1de45-306e-4679-b366-977c5fe1aacf/Screenshot%202023-11-15%20at%205.29.30%20PM.png" alt=""><figcaption></figcaption></figure>

* **Product**: Use the “**Select product**” setting to add a product.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FCKx4ipeaFsWVn3H38qWJ%2FScreenshot%202023-12-21%20at%205.08.42%20PM.png?alt=media&#x26;token=ac80c666-bba8-4b01-8b03-4dde2c5042d7" alt=""><figcaption></figcaption></figure>

* **Collection**: Use the “**Select collection**” setting to add a collection.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FT5OoZcRKtQE9WN5i4FGe%2FScreenshot%202023-12-21%20at%204.28.06%20PM.png?alt=media&#x26;token=eb93c946-8765-47df-946b-0d6520320162" alt=""><figcaption></figcaption></figure>

* **Video**: Paste a video link into the URL field to add a video to the section.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2F9oBbZKxYusdh5l6obFK6%2FScreenshot%202023-12-21%20at%205.02.43%20PM.png?alt=media&#x26;token=76736739-bf1b-44fd-9907-82ae5dfcb31b" alt=""><figcaption></figcaption></figure>

### **3. Collage section settings:**

* Click on the **Collage** section to open the section settings.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2F9H2s0nw3OaTJzZkhjC10%2FScreenshot%202023-11-15%20at%205.20.28%20PM.png?alt=media&#x26;token=439f755b-8f81-432a-9a98-ac10847195a5" alt=""><figcaption></figcaption></figure>

* **Heading:** enter heading text to display as a section title. Or leave it blank if you do not want to display it.&#x20;

<figure><img src="https://t9008110498.p.clickup-attachments.com/t9008110498/9ced1b31-4d49-495b-9cbb-821e5d5b4778/Screenshot%202023-11-15%20at%205.26.14%20PM.png" alt=""><figcaption></figcaption></figure>

* **Desktop layout**: adjust the large block’s position to the left or right.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FaltLDxgKnqhngWIHwZFR%2FScreenshot%202023-12-21%20at%205.06.11%20PM.png?alt=media&#x26;token=25a65000-a6e7-4d9e-bf3d-63a298a7d688" alt=""><figcaption><p><strong>Desktop layout: Right large block</strong></p></figcaption></figure>

* **Mobile layout**: adjust the blocks' position to the Collage or Column.

{% tabs %}
{% tab title="Collage" %}

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FTtX5pbwOMimWyuklhdU6%2FScreenshot%202023-12-21%20at%205.24.05%20PM.png?alt=media&#x26;token=96226db6-52ba-4483-a30f-a18e3eb334f7" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Column" %}

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FS2T0zzguj9dW9vJEzxb8%2FScreenshot%202023-12-21%20at%205.24.15%20PM.png?alt=media&#x26;token=ed0a9452-9842-4b7c-9016-e73ea58f10cc" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}
