Technical documentation
BookingSync built for you a nice website based on various themes. You have access to all the files that define the templates to make any changes you need:
- liquid files
- javascript files
- style files
We recommend you not to change anything unless you have technical skills or outsourcing a specialist to do the job. In case you will make sure it's something that included in the section below, otherwise, we won't not able to provide any free technical support.
You will find the detailed technical information in our dedicated page Website documentation
This video for designers should also provide some interesting information.
How to add a logo
To add your own logo to your BookingSync website, you can perform the following steps:
- Add logo in .jpg or .png format in the image section, clicking on the
+
and name it logo.png - Click on
PUBLISH CHANGES
- In the header.liquid
- uncomment image source line, by removing
{% comment %}
and{% endcomment %}
- remove
{{ site.name }}
- click on
save
- uncomment image source line, by removing
You can adjust the logo size
to fit your page in the file _navbar.scss
file on line 16:
- You just need to increase
1em
to1.5em
or any size you need - Do not forget to click
Save
and thenPUBLISH
How to use my currency
By default, the currency used on your website is EURO / €. If you are using another currency, you would need to change the settings so it will apply to the search page.
- In the file Layouts > layout.liquid
- on line 78 and 79, change the values of the currency to yours:
<body data-currency-symbol="€"<br> data-currency-code="EUR">
- on line 78 and 79, change the values of the currency to yours:
How to add a favicon
To add your favicon to your BookingSync website, you can follow the following steps:
- Add the favicon in .png in the image section, clicking on the
+
and name it favicon.png - Click on
PUBLISH CHANGES
- In the file Layouts > layout.liquid :
- anywhere inside these tags:
<head>
</head>
- add the tag :
<link rel="shortcut icon" href="{{ 'favicon.png' | image_url }}">
- click
save
- and then click
PUBLISH CHANGES
- anywhere inside these tags:
Important: Your favicon should be at least 16px*16px optimal size is 64px*64px. There are multiple online free resources where you can transform your logo image into a favicon
How to enable street names on the map
Please open JavaScript file with map config on the website template editor:/lib/leaflet.js.coffee
you can find the following code:
{"featureType": "road",
"elementType": "labels",
"stylers": [{"visibility": "off"}]}
Change the visibility parameter to ON to show : "stylers": [{"visibility": "ON"}]}
Please click Save
and Publish
How to add a slogan on top of the home slider
Ex. http://www.locationvacancesquebec.com/
- In Translations, create a new key called
home_slogan
and set the value for all the locales used in your website. - In Templates > Snippets, add a new snippet called
home_slogan.liquid
with the following content:
<section id="home-slogan" class="home-slogan">
<h1 style="text-align:center;">{% t 'home.slogan' %}</h1>
</section>
- In _home.scss file, add the style (can be adjusted)
/// addition for the slogan
.home-slogan {
position: absolute;
bottom: 60vh;
left: 0;
width: 100%;
z-index: 1000;
h1{
color: #fff;
text-shadow: 0 3px 3px rgba(0,0,0,1);
font-weight: 500;
font-size: 48px;
}
}
@media (max-width: $screen-xs-max) {
.home-slogan {
h1 {
font-size: 18px;
}
top: 20vh;
}
}
- In index.liquid, add
{% include 'snippets/home_slogan' %}
How to use custom images in the homepage image slider
- Prepare the image files, preferably using the same resolution for each image and consistent file naming e.g. slide_1.jpg, slide_2.jpg etc.
- [Optional but recommended] Optimize the image for smaller file size without a loss in quality. I recommend online tool https://kraken.io/web-interface
- Upload the image files to Images folder using the + button
- Edit the Snippets/home_slider.liquid file:
drop all the current content and use this instead:
<section id="rentals" class="home-slider royalSlider rsDefault fwImage hidden-print">
<div class="rsContent">
<img src="{{ 'slider_1.jpg' | image_url }}" class="rsImg">
</div>
<div class="rsContent">
<span data-src="{{ 'slider_2.jpg' | image_url }}" class="rsImg"></span>
</div>
<div class="rsContent">
<span data-src="{{ 'slider_3.jpg' | image_url }}" class="rsImg"></span>
</div>
</section>
Each <div class="rsContent">...</div>
represents one slide.
Note that the code for the first image differs from the subsequent ones.
Use the file names shown in the 1st step.
Where is the best place to insert the site-wide code for opt-ins or chat boxes etc?
These pieces of code need to be inserted in the Template > Layouts > Layout.liquid file, inside the <head> section or follow the instructions provided.
How to change the background color of the menu
Depending on your logo or the colors used for the menu, it can be good to change the background color.
- In Templates > Stylesheets > _variables.scss, go to line 131
$navbar-landing-bg: transparent;
- Change transparent by the color desired:
- rgba(0, 0, 0, 0.5) for transparent black
- rgba(255, 255, 255, 0.5) for transparent white
- #fff for white
- $brand-primary for your primary color
- etc...
How to change the Request to Book button of the Book Now form
If you change the main colors of your website, it is worth changing the color of the Book Now / Inquiry form as well, which by default is green.
- Go to Templates > Stylesheets > application.scss
- At the end of the file, add the code to style the form, as described in the dedicated article
- Change the color code to the one you would like to use
How to hide rates table from the rental details page
To hide the rates table from your rentals details page on your BookingSync-powered website, please follow these steps:
- open the
rental.liquid
file, under the Templates section - delete lines from 21 to 25 (included):
- delete lines from 209 to 222 (included):
- Click on
Save
Comments
0 comments
Please sign in to leave a comment.