Events Calendar – User Documentation

What is the Events Calendar?

The Events Calendar is a flexible, visual section you can add to your store to showcase upcoming events, such as workshops, product launches, classes, or any special date. It’s designed to help you keep customers informed, boost engagement, and drive traffic or ticket sales.

How Can I Add Events?

You can display events in three ways:

1. Static Event Blocks

Add events manually as blocks in the section settings.

You define the event’s title, date, description, image, and optional product link (e.g., for tickets) or a custom URL.
Great for one-time events or when you don’t want to use blog posts.

2. Blog Articles (Dynamic Events)

Choose a blog from your store, and all its articles will automatically appear as events.

Each article becomes an event card using the article’s title, content, and featured image.
Ideal for ongoing events, workshops, or campaigns you want to manage like blog posts.
Articles can be scheduled and are SEO-friendly.

3. Blog Articles as Blocks

Manually select individual blog articles to appear as event blocks.

Useful when you want to highlight specific events from different blogs or mix them with static events.

What Event Details Can I Show?

Each event card can display:

Date & Month: Pulled from the static block, article’s publish date, or a custom metafield.
Title & Description: Comes from the static block or blog article.
Image: Optional. Use an uploaded image (static) or the article’s featured image.
Supra Heading: Optional text above the event title (for static blocks).
Buy Now Button: Links to a product (e.g., event ticket).
Event Details Button: Customizable label, style, and link.

What Settings Can I Customize?

Customize the calendar section with the following options:

Section Size: Adjust the width of the calendar.
Header Settings: Set a section title and style.
Image Settings: Control visibility, aspect ratio, and mobile layout.
Event Item Display: Toggle elements like date, heading, and description truncation.
Buttons: Customize button labels, styles, and behavior (e.g., open in new tab).
Colors: Choose a color theme for the entire section.
Padding: Set vertical spacing above and below the calendar (mobile and desktop).

How Do Metafields Work for Events?

When using blog articles as events, metafields give you extra flexibility and control.

Supported Article Metafields

Add these metafields to blog articles to customize the event display:

Custom Event Date
- Key: custom.event_date
- Type: Date
- What it does: Overrides the article's publish date to show a specific event date on the calendar.
Linked Product (for ticket sales)
- Key: custom.product
- Type: Product
- What it does: Links the article to a product (like a ticket). The “Buy Now” button will appear and take users to the product page.
- External Link
- Key: custom.external_url
- Type: URL
- What it does: Overrides the default article link. The “Event Details” button will direct users to this custom URL instead of the blog post.

Where to Add:

Go to Shopify Admin > Settings > Custom data > Blog posts, and add the above metafields. Once set up, you can populate them per article from the blog post editor.

What Will Customers See?

A visually clean, responsive list of upcoming events.
Each event displays the date, title, description, and optional image.
“Event Details” and/or “Buy Now” buttons, depending on your setup.
If a linked product is sold out, the “Buy Now” button will be disabled.

Summary

Display events as static blocks, blog articles, or article blocks—mix them however you like.
Customize the calendar’s layout, colors, and buttons to match your store’s branding.
Use article metafields to add more flexibility when using blog-based events.
No coding needed—just fill out the section settings and metafields, and your calendar is ready to go.

Let me know if you'd like a quick setup checklist, metafield definition template, or screenshots to go with this!