> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/events.md).

# Events

{% hint style="warning" %}
This section was added in v1.4.0 on Oct 6, 2022. See our [Changelog](/stiletto/readme/changelog.md) and [theme update guide](/stiletto/general/theme-updates.md) to learn more.
{% endhint %}

The **Events** section displays a calendar of upcoming events. Create custom event blocks in the theme editor or integrate your [Eventbrite](#integrate-eventbrite-events)) account to sync and display your latest events.

{% columns %}
{% column %}
![](/files/8PODuXVO0N7qpqtMKhgB)
{% endcolumn %}

{% column %}
{% embed url="<https://youtu.be/eEyNAXsvVL0>" %}
{% endcolumn %}
{% endcolumns %}

***

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

#### Set up section

In the editor side panel, click **(+) Add section** and select **Events**. Use the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit general **section styles**, like colors, width, padding, and the section header.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section header</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-header">/pages/nxNcI6zBaofEs4kObMMf#section-header</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

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

***

### <mark style="color:$primary;">Add custom event blocks</mark>

Add blocks with the date, venue, summary of your event. Choose to add an **Image**, **Link**, and display a **Date badge**.

> See the next section if you want to [sync and display your Eventbrite](#integrate-eventbrite-events) events instead.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click **(+) Add Event** to add a new block and/or click on an **Event block** to open the settings.

   > Click **Remove block** or the eye icon to delete or hide a block.
2. Enter text for the **Name** or title of your event.

   > We recommend a short title of a few words for your event.
3. Enter text for the **Date** of your event to display below the event name.

   > You can also use the date field to list an event as "TBA (To be announced)".
4. Enter text for the name of **Venue**.
5. (*Optional*.) Enter text for a **Summary** of your event.

   > We recommend a short event description of a few sentences.
6. Select a **Link** to make the event block a clickable link and redirect customers to the event page.
7. (*Optional*.) Click **Select image** to upload an event image to display above the event headings.

   > The **Event badge** will appear overlayed the image in the top-right corner.
8. (*Optional*) Set the **Day** and **Month** of your event for the **Date badge**. You can uncheck the **Enable date badge** option to hide it.

   > To edit the month abbreviations, click the more icon \[**`...`**] and **Edit default theme content** next to your theme in the Shopify admin. Search 'abbreviations' and edit the fields, then click **Save**.
9. Repeat steps 1 - 5 to create all your event blocks.
10. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

    ![](/files/tOHF9cG7TWZSPV5YgAH3)

    > Click **Remove block** in the block settings to delete a block.

    > Click the **Eye icon** to hide or unhide a block.
11. Click **Save**.

</details>

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

<table><thead><tr><th width="175">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Name</mark></td><td>Enter the name of the event.</td></tr><tr><td><mark style="color:blue;">Date</mark></td><td>Enter the date and time of the event.</td></tr><tr><td><mark style="color:blue;">Venue</mark></td><td>Enter the name of the location for the event.</td></tr><tr><td><mark style="color:blue;">Summary</mark></td><td>Enter multiple lines of text to describe the event.</td></tr><tr><td><mark style="color:blue;">Link</mark></td><td>Select or paste a link to show a "Learn more" text button below the event.</td></tr><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image to display above the event details. The date badge, if enabled, will appear overlayed the image.</td></tr><tr><td><mark style="color:blue;">Enable date badge</mark></td><td>Show a badge with the day and month of the event. Select the <strong>Day</strong> and <strong>Month</strong> using the dropdowns.</td></tr></tbody></table>

### <mark style="color:$primary;">Integrate Eventbrite events</mark>

{% hint style="info" %}
Eventbrite is an event planning and ticket sales website. To use this feature, you must have an [Eventbrite account](https://www.eventbrite.ca/signin/signup/) with at least one published upcoming event.
{% endhint %}

If you have an [Eventbrite](https://www.eventbrite.ca/) account, you can add your **Access token** to sync and display your upcoming events. The event info entered in Eventbrite, including the **Image** and **Summary**, will automatically appear in the event block.

**Note**: When Eventbrite events are enabled, custom event blocks will not appear.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on **Events** to open the section settings.

   ![](/files/YiG1bJvBQmjaVHwc2WMP)
2. Paste your **Access token** in the field provided.

   > To find your **Private token**, go to your [API keys page](https://www.eventbrite.com/platform/api-keys) on Eventbrite. Click the copy icon of the **Your private token** field to paste it in your theme editor.
3. Choose the **Number of events** to display using the slider.

   > You can add a section **Link** in the settings above if you want to link to all events on your Eventbrite page.
4. Click **Save**.

</details>

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

<table><thead><tr><th width="168">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Access token</mark></td><td>Log into your Eventbrite account to get your <a href="https://www.eventbrite.com/platform/">Access token here</a>.</td></tr><tr><td><mark style="color:blue;">Number</mark></td><td>Select the maximum number of events to show from your Eventbrite account: between <strong>3</strong> and <strong>12</strong> events.</td></tr></tbody></table>

<h2 align="center">Events style and layout</h2>

***

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

Adjust the section **Layout** by choosing the **number of columns** and the image shape (**aspect ratio**) of the event blocks.

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

<table><thead><tr><th width="208">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Select the number of event blocks to show per row for desktop screens. Either <strong>2</strong>, <strong>3</strong>, or <strong>4</strong>.</td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Select the number of event blocks to show per row for mobile screens. Either <strong>1</strong> or <strong>4</strong>.</td></tr><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td>Crop the shape of images for the event blocks to <strong>Square (1:1)</strong>, <strong>Landscape (3:2)</strong>, or <strong>Portrait (2:3)</strong>. Choose <strong>Natural</strong> to display the original image shapes.</td></tr></tbody></table>

### <mark style="color:$primary;">Date badge style</mark>

Select a **color scheme** for the event badges, and display theme with an **Outline** or **Dropshadow**.

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

<table><thead><tr><th width="205">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Select the color scheme to apply the background and text colors.</td></tr><tr><td><mark style="color:blue;">Style</mark></td><td>Display badges with <strong>Outline</strong> or <strong>Dropshadow</strong>.</td></tr></tbody></table>

***

> **Related links**
>
> [Multi-column section](/stiletto/sections/theme-sections/multi-column.md)\
> [Eventbrite](https://www.eventbrite.com/)