Barbershop Theme Installation Guide

1. Start with Barbershop Theme

Find the theme in the HubSpot Marketplace.

After finding the theme, please hit the "Install for  free" button.

You can edit the theme fields by navigating to "Settings" -> "Website" -> "Themes" -> "View Theme".

In edit the Theme field you have the following option to edit the theme settings:

• Global colors
• Global fonts
• Spacing
• Text
• Buttons
• Components
• Forms
• Tables
• Website header
• Website footer
• Blog colors

Global colors

In Global color, you have options for primary color and secondary color.  

Global Fonts

From Global fonts, you can change the theme font family globally.

Spacing

From spacing, you can adjust the drag-and-drop area spacing.

Text

Here you can change the styling of H1-H6 headings, as well as for body text and links. This includes font, font weight, font size, color.

Buttons

You can change button spacing, font size, color, background color, and padding from here. Both for normal and hover state.

Components

Under components, you can toggle the animation on/off. It is turned on by default.

Forms

You can change actions related to form like input color font hover focus padding etc.

Tables

You can change heading text color, body background color, body text color, footer text color, border color, vertical spacing maximum content width footer background color.

Website Header

You can change the background color of the header as well as the menu styling.

Website Footer

You can change the footer background and text color from here.

Blog colors

You can change the background color for the comments section and the related articles section for the blog article page.

 

After any changes, make sure to click "Apply changes" (in left sidebar) and "Publish to X assets" (in the top bar).

In HubSpot, navigate to Marketing > Website > Website Pages, then select "Create". Select the type of page you want to create. Then name your page and select "Create page". Find the "Barbershop" theme from the list. If it isn't your active theme, click "Set as active theme". If it is active, click "View templates".

Then choose a template and click "Select template".

 

When editing a page, you can drag&drop the modules from the left sidebar onto the page.

When hovering the modules on the page, you can see a "+" sign between the modules.

If you click that, you can add sections. That will speed up the process. 

In the left sidebar, you also have a "Design" -tab. When no module is selected, this tab will give you a link to edit the theme settings (as explained in "2. Theme fields").

When you have clicked on a module on the page, the tabs in the left sidebar are "Content" and "Styles".  "Content" is where you add all the content, and "Styles" is where you can modify the styling for the module".

The styling fields vary slightly between modules, but common options are:

• Background (color/image)
• Animation
• Border
• Shadow
• Spacing
• Typography

 

When editing a page, you can edit the global header and footer by clicking on them. A pop-up will appear, select "Open in global content editor".

There you can edit the header or footer, the same way as pages, by dragging and dropping modules.

 

To choose blog templates, navigate to "Settings" -> "Website" -> "Blog" -> "Templates"(tab).  You can also change the number of posts you want to display on the listing page from there.

 

On the blog article pages, you can have three different layouts for the hero. You can do this by selecting the "Blog Hero Banner" module in the left sidebar, then select the "Design" tab. 

Under "Background", you can choose Full size background (default), Normal size above title, or Small right of text.

This is what the Normal size above title looks like:

And the small right of text:

 

Please note, when choosing any of these two - you need to change the text color and spacing as well.

These instructions will hopefully help you get started with your theme. If you have any questions, do not hesitate to reach out to us.

For more information about how themes work, you can visit the HubSpot documentation: https://developers.hubspot.com/docs/cms/building-blocks/themes