# Events

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

## Watch tutorial

Watch the step-by-step tutorial for the Events section, which includes an advanced tutorial for creating a product page for events.

{% embed url="<https://www.youtube.com/embed/eEyNAXsvVL0>" %}

## Set up section

Add this section to your template and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

{% 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/spark/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/spark/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}

<details>

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

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

1. Select a **Template** to edit from the dropdown menu in the top bar.

   > Learn how to use templates in our [Templates guide](https://help.fluorescent.co/spark/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Events**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.

</details>

### 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://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-48823e8f32b3bb668dd37e23754b99c9885df402%2Fevent-block-settings.jpeg?alt=media)

   > 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://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%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>

### Integrate Eventbrite events

{% hint style="info" %}
**Note |** 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://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%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.

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-67fb6afc143f1d844dc4bcef385e71f968a43c87%2Fevents-private-token.jpeg?alt=media)
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>

## **Section headings and link**

Add section headings and an optional link to direct customers to a page on your store or your Eventbrite page.

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

## Section style

Customize the section **Style** with options for section **Spacing**, **Animation**, and **Alternate section color**.

<details>

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

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

1. Click on the Events section to open the settings.
2. Select the **Columns per row (Desktop)** (**`2 - 4`**) and **Mobile columns per row** (**`1 -2`**).
3. Choose whether to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.

   > Learn more about [Section animations](https://help.fluorescent.co/spark/theme-styles/animation) in Spark.
4. Choose to enable the **Alternate section color** to apply the secondary section colors selected in your theme settings for colors.
5. Select a **Spacing** option to add padding around the section content.

   > Add padding to either the **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-dea3714e6b027ccef067f49888512f7fee4715ee%2Ftheme-section-spacing.jpeg?alt=media)
6. Select the **Spacing amount** for the padded sides of the section: **Full**, **Half**, or **Minimum**.
7. Click **Save**.

</details>

## Settings reference

Click the **Events** section to find the following settings.

#### **Section content**

| Setting    | Description                                                               |
| ---------- | ------------------------------------------------------------------------- |
| Heading    | Add text to show a main heading.                                          |
| Subheading | Add text to show a subheading below the main heading.                     |
| Link       | Select or paste a URL to direct visitors to another page.                 |
| Link text  | Enter call-to-action text for the link                                    |
| Alignment  | Choose to align the section content to either the Left, Center, or Right. |

#### **Section style**

| Setting                     | Description                                                                                                                                                                                                                                   |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enable animation            | Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See our [Section animations](https://help.fluorescent.co/spark/theme-styles/animation) to learn more.                                     |
| Use alternate section color | Apply the alternate section colors as chosen in your Theme Settings. See Spark's [theme color settings](https://help.fluorescent.co/spark/theme-styles/colors) to learn how to create a secondary color scheme with alternate section colors. |
| Spacing                     | Add padding around the section content: either the Top and bottom, Top only, Bottom only, or set it to None.                                                                                                                                  |
| Spacing amount              | Increase or decrease the amount of space around the section: either Full, Half, or Minimum.                                                                                                                                                   |

\\

***

> **Related links**
>
> [Theme sections](https://help.fluorescent.co/spark/pages/theme-sections)