Documentation

Getting Started with Restaurant Pro HubSpot Theme

THEME SETTINGS   Templates   Modules 

Theme Settings

Global colors
The theme is designed with 2 colors that get used throughout the website—Primary and Secondary.  Changing these two options first is a great idea since most of the other color settings will use these by default.

Global fonts
Same as the colors, their are 2 primary fonts that will be used throughout the website. Choose your more simple font for the Primary and a more stylistic font for Secondary and the rest of the settings will inherit these values.

Text
This group is for setting all the default fonts and text colors across the website including Headings, Body text, and Links. The default settings should already look great, but feel free to adjust as necessary.

Forms
This field group is for adjusting all the default form styles across the entire site. The default settings should already look great, but feel free to adjust as necessary.

Buttons
This field group is for adjusting all the default button styles across the entire website including form submit buttons. You can change the font, color, and background color as desired. If you want to use the button styles on your Call-to-Actions simple add the `button` class to your unsettled CTA.

Website header
If you have a light logo you may want to change your header background to be darker or vice versa. In this field group you can change the text color, text hover color, and background color if the inherited values don't work.

Website footer
Similar to the website header group, you can adjust the text, hover, and background colors. In addition, you can also adjust the footer button colors in case you want to have a form or CTA in your footer.

 

Templates

Restaurant Pro comes with 5 custom page templates, 2 blog templates, plus the standard 7 system themes:

  • Home - page
  • Locations - page
  • Restaurant Menu - page
  • Contact - page
  • Landing Page - page
  • Blog Listing - blog
  • Blog Post - blog
  • 404 - system
  • 500 -system
  • Unsubscribe -system
  • Password Protected Page -system
  • Search Results -system
  • Subscription Preferences -system
  • Subscriptions Confirmation -system

Page Templates
You can use the page templates by selecting the appropriate template when creating a new website page or landing page. Read HubSpot's useful knowledgeable article for additional information on how to use page templates.

Blog Templates
Blog templates can be applied to a blog via your HubSpot settings page:

  1. In your HubSpot account, click the settings icon in the main navigation bar.
  2. In the left sidebar menu, navigate to Website > Blog.
  3. In the Templates tab apply the Restaurant Pro Blog Listing and Blog Post templates via the two drop downs and hit save.

For additional information on setting up your blog visit HubSpot's knowledgeable article here.

System Templates
Similar to blog templates, system templates can be applied via your HubSpot settings page:

  1. In your HubSpot account, click the settings icon in the main navigation bar.
  2. In the left sidebar menu, navigate to Website > Pages.
  3. Click the System Pages tab. 
  4. Click the corresponding dropdown menus to select your 404 error page, 500 error page, Password prompt page, and Search results Restaurant Pro templates then hit save when done.

For additional information on system templates read HubSpot's knowledgeable article here.


Modules

At the heart of Restaurant Pro are 10 custom modules specifically designed to bring your restaurant to the top of search results thanks to the performant design and implementation of the restaurant schema.org structured markup.

 

Hero Banner
This module is the first module on the home page template. It features a large H1 heading with optional subheading and featured illustration. In addition, you can add up to 3 call-to-actions cards that will align themselves perfectly with the main content area.

Card
The card module is perfect for a quick ad for a special event or deal. The card features an H3 heading along with optional description and CTA fields. You can also easily incorporate some of your brand colors by choosing a background image and color overlay. Be sure to test for text readability when choosing your colors.

Navigation
This is what powers the main navigation on your website. You can choose the navigation menu and the maximum amount of levels deep you want the drop downs to go (max of 3). To edit your navigation menus head on over to your HubSpot site settings > Website > Navigation

Restaurant Address
This module incorporates Schema.org structured data so it's smart to include this in the footer which means every page on your website will give Google the information they want for local search rankings.

Restaurant Featured Entrée
This module is for featuring your menu items or specials. For the best visual results use a transparent PNG with the background cropped out. You can use a service like removebg to achieve the desired look or contact a creative agency like us 😉.

Restaurant Hours
This module incorporates Schema.org structured data so it's smart to include this in the footer so every page will tell Google your hours and help you rank in local search results.

Restaurant Locations
The locations module embeds an interactive Google Map and enables you to customize the map marker color and add up to 10 locations. Google requires an API key for this to work. Steps to get your API Key:

  1. Create new project in Google Cloud.
  2. Go to the Billing page and enable billing. You won't be charged as long as you stay within the free quota.
  3. Enable the Maps JavaScript API and the Geocoding API.
  4. Go to the Credentials page click Create credentials > API key
  5. Optionally as a final step, you can then restrict your API Key to your domain for more security.

Once you have your key, copy and paste it into the module API Key field and you're good to go.

Restaurant Menu
This module lets you easily create your restaurant menu on your website. In the future we plan to also incorporate Schema.org structured data in this module as well.

Restaurant Reviews
This module lets you easily add your latest Yelp reviews automatically via your Yelp Business ID. To get your business ID you just need to find your restaurant on Yelp and copy the last portion of the URL. For reference, the Business ID is the highlighted portion in this example URL: https://www.yelp.com/biz/mountaineer-coffee-brooksville

Alternatively, you can also add reviews manually in case you want to choose exactly what shows up on your website and/or if you want more than 3 reviews.

Social Follow
We include this module in the header and footer by default but you can add this module anywhere you like. This is a local module so be sure to update each instance of it with your social links.

 

 

Have a question or need additional support?
Send us an email at support@kelp.agency