Zenoti provides various settings that you can use to tailor the look and feel of your brand on the Webstore. The Branding Look and Feel is the first section of customizing your Webstore.
For instance, you can decide the color scheme, fonts, and highlighters for various elements on the interface so that the Webstore appears like your own website.

To customize the Webstore to suit your brand identity:

  1. From the organization level, navigate to Admin > Organization > Organizations > Online Booking > Webstore V2 > Branding Look & Feel section.

        Note:  Refer to the image at the end of this article - it shows how your Webstore            will look like after you apply customizations.

    2. Under the Branding Look and Feeling section, do the following:

  • In the Primary Button Color and Secondary Button Color fields, enter the HEX codes of the color or select colors using the Color Picker to change the button colors.
  • In the Primary Container Background Color and Secondary Container Background Color fields, enter the HEX codes of the color or select color
    using the Color Picker to change the background color.
  • In the Primary Text Color field,  enter the HEX codes of the color or select
    color using the Color Picker to change text color.
  • In the Secondary Container Highlight Color field, enter the HEX codes of               the color or select color using the Color Picker to change the
    highlight color of secondary container.
  • In the Primary Link Color field, enter the HEX codes of the color or select
    color using the Color Picker to change the highlight color of secondary
    container.
  • In the Container Details Text Color field, enter the HEX codes of the color or select color using the Color Picker to change the text color of details container.
  • In the Container Details Background Color field, enter the HEX codes of the color or select color using the Color Picker to change the background color of details container.
  • In the Add-on Container Background Color field, the HEX codes of the color or select color using the Color Picker.
  • In the Background Image URL field, enter the location URL of the                       background image you want to upload.
  • In the Fonts URL field, enter the font URL path of the font file. This allows you to change the font on the entire Webstore. You can navigate to third-party sites such as Google Fonts and paste the font URL of your choice. The fonts URL will look like the example below:

    https://fonts.googleapis.com/css2?family=Open+Sans
  • In the Font Family field, enter the font family available in the Fonts URL location. The font family acts a backup font if the system does not support the main font. You can enter multiple values in this field, which are mainly the font names.

    Example: 'Open Sans', sans-serif
    Note: You must copy and paste the font names along with the (') single quotes and the (,) commas, as this specifies the primary font and the backup font.
  • In the Favicon URL field, enter the location URL of the favicon image you             want to upload.
    Note: Favicon is a small logo found in front of the visited URL, it can be                   seen in Address Bar, and is used to promote a company.

    3. Click Save as Draft to save the changes you made to your Webstore.
        Note: Zenoti saves the changes but does not publish the changes to your                     Webstore.

   4. Click Preview to view your Webstore with your current settings and to get a                  sense of how it will appear on your live site.

   5. Click Publish to publish your Webstore.
       Your Webstore is now live.
       Tip: Click Publish only if you are satisfied with the look and feel of the Webstore          in preview.  

After customizations, your Webstore will appear as follows:

Next step: Proceed to Customize Labels.

See Also


Did this answer your question?