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.
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.
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.
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
From your Shopify admin, go to Online Store > Themes.
Click Actions > Edit code.
From here you can explore you current theme and it's source files.
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.
Read more about Sesami events
- Then, only for Sesami services, add a
disablethe button. It will automatically be enabled back by the code we added in the previous step, once Sesami is loaded.
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:
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: