How do I manually install Sesami on my theme?

  • Updated

Screen_Shot_2020-03-19_at_10.02.45_AM.png

Out of the box, once Sesami is successfully installed, we embed a button (by default, "Select Time") on the Shopify product that you have set as a service in the app. 

For the vast majority of Shopify merchants that use Sesami, the standard set-up process is all that is needed to get their Sesami online booking up and started for their store.

However, there might be instances in which you need a little bit more manual adjustment of where that button appears for your Shopify store.

Warning: theme customization and editing is advanced-level task for majority of merchants.  Please make sure that this is something that you indeed what you want to do. In our experience, most merchants can better achieve what they intend to do by simply having a link on your page or navigation header to your booking product.

 

Installing the Sesami button manually...

 

 

 

Different location on my product page

Customizing the location of the Sesami button on the product page

The goal here is to add a container element to your product template as a target for Sesami button to render inside. you can place this container element anywhere in the page, you just need to set it’s id to : “sesami__buttonWrapper”

Example: <div id="sesami__buttonWrapper"></div>

  • Log in to your Shopify admin
  • Edit your theme’s product page file (Docs)
  • Place this line anywhere inside the add to cart form  : 
    <div id="sesami__buttonWrapper"></div>
  • Click save

You can add custom styles to Sesami button by overriding styles for this class name:  sesami__button

 

 

On another page other than the product page (such as the home page) 

Render the Sesami button in a custom place

You can add the Sesami button to any page, Anywhere on your store. First you have to create a static page and place this snippet on the page code:

<form method="post" id="cartform" action="/cart/add">
  <input type="hidden" name="id" data-productid="PRODUCT-ID" value="VARIANT-ID">
  <div id="sesami__buttonWrapper" data-sesami-product-id="PRODUCT-ID" data-sesami-variant-id="VARIANT-ID"></div>
  <input type="submit" value="Add to cart">
</form>


*Replace PRODUCT-ID & VARIANT-ID 

You can add custom styles to Sesami button by overriding styles for this class name:  sesami__button

 

Multiple product forms

Some themes might have multiple form elements on the product page, One example would be a theme that has different markups for different devices, So one form appears on desktop another on mobile, In this case, Sesami button will be attached to the first form on the page, In order to add it to other forms on the same page you can use this code:

<div class="sesami__additionalButtonWrapper" data-sesami-product-id="PRODUCT-ID"></div>

 

 

Featured product on the home page

  1. On your product that you are using as as service on Sesami, ensure that the product type is set to "sesami-service". To create a product type, enter it into the Product type field and then save the product. (Docs)
  2.  Paste this in the appropriate location on the Sections/featured-product.liquid file.
{% if product.type == "sesami-service" %} <div id="sesami__buttonWrapper" data-sesami-product-id="{{product.id}}" data-sesami-variant-id="{{product.variants[0].id}}"></div> {% endif %} 

 

Adding the booking product to your navigation menu

For a good amount of users, simply adding the booking link on the navigation menu would be sufficient for their needs. 

Screen_Shot_2020-03-20_at_11.41.45_AM.png

Check out Shopify's help page on the issue here: https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links/editing-menus


Adding a button on any page that links to your booking service

On any page on your shopify store, you can add a button that links to your booking service.

If you're comfortable editing HTML code, you could use something like http://www.bestcssbuttongenerator.com/ to create your button and then simply add the code in the editor's HTML mode, which you can access by clicking the < > button in the top right corner. 

 

Related articles