Events Calendar
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:
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.
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.
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 or custom metafields).
- Buy Now Button: Links to a product (e.g., event ticket) with quick-buy integration.
- Event Details Button: Customizable label, style, and link.
What Settings Can I Customize?
Customize the calendar section with the following options:
Layout & Display
- Section Size: Adjust the width of the calendar (wrapper or no-wrapper).
- Fixed Height: 600px desktop layout with scrollable event list.
- Section Image: Optional main image with positioning controls (left/right desktop, above/below/hidden mobile).
Header Settings
- Header: Set a section title and style.
- Heading Size: Choose from Extra large to Heading 6.
- Heading Fill: Default, Hollow, or Hollow animated.
- Heading Style: Default, Capitalize, Uppercase, or Lowercase.
- Heading Align: Left, Center, or Right.
Event Item Display
- Show Image Placeholder: Enable/disable event images.
- Aspect Ratio: Landscape, Wide, Portrait, Square, or Original.
- Event Image Position Phone: Above or below event content on mobile.
- Show Date: Enable/disable event date display.
- Title Link: Enable/disable whether titles link to article/event.
Content Source Settings
- Supra Heading Source: Hide, Excerpt, or Custom (uses metafield).
- Custom Title: Enable to use custom title metafield.
- Event Description Source: Excerpt, Content, or Custom (uses metafield).
Button Configuration
- Buy Tickets Button: Choose button style (Primary, Secondary, Transparent, Ghost, Link variants).
- Event Details Button: Customize label, style, and new tab behavior.
Truncation Controls
- Truncate Supra Heading: Enable/disable with length control (0-100 characters).
- Truncate Description: Enable/disable with length control (0-300 characters).
Colors & Spacing
- Color Scheme: 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:
- Event Date
- Key:
event.date
- Type: Date
- What it does: Overrides the article's publish date to show a specific event date on the calendar.
- Key:
- Event Tickets
- Key:
event.ticket
- Type: Product list
- What it does: Links the article to products (like tickets). The "Buy now" button will appear and integrate with quick-buy functionality.
- Key:
- External Link
- Key:
event.external_url
- Type: URL
- What it does: Overrides the default article link. The "Event Details" button will direct users to this custom URL.
- Key:
- Custom Supra Heading
- Key:
event.custom_supra_heading
- Type: Single line text
- What it does: Provides custom text above the event title when "Custom" is selected as supra heading source.
- Key:
- Custom Title
- Key:
event.custom_title
- Type: Single line text
- What it does: Overrides the article title when "Custom title" is enabled.
- Key:
- Custom Description
- Key:
event.custom_description
- Type: Multi-line text
- What it does: Provides custom description when "Custom" is selected as description source.
- 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.
- Key:
Block Configuration
Article Block
- Article: Manually select individual blog articles to display as events.
- Limit: No limit - add as many article blocks as needed.
Static Event Block
- Supra Heading: Optional text above the main heading.
- Heading: Main event title.
- Month: Month label for the event.
- Date: Date label for the event.
- Description: Event description text.
- Image: Optional event image.
- Button URL: Custom URL for the event details button.
- Product: Product picker for "Buy now" button (e.g., event tickets).
What Will Customers See?
- A visually clean, responsive list of upcoming events in a fixed-height container.
- 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.
- Mobile-responsive layout with different image positioning options.
Technical Features
Quick-Buy Integration
- Buy tickets buttons integrate with the theme's quick-buy functionality.
- Automatic stock checking and button state management.
- Seamless cart integration.
Responsive Design
- Fixed 600px height on desktop with scrollable event list.
- Mobile-optimized layout with flexible image positioning.
- Touch-friendly interface.
Performance Optimized
- Lazy loading for images when section appears below the fold.
- Efficient metafield handling.
- Optimized for large event lists.
Best Practices
Content Organization
- Use consistent date formatting across events.
- Keep descriptions concise but informative.
- Use high-quality images for better visual appeal.
Metafield Usage
- Set up metafields early in your content creation process.
- Use custom titles and descriptions for better SEO and user experience.
- Link relevant products to drive sales.
Event Management
- Keep event dates current and accurate.
- Use the blog-based approach for recurring events.
- Mix static and dynamic events for maximum flexibility.
Troubleshooting
Events Not Showing
- Check that the blog has published articles.
- Verify metafield setup and content.
- Ensure the section is added to the correct template.
Buttons Not Working
- Verify product availability for buy buttons.
- Check URL validity for event details buttons.
- Ensure metafields are properly populated.
Layout Issues
- Test responsive behavior on different devices.
- Check image aspect ratios and positioning.
- Verify truncation settings aren't cutting off important content.
Summary
- Display events as static blocks, blog articles, or article blocks—mix them however you like.
- Use article metafields to add flexibility and customization to blog-based events.
- Customize the calendar's layout, colors, and buttons to match your store's branding.
- Integrate with quick-buy functionality for seamless ticket sales.
- No coding needed—just fill out the section settings and metafields, and your calendar is ready to go.