Articles in this section

Using the Vagaro Theme Builder on the Web Version

Avatar
Design Team
  • Updated
Follow

 

The Web Version of the Vagaro Personalized Theme Builder (also referred to as the Website Builder) offers several opportunities for customizing your Vagaro booking page. There is a $10/month charge for using a personalized theme for your Vagaro booking page.

Click each item to jump to the section about it.

Access Website (Theme) Builder

  1. Click Marketing.
  2. Select Build Website.

C1_2x.png

 

Using a Template

  1. Click the drop-down menu near the top of the screen to select a theme group based on the service that you provide.
    Templates_1_2x.png
  2. Use the arrows to view more themes and templates. The page will update once you select a template or theme.
    theme_sel_2x.png

Edit Social Links and Perimeter Colors

Hover over the area that shows the social media icons and Click to Edit will display.

Social_1_2x.png

Edit Social Links

Use the Edit Social Links option to add or edit links to your social media websites. See Add Social Media Links - Web Version for more information on creating social media links.

Social_2_2x.png

Edit Perimeter Colors

Use Edit Perimeter Colors to make changes to how the top bar of your page, with social media and login links, appears. You can change the text color for the Welcome message and login link, and the background color for the entire bar. When you make a selection, the changes display on the screen so you can see what colors work for you.

Click Close once you are finished.

Social_3_2x.png

top_bar.png

 

Edit the Banner

Hover over the banner display on the template page and then select Click to Edit.

Options for working with the banner:

  • Edit Banner Text
  • Upload New Banner
  • Select VagaroBanner
  • Remove Banner

Banner_1_2x.png

Edit Banner Text

Use this option to edit how you want the text in your banner to appear. Once you select colors and options, the changes display for you to review.

Click Close once you are finished.

Banner_Text_1_2x.png

Upload a New Banner

Use Upload New Banner to upload a banner image from your computer.

  1. Click Browse to find an image on your computer.
  2. Select your file.
  3. Click Upload.
    Banner_Upload_1_2x.png
    Banner_Upload_2_2x.png

Select a Vagaro Banner

  1. Use Select Vagaro Banner to use an existing Vagaro banner.
  2. Scroll through the templates or use the menu to choose a different theme based on the services you provide. Click an image and the change will display for your review.
  3. Click Close once you are finished.
    Banner_Select_1_2x.png

 

Edit the Wallpaper

Click anywhere in the background of your template to access options for the Wallpaper.

There are three options:

  • Upload New Wallpaper
  • Select Vagaro Wallpaper
  • Remove Wallpaper

Wallpaper_1_2x.png

 

Upload New Wallpaper

  1. Click Upload New Wallpaper to open the Vagaro File Uploader.
  2. Click Browse to find a file on your computer.
  3. Click Upload.
    Wallpaper_2_2x.png

Select a Vagaro Wallpaper

  1. Click Select Vagaro Wallpaper.
  2. Click the drop-down menu to choose a different style or theme grouping.
  3. Scroll to view images.
  4. Click an image to select it as the new wallpaper.
    It will display in the background on your screen.
  5. Click Close when you are finished.
    sel_wallpaper_2x.png   

Remove Wallpaper

Important: When you select Remove Wallpaper, any previously selected wallpaper from the theme or one you uploaded is immediately deleted and replaced with a plain background color.
  1. Click Remove Wallpaper.
  2. Choose a color palette and background color to use in place of the wallpaper.
  3. Click Close when you are finished.
    Wallpaper_Remove_1_2x.png
  4. To restore the original wallpaper, find it in the Vagaro wallpaper selections or upload it again from your computer files.

 

Edit the Description, Fonts and Colors, and YouTube Video

Hover over the Description and select Click to Edit. There are 3 options for this section:

  • Edit Description
  • Edit Fonts and Colors
  • Edit YouTubeVideo
    About_Section_1_2x.png

Edit the Description

Important: For best results, we recommend making changes to the description through your Business Profile only (see this article: Update Business Profile - Web Version.) Any changes made to the description in the template will not automatically update the Business Profile description. However, changes made on the Business Profile page are reflected in the template's Description field.
  1. Click Edit Description to open a text window where you can make changes to the description of your business.
    On the edit screen, you can use a WYSIWYG editor to format the text. If you're comfortable with HTML code, there's an HTML editor view, as well.
  2. Click OK once you are finished.
    edit_desc_2x.png

Edit Fonts and Colors

This option changes fonts and font colors for headers, content, and tabs, the actual tab colors, and the background color used throughout the center section of the template.

Tip: Remember that any changes affect all the tabs on your Vagaro page.

Click Close to save your changes.

Fonts_Colors_1_2x.png

Edit YouTube Video

Click Edit YouTube Video to view a screen with instructions on how to put a video on YouTube and share its link on your Vagaro page.

Youtube_1_2x.png

Daily Deals

Daily Deals that have been published are shown in this section. Select Click to Edit to open the Daily Deal creation page. If you have any unsaved changes to your page, save your changes or publish the page before being redirected, or cancel.

 

Photos: Add and Edit Images in Venue Gallery and Portfolio

Hover over the Photos section and select Click to Edit to be redirected to the Venue Gallery. If you have any unsaved changes to your page, save your changes or publish the page before being redirected, or cancel.

For more on using the Venue Gallery and Portfolio see: Add Photos to the Venue Gallery and Portfolio.

 

Edit Contact Information

  1. A Click to Edit button displays when you hover over either the map or the section just below the map (with email and phone number for your business.) Click either to open the Contact Information window.
    contact_info_1_2x.png
    Note: The Click to Edit button does not appear in both places at once, this is just an example of where it will display.
  2. Edit your contact information and click Save. 
    contact_info_2_2x.png
    Note: You can also edit this information in your Business Profile (Settings > Business > Business Profile). Changes made in either place update the other.
    Note: The Working Hours shown in the template builder is a sample of what you'll see on the published page. The actual business hours shown will be calculated from all of your employee's working hours.

 

Edit Facility Information

Hover in the Features & Facilities area and select Click to Edit.

facility_section_2x.png

The following information can be edited from this screen:

  • Business Type (with a listing of services offered)
  • Accepts Walk-Ins
  • Payment Methods
  • Languages spoken
  • Cancellation policy
  • ... more

Click Save when you are done.

Features___Facilities_1_2x.png

 

Edit the Services Tab

  1. Click the Services tab, then select Click to Edit to access options for customizing the colors on the Services tab.
    services_tab_2x.png
    Note: The one service shown in the template builder is just a sample of how all tabs (except the About tab) will display on the published page.
  2. On the Edit Fonts and Colors screen, you can edit the overall color palette, and fonts and colors used for services headers and buttons on this tab. Selected changes display for you to review.
    services_tab_edit_2x.png
  3. Click Close when done.

 

Publish, Save Changes, or Disable Your Personalized Template

You will find options for publishing near the top of the screen.

Publish and Save Changes

If you are designing your page for the first time or do not already have a theme active on your page, the Publish Website button will appear near the top of the screen. If you are editing an existing theme, you will see the Save Changes button in place of the Publish Website button, along with a Disable Website button. 

Save_Changes_1_2x.pngSave_Changes_2_2x.png

Once you are done making updates to your page, select Publish Website/Save Changes. If you are satisfied with the changes, click Yes to view your updated page in a new browser tab. 

Save_Changes_3_2x.png

Disable your Website

  1. Click Disable Website to revert back to your original booking page.
    Please note that by clicking this option, you will no longer have to pay the $10 monthly charge.

    Also, note that any changes you made to a template will be saved and you always have the option to publish the website again (or choose a different template, customize and publish it) and resume the $10 monthly charge. Disable_4.1_2x.png
  2. Click Yes to disable the personalized website.
    The page is returned to the original default booking page.
    Disable_4.2_2x.png

Get a Custom Domain

before_published.pngafter_published.png

Purchasing a Custom Domain Name for your website is completely optional and up to you! Click the Get A Domain button near the top of the screen to be redirected to Vagaro Domains, where you can begin your purchase. For more information on how to get your own domain and how to connect it to your website, please refer to these links: 

Related articles

Comments

0 comments

Please sign in to leave a comment.