Everything you need to set up and customize the Event block — from adding images and date overlays to arranging content with nested child blocks inside the Timeline section.
An Event block is a single entry inside the Timeline section. Each event represents one milestone, moment, or story you want to highlight — such as a brand founding date, a product launch, or a company achievement. Events are displayed in an alternating two-column layout with images on one side and content on the other, connected by a vertical timeline line with dot markers.
In the Boardwalk theme, the Event block supports up to two stacked images, a large date text overlay that appears on top of the images, and a content area where you can add nested child blocks such as text, buttons, dividers, images, and logos. As visitors scroll the page, each event animates into view with a smooth fade-in effect, and the images move at different speeds to create a subtle parallax feel.
Follow these steps to add and configure Event blocks inside the Timeline section on any page of your Shopify store.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the page
where you want to display your timeline using the page
selector dropdown at the top center of the editor.
Click Add section in the Theme Editor sidebar and choose Timeline from the list. The section will appear on your page with placeholder Event blocks.
Note: Event blocks can only be added inside a Timeline section. You won't find them as standalone blocks in other sections.
Inside the Timeline section, click on an existing Event block to edit it, or click Add block and choose Event to create a new one. Each Event block represents one point on your timeline.
Upload a primary image and, optionally, a secondary image. The primary image is the main visual for the event. The secondary image overlaps the primary image to create a layered, editorial look. Set the image aspect ratio and secondary image size to fit your design.
Enter a date or label (for example, "2024" or "Est. 1985") in the Date field. This text appears as a large, semi-transparent overlay on top of your images. Leave it blank to hide the date overlay entirely.
Inside each Event block, you can add child blocks to build out the content area. Click Add block inside the Event and choose from Text, Button, Divider, Image, or Logo. These blocks appear on the opposite side of the images in the timeline layout.
Click Save in the Theme Editor. Preview your page to verify the images, date overlay, content blocks, and timeline layout are displaying as expected. Scroll the page to see the entrance animations in action.
These settings are available when you click on an individual Event block inside the Timeline section in the Theme Editor.
The main image for this event. This image takes up the full width of the image column and serves as the primary visual. If no image is uploaded, a placeholder graphic is displayed.
Controls the shape of the primary image. Options:
Widescreen, Standard,
Landscape, Square, or
Portrait.
An optional second image that overlaps the bottom corner of the primary image. This creates a layered, editorial-style composition. Leave it empty to display only the primary image.
Controls the size of the secondary image relative to the primary image. Range: 25% to 75%. A lower value creates a smaller inset image, while a higher value makes it more prominent.
The text that displays over the images as a large, semi-transparent label. You can use any short text here — a year like "2024", a season like "Spring", or a label like "Chapter 1". Leave this field blank to hide the overlay.
When turned on, the date text automatically uses the foreground color from the section's color scheme. Turn this off to set a custom date color instead.
Sets a custom color for the date overlay text. This setting is only visible when "Use section color scheme for date" is turned off.
Each Event block has a content area where you can add nested blocks. These child blocks appear on the opposite side of the images in the two-column timeline layout. You can add, remove, and reorder them to build out the story for each event.
A rich text block for headings, paragraphs, or any written content. Use this to describe the event, tell a story, or add details about the milestone. Supports bold, italic, links, and other standard formatting.
Adds a clickable button that links to any page, product, collection, or external URL. Use buttons to direct visitors to learn more, shop a collection, or take any other action related to the event.
Inserts a horizontal line between other content blocks. Use dividers to visually separate different pieces of information within the same event.
Adds an image to the content area alongside your text and buttons. This is separate from the main event images and can be used for supplementary visuals like icons, badges, or detail shots.
Displays a logo image in the content area. This is useful for showcasing partner logos, brand marks, certifications, or any other small graphic that relates to the event.
The Event block comes with features that work automatically — no apps or custom code needed.
Events automatically alternate which side the images appear on. The first event shows images on the right and content on the left, the second event flips them, and so on. This creates a visually engaging zigzag pattern down the page.
The images, secondary image, date overlay, and content area each scroll at slightly different speeds as visitors move down the page. This subtle parallax effect adds depth and visual interest without being distracting.
Each event fades in and slides up as it enters the visible area of the screen. The timeline dot marker also scales into view with a spring-like bounce. These animations happen automatically and create a polished, engaging experience.
When a secondary image is added, it overlaps the bottom corner of the primary image. The overlap direction alternates with the layout — when images are on the right, the secondary image offsets to the left, and vice versa. This creates a dynamic, editorial look.
A small circular dot appears at the center of each event, connecting it to the vertical timeline line. The dot color and size are inherited from the parent Timeline section settings.
On mobile devices, the two-column layout stacks into a single column with images always appearing first, followed by the content area below. The timeline line moves to the left edge, and the dot marker repositions accordingly.
Both the primary and secondary images load only when they're about to scroll into view. This improves page load speed, especially on timelines with many events and large images.
Keep these details in mind when working with Event blocks to get the best results.
Event blocks only work inside the Timeline section. You must first add a Timeline section to your page before you can add Event blocks.
The size of the date overlay text (small, medium, large, or extra large) is controlled at the Timeline section level, not on individual Event blocks. This means all events in the same timeline share the same date font size. To change it, click the parent Timeline section in the sidebar.
The maximum width of the content area beside the images is also controlled at the Timeline section level. Adjust this in the parent section settings if your text columns are too wide or too narrow.
Images are automatically served in responsive sizes based on the visitor's screen. For the sharpest results, upload images that are at least 1500px wide for the primary image and 800px wide for the secondary image.
The Event block uses the color scheme set on the parent Timeline section. Color schemes are defined in Online Store → Themes → Customize → Theme settings → Colors. Make sure you've set up the color schemes you want to use before styling your timeline.