Adding event information, such as location and date, to the product page on your Shopify online store requires some theme editing if your theme is not an Online Store 2.0 compatible theme. In this post, I'll walk you through the steps for both Online Store 2.0 themes and themes that aren't compatible with Online Store 2.0 features.
Online Store 2.0 compatible theme
If you have an online store 2.0 compatible theme, you'll want to go to the virtual theme editor in your Shopify dashboard:
You can open the product page template from here under the dropdown at the top center of your screen.
Now to add the event information, you'll want to add the "Event Date" and "Event Location" App Blocks from Evey under the "Product information" section:
Don't forget to drag the new blocks within your "Product information" section so that it appears under your product title (or wherever you want them to appear).
Legacy Themes
If your theme is not Online Store 2.0 compatible, you'll have to open the theme code editor to add the liquid snippet to show the event information on the product page. Note: these instructions are for the Debut theme; while most themes may be very similar, some may have different file structures; please reach out to us if you need any help.
Within the theme code editor, the first thing you can do is to scroll down to the "Snippets" section and hit "Add a new snippet," and add a snippet named "evey.event-info".
Paste the following code into this snippet content input:
{% assign event = product.metafields.evey.event.value | default: product.metafields.evey.event %}
{% if event %}
<div>
{% if event.location != blank %}
<p><strong>Location:</strong> ##{{ event.location }}</p>
{% endif %}
{% if event.start_at != blank %}
<p><strong>Date:</strong> ##{{ event.start_at | date: "%B %e, %Y" }} at ##{{ event.start_at | date: "%l:%M %P" }}</p>
{% endif %}
</div>
{% endif %}Now we can go ahead and include this snippet on the product page. First, under the "Sections" section, open the "product-template.liquid" file, then scroll down until you see the product title and price; add the following just above the price:
{% render "evey.event-info" %}
Hit save, and you'll now see the event information on your product page: