Servv AI

You should enable Servv app in your theme template to display the widget. Full instructions can be found here - <a href="https://help.servv.ai/en/articles/9041053-how-to-enable-servv-widgets-for-your-store-and-change-colors-to-match-your-store-branding">https://help.servv.ai/en/articles/9041053-how-to-enable-servv-widgets-for-your-store-and-change-colors-to-match-your-store-branding</a>

If the "Select Date and Time" button does not shows automatically for appointment products and customers continue to see "Buy Now" and "Add to Cart" options. This might happen with the stores having customized themes. In such cases merchants will have to add "Select Date and Time" button manually by following the steps given below:

Go to the online store and open the appointment product. You will see options "Buy Now" and "Add to Cart". Go to the option "Add to Cart" or "Buy Now" and right click. Choose the option "inspect" from the dropdown menu. ​ ​

The elements page will open in a browser with button element highlighted. As you see above you will notice the "CSS class" element for that section. Make sure to select the CSS class that covers the whole section including List of Variants, Quantity options, Buy Now and Add to Cart button. ​ ​

Copy the name of the class. (In the image below it is "product-form-product-template") ​ ​

Go to app Settings &gt; Widget. In the Product Page Widget section, paste the name of div class in the field "Custom CSS class of "Add to cart / Buy now / Select variant" container". Save the changes. ​ ​

Go back to the appointment product in the online store and refresh the page. "Select Date and Time" button will start showing in all the existing and upcoming appointment products.

1. Go to the online store and open the appointment product. You will see options "Buy Now" and "Add to Cart". Go to the option "Add to Cart" or "Buy Now" and right click. Choose the option "inspect" from the dropdown menu. ​ ​
 
 Screen_Shot_2021-02-26_at_3.51.41_PM.png
2. The elements page will open in a browser with button element highlighted. As you see above you will notice the "CSS class" element for that section. Make sure to select the CSS class that covers the whole section including List of Variants, Quantity options, Buy Now and Add to Cart button. ​ ​
 
 Screen_Shot_2021-02-26_at_3.57.57_PM.png
3. Copy the name of the class. (In the image below it is "product-form-product-template") ​ ​
 
 Screen_Shot_2021-02-26_at_4.00.04_PM.png
4. Go to app Settings &gt; Widget. In the Product Page Widget section, paste the name of div class in the field "Custom CSS class of "Add to cart / Buy now / Select variant" container". Save the changes. ​ ​
 

5. Go back to the appointment product in the online store and refresh the page. "Select Date and Time" button will start showing in all the existing and upcoming appointment products.