# Events

{% hint style="warning" %}
This section was added in v1.4.0 on Oct 6, 2022. See our [Changelog](https://help.fluorescent.co/stiletto/readme/changelog) and [theme update guide](https://help.fluorescent.co/stiletto/general/theme-updates) 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.

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FhBJgBZQ9yX4GQoDA9xzW%2Fevents-section.jpeg?alt=media\&token=492517c3-eabd-4cba-ae01-389fee512260)

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

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% endhint %}

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

Click the section to edit the general **section styles:** [Padding](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Top divider](https://help.fluorescent.co/stiletto/sections/using-sections#section-top-divider) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#section-animations)

### Add custom event blocks

***

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.

   ![](https://github.com/fluorescent/kb-stiletto/blob/main/.gitbook/assets/event-block-settings.jpeg)

   > 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:

    ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-22765d66f3708b95b5907a71e6b24326594ad146%2Fshopify-content-drag-handles.jpeg?alt=media)

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

`Click Event block to find settings`

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

### Integrate Eventbrite events

***

{% 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.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-13387875846445be2109e23d407668e7c02f5302%2Fevents-eventbrite-settings.jpeg?alt=media)
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>

`Click Events section to find settings`

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

## Change events layout

***

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

`Click Events section to find settings`

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

## Section header

***

The **Section header** appears above the section. Add a **Heading**, **Subheading**, and optional **Link**.

<details>

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

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

1. Click on the **Events** section to open the section settings.
2. Enter **Heading** text for the title of your section. The default heading is "Events".

   > Delete the text in this field to remove the heading.
3. Enter **Subheading** text to display one or a few sentences below the **Heading**. The default subheading is "Our upcoming events".

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
4. Choose a **Link** and enter **Link text** to display a clickable link to another page beneath the headings.
5. Select an **Alignment** for the headings and link at the top of the section. Either: **Left**, **Center**, or **Right**.
6. Click **Save**.

</details>

`Click Events section to find settings`

<table><thead><tr><th width="176">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Enter text to display a section title above the collection list.</td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics.<br><br>This option doesn't change the heading's appearance.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Enter text to display a section subheading below the heading.</td></tr><tr><td><mark style="color:blue;">Link</mark></td><td>Select or paste a URL for the link.</td></tr><tr><td><mark style="color:blue;">Link text</mark></td><td>Enter text to display a link label. Leave this field blank to remove the link.</td></tr><tr><td><mark style="color:blue;">Alignment</mark></td><td>Position the headings and link at the top of the section. Either: <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong>.</td></tr></tbody></table>

## Section colors

***

Change the colors of the background, text, and button elements.

`Click Events section to find settings`

<table><thead><tr><th width="205">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Background</mark></td><td>Select the color of the section background.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Enter multiple lines of text.</td></tr><tr><td><mark style="color:blue;">Invert date badge</mark></td><td>Swap the text and background colors to use for the date badge.</td></tr></tbody></table>

***

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