The Company Theme Documentation

About Company theme?

The Company Theme was made for businesses and organizations to showcase products & resources. Think of the home page of your Ghost site as a marketing page.

The main files of this theme are:

default.hbs - The parent template file, which acts as the universal layout.
home.hbs - The template that renders the homepage.
index.hbs - The main template to generate a list of posts.
post.hbs - The template used to render individual posts
page.hbs - The template used to render individual pages
tag.hbs - Used for tag archives, eg. "all posts tagged with news"
tags.hbs - Used for tag archives, eg. "all site tags"
author.hbs - Used for author archives, eg. "all posts written by Push"

Company comes with several other file templates for editing and changing of styles.

archive.hbs - Custom template for an /archive/ page with listing of posts by month and year.
shop.hbs - Custom template for shop page
custom-product.hbs - Custom template for shop products
authors.hbs - Custom template for /authors/ archive. A list of all site authors.

Getting started

Follow these instructions to upload Company theme to your Ghost site:

In the admin of your Ghost site, navigate to Settings > Design
In the lower left-hand corner, click Change theme.
In the upper right hand corner, click Upload theme.
Upload the company.zip file.
After the file has uploaded, click Activate.

Install Routes & Placeholder content

💡

The `routes.yaml` file must be added to ensure that this theme works correctly.

Follow the steps below to upload the routes.yaml file.

In the admin of your Ghost site, navigate to Settings > Labs
Under Beta Features > Routes, click Upload routes YAML

Follow the steps below to upload the Placeholder content.

In the admin of your Ghost site, navigate to Settings > Labs
Under MIGRATION OPTIONS > Import content, choose Placeholder content file and select import.

Styling & CSS

The CSS for this theme utilizes utility classes generated by the library CSSmitten. CSSmitten allows us to customize and generate a simple css style guide.

In the /assets/css folder you will find:

config.json - Generates style guide.
styles.css - The generated style guide with utility classes used throughout theme.
custom.css - This file is where you should add custom styles to your theme. This file is where you are able to edit many parts of The Company Theme if you're able to code.

SVG Icons

The Company Theme uses inline SVG icons, included via Handlebars partials. You can find all icons inside /partials/icons. To use an icon just include the name of the relevant file, eg. To include the SVG icon in /partials/icons/rss.hbs - use {{> "icons/rss"}}.

You can add your own SVG icons in the same manner.

Site design

This theme comes with various features that allow you to customize the look of your site. These settings can be found in your Ghost Admin under Settings > Design.

On the left-hand column are three sections that allow you to customize different parts of your theme.

Brand
Site-wide
Homepage

Brand

The Brand section allows you to change the Accent color, Icon, and Logo.

Site-wide

The site-wide section has settings that affect your layout globally.

Select a global background color for your site's sections.
You also have the ability to set up socials by typing in a URL for Twitter, Facebook, Instagram, and RSS.
The email signup text input is for writing an engaging call-to-action description above your email subscription forms.
Footer nav 1 & Footer nav 2 allow you to change the header text above the links in your footer section.

Homepage

This section allows you to adjust the look of the Hero section on the homepage.

Ability to input a custom headline and subheadline.
Ability to change the button text and hyper-link.
Upload a hero image.

Homepage

The homepage of your site is used to direct the visitors of your site to the destination of your choice. Each one of these sections helps you to leave a good impression of your product or service.

Below you will learn how to setup each section of the homepage.

Homepage Hero

On this section there are 4 elements that can be changed:

Headline
SubHeadline
Buttons
Image

Navigate to Settings > Design in your Ghost admin. Open the Homepage tab to adjust the hero section.

Simply input your desired headline & sub headline. You can change the text on both buttons as well as their link.

Lastly, you have the ability to upload an image to the hero section. Be sure to optimize the image for better page speed. There is a free tool called ImageOptim that you may find useful to help optimize the images on your site.

Homepage About section

The Homepage about section is created by making a new page in your Ghost admin and then adding a tag with the name of #home-about. You can create this section by following these instructions:

Create a new page and give it a title that you would like to see on your homepage about section.
Add content to this page to show up on the Homepage About section. You have the ability to put any kind of content that the Ghost editor allows in this section. All of the editor cards are available to you and will show up in this section.
Add a tag to the page titled #home-about.

Homepage Feature section

The Homepage Feature sections will appear by creating a page called Features and adding a tag titled #home-features. Follow the instructions below to learn how to add features.

Create a new page titled Features.
Add tag #home-features to page and save.
Navigate to Tags in your Ghost admin.
Here you will add a Name, Tag image, Description and save.
Navigate back to Features page and add the recently created tag to the page and save.
Features will now show up in Homepage Feature section.

Remember to use optimized icons for Tag image.

Homepage Latest posts section

The Homepage Latest Posts section will display a maximum of 3 of your latest featured posts. You can make a post a "featured post" by:

Navigate to a particular post page.
Open the "Post settings".
Scroll to bottom and check "Feature this post" and save.

Homepage Testimonials section

The Homepage Testimonials section will appear by creating a page called Testimonials and adding a tag titled #home-testimonials. Follow the instructions below to learn how to add testimonials.

Create a new page titled Testimonials.
Add tag #home-testimonials to page and save.
Navigate to Tags in your Ghost admin.
Here you will add a Name, Tag image, Description, Meta Title and save.
Navigate back to Testimonials page and add the recently created tag to the page and save.
Testimonials will now show up in Homepage Testimonial section.

Homepage FAQ section

The Homepage FAQ section will appear by creating a page called FAQ and adding a tag titled #home-faq. Follow the instructions below to learn how to add a FAQ section.

Create a new page and title it "FAQ"
Add content a toggle card to this page to show up on the Homepage FAQ section.
You can add as many toggle cards as you'd like to this section.

Contact Page

The simplest way to direct your users to contact you would be to set up a contact page and leave an email where they can reach you.

Email forms

There are many options to choose from if you want an email form for your users to fill out. Using one of these services, you can use an HTML card to embed a form into your contact page. Here is a list of form services you could use:

Shop page

The Shop page has the same setup as the Blog page. Any post that you create with the primary tag product will show up on this page. To set a price for your product, simply add it to the excerpt section in the settings of your post.

Product page

Using the features of the Ghost editor will allow you to setup your product page however you like. You can get creative with how showcasse your products by using the different post-cards.

Portal / Memberships

This theme utilizes the Ghost Portal feature for:

Digital subscriptions plans (paid memberships)
Paid members only posts
Free memberships

You can set this feature up in your Ghost backend and it will work automatically.

You can lock different posts and content behind the paywall only allowing members of your site access.