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 -->
   <div class="coattend-button" data-coattend-product-id="{{product.id}}" data-coattend-variant-id="{{product.selected_variant.id}}">Book now</div>  
{%- else -%}
    <!-- Existing button code -->
    <button>Add to cart</button>
{%- endif -%}

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