Skip to main content
Theme settings

Learn how to customize your website's Theme settings

Nathan Crossley avatar
Written by Nathan Crossley
Updated over a week ago

Customizing your Theme settings is an important step in personalizing your Booqable website. To access them, open the theme editor and click the Theme settings button to adjust the styling that applies to all your website pages.


General styling

You can customize the general styling settings on your Booqable website.

General styling settings allow you to customize:

  • Element design: The design of product and collection cards and the font-weight of headings by setting them to modern or classic.

  • Background style: Subtle background images to various website sections

  • Rounded corners: Rounded corners to date pickers, buttons, and input fields

To customize the style of your elements:

  1. Go to Theme settings

  2. Navigate to General styling

  3. Here you can customize the element design, background images, and rounded corners

Colors

You can customize the color settings on your Booqable website to match your brand's style. Color settings are divided into Color sets, which can be applied to various elements in the Booqable website builder.

Here is a brief overview of what each customizable color changes:

  • Background color: Background color for your website

  • Primary text color: For text used on top of the background color

  • Secondary text color:

    • Descriptions in sections without background images such as Accordion, Title, Testimonials, Mosaic, Columns, Text with image, Call to action, Hero and Locations

    • Descriptions on the Privacy Policy page

    • Product card descriptions

    • Breadcrumbs

    • Form labels and descriptions

    • Footer menu links

    • Pagination buttons on the Collection page

  • Accent background color:

    • Buttons

    • Date picker

    • Borders

  • Accent text color: Used for text over the accent background color such as solid buttons, date picker, and the shopping cart

  • Accent outline color:

    • Highlighting words and text links, non-solid buttons

    • Hovering links

    • Taglines

    • Footer menu headings

    • Prices

    • β€œ+” & β€œ-” signs on the Collection page side menu

    • Icon colors in the Columns section

    • Background for gallery buttons on the Product page

To use Color sets for different elements:

  1. Go to Theme settings

  2. Navigate to Color sets

  3. Here you can customize color sets.

  4. Apply the desired color set to specific elements, such as the cookie notice

πŸ’‘Note: To change the color of your checkout, navigate to Branding in the Preferences of your Online reservations settings.

Typography

You can customize the typography settings on your Booqable website to adjust the font family and the font size.

When adjusting typography settings, you will be able to:

  • Change the font family for headings, body, and tagline

  • Adjust the font size (in pixels) for Heading 1, Heading 2, Heading 3, and tagline

To customize the Font family:

  1. Go to Theme settings

  2. Navigate to Typography

  3. Here you can change the font family and font sizes

Images

Customize your Booqable website's image settings to improve product display and maintain a consistent look.

When adjusting image settings, you will be able to:

  • Use focal images to highlight specific details of your products by setting a focal point on each image. The focal point you select in the product image settings (link to product settings) will be displayed when this is enabled.

  • Use a placeholder image for products and collections without available images

To customize Images:

  1. Go to Theme settings

  2. Navigate to Images

  3. Here you can enable focal images and choose an image placeholder

Social media

You can display social media icons in your website's footer to link to your social media platforms. The following social media icons are available:

  • Facebook

  • Instagram

  • Twitter

  • Linkedin

  • Pinterest

  • TikTok

  • Tumblr

  • Snapchat

  • YouTube

  • Vimeo

To customize Social media icons:

  1. Go to Theme settings

  2. Navigate to Social media

  3. Here you can customize the size of the icons, size of the spacing and paste your social media links

Cookie notice

You can show a cookie notice on your Booqable website to comply with your region's privacy and data protection laws. By adding a cookie notice, customers can accept your cookie policy and manage cookie preferences.

When showing a cookie notice, customers will be able to:

  • Accept all cookies

  • Accept only essential cookies

  • Manage preferences

To customize the Cookie banner:

  1. Go to Theme settings

  2. Navigate to Consent popup

  3. Here you can customize the title, description, and button labels

To customize the Manage preferences popup:

  1. Go to Theme settings

  2. Navigate to Preferences popup

  3. Here you can customize the button labels, titles and descriptions for essential and tracking cookies

Did this answer your question?