Skip to main content

Theme customization

Sesami turns normal Shopify products into services that can be booked and paid for. The booking flow can be different from buying a physical product, therefore, You might want to customize your theme to provide a better user experience for your customers when booking with Sesami.

note

Each theme and business is different, you can apply any of these techniques that you feel will provide value for your business and works with your current theme.

Prerequisites#

Product tagging#

Tagging products will allow you to apply these customizations only on products that are used as a service.

We recommend adding sesami-service as a tag on your Sesami services.

info

The rest of this article assumes that you are using sesami-service on the products that are added to Sesami as a service.

This way, all the changes will be applied to your future services only by adding a tag and you can also benefit from Shopify's features such as creating collections filtered by this tag.

Please read this article if you need help with creating or assigning tags to your products: Creating and using tags in Shopify

Editing theme files#

caution

Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a developer if you aren't comfortable doing the steps in the tutorial.

  1. From your Shopify admin, go to Online Store > Themes.

  2. Click Actions > Edit code.

From here you can explore you current theme and it's source files.

Disabling Add to cart button#

Sesami is using script tags (Learn more) to load Sesami button on your store. Because of the nature of script tags, it can take a while until Sesami is fully loaded on your store. You can disable Add to cart button and enable it back once Sesami loaded:

  • You'll need to add this script to the product page only if the current product is a Sesami service.
{% if product.tags contains 'sesami-service' %}
<script>
window.addEventListener('sesami:loaded',function(){
var addToCartButton = document.querySelector('button[sesami-id="add_to_cart_{{product.id}}"]');
// Or use any other selector that correctly returns only the add to cart button
addToCartButton.removeAttribute('disabled');
})
</script>
{% endif %}

Read more about Sesami events

  • Then, only for Sesami services, add a sesami-id attribute and disable the button. It will automatically be enabled back by the code we added in the previous step, once Sesami is loaded.
<button
<!-- ... -->
{% if product.tags contains 'sesami-service' %}
sesami-id="add_to_cart_{{product.id}}"
disabled="disabled"
{% endif %}
<!-- ... -->
</button>

Hiding quantity selector#

Most themes have a quantity selector on products. Unless you have Group appointments enabled on Sesami, you will probably want to prevent your customers from selecting more than one of the same time slot, otherwise, it will result in an unassigned appointment.

Quantity field might be used in several different places depending on your theme. You can look for files that contain product form, cart and cart drawer and add this condition around the code that renders the quantity selector:

{% unless product.tags contains 'sesami-service' %}
<!-- Qantity field code -->
{% endunless %}

Hiding duration selector#

Duration option is required for setting up Sesami services (Learn more)

It is just a simple variant option that you will set on your product, and it will be rendered by your theme just like any other variant selector.

If you have only one fixed duration for your service, you might want to remove this particular selector from your product page by adding this condition around the code that renders variant selectors:

{% unless product.tags contains 'sesami-service' %}
<!-- Variant options code -->
{% endunless %}