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:


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="{{}}" data-coattend-variant-id="{{}}">Book now</button>  
{% else %}
    // Existing button code
    <button>Add to cart</button>
{% endunless %}

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