Custom theme

You can display an event in a Modal, on every theme.

In order to do this, a custom HTML button with the class coattend-button and the attributes:

data-coattend-product-id="{{product.id}}"
data-coattend-variant-id="{{product.selected_variant.id}}"

should be inserted to your product template. This button will open the modal.

Every CoAttend active event has a product metafield named coattend with the value enabled. Based on this metafield you can define what button will appear on each product.

A pseudo-code could be something like:

if the product is an active CoAttend event > show the CoAttend button (coattend-button)
else > show the existing Add to cart button

For example, in your current theme's product template, you can add the following code:

{% if product.metafields.coattend.enabled %}
   // CoAttend button code
   <button class="coattend-button" data-coattend-product-id="{{product.id}}" data-coattend-variant-id="{{product.selected_variant.id}}">Book now</button>  
{% else %}
    // Existing button code
    <button>Add to cart</button>
{% endunless %}

Need help? Please contact us at support@coattend.com. We’ll be more than happy to help you integrate CoAttend into your business.