CMS Guide

Styleguide

This is a visual example of the "STYLE" dropdown options available in a Custom HTML's content editor.

If a style is not showing up as expected, that means the section either: 1. has unique styling, or 2. needs to be re-created using a new section template (i.e. section templates that end with "- (Section #)".

Headings

Headline Emphasized 1

Headline 1 - 40px

Headline 1a - 30px/40px*

Headline 1b - 28px/40px

Headline 2 - 28px

Headline 3 - 24px

* The first number is the size at mobile, and the second number is the size at desktop

Font Sizes

Text - 14px

Text - 16px

Text - 18px *This is the default size across the site

Text - 22px

Text - 24px

Text - 27px

Text - 30px

Text - 18px/20px

Text - 18px/22px

Text - 18px/24px

Colors

Color - Dark Green *This is the default color across the site

Color - Medium Green

Color - Coral

Button Links*

IMPORTANT: Before applying any of the following button link styles, make sure that the element you're applying the style to is ALREADY a link.

Button - Green, Dark Green Hover

Button - Green, Dark Coral Hover

Button with Line - Green, Coral Hover

Button - Dark Green

*Use your mouse to hover over links in order to see their hover states.

Margins

Margin Bottom 1.2em *em means it is in proportion to the text's size

Margin Bottom 18px

Margin Bottom 30px

Margin Bottom 45px

Misc Styles

Uppercase Text

Underine

Block - Coral

Block - Green

Block - Orange

Creating a Page

When creating a blank new page, choose the Layout: "Default Page".

When created a page using a page template, the page must be created under the "Primary CMS" Theme.

Banner images can be set using the "Banner" inputs at the top of each page.

Section Guide

Note that section titles are color coded based on which menu they can be found in after clicking the "add section" button on any page:

Gray - find this section in the "Use Existing" Menu.
Green - find this section in the "Add New" Menu.

Keep in mind that when you edit a section from the "Use Existing" Menu, you are editing every instance of that section. Sections added via the "Add New" Menu are safe to be edited freely, as a new instance of the section is created every time it's added to a page.

Name: Related Content - 1 Column

CMS Enabled? Yes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Name: Related Content - 2 Column

CMS Enabled? Yes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Name: Jobs Near You

CMS Enabled? No

Jobs Near You

No jobs near you. View All of Our Available Opportunities

Name: Salon Benefits - Tile Flip

CMS Enabled? No

Benefits

Competitive
Compensation
Structures

Get paid to do what you love
Immediate
Customer Base

Start cutting hair sooner
Ongoing
Development

Learn the latest trends and advanced skills
Schedule
Flexibility

Schedules to fit your lifestyle*
Recognition

Be rewarded for a job well done*
Career
Advancement

Opportunities abound*
Discounts

Product and tool discounts*
Benefits

Medical, Dental, and PTO may be available*

*Each Great Clips® salon is independently owned and operated by local salon owners – compensation, incentives and benefits may vary by location.

Name: Corporate Benefits

CMS Enabled? No

Benefits

Healthcare

We offer comprehensive benefits including medical, dental, vision, life insurance, and more
401k Match

We provide a generous match to employee contributions
Ongoing
Development

We believe in work-life balance through flexible scheduling, remote work environment, and dress for your day
Recognition

We proudly recognize service and exceptional performance
Tuition
Reimbursement

We encourage professional and skills development
Wellness
Programs

We offer incentives for living a healthy lifestyle
Parental Leave

We support parent bonding and family support
Employee
Discounts

We proudly offer discounted services and product

Name: Franchise location callout - new layout

CMS Enabled? No

View All Jobs by Franchised Location

Name: Corporate Jobs Callout new

CMS Enabled? No

View All Corporate Jobs

Name: Copy - (Section 1)

CMS Enabled? Yes

Code snippet for resetting text is "Section 1 - Copy - CMS".

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cilium dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui offi cio deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.

Lorem ipsum dolor

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Homepage Link

Ordered list
Ordered list
Ordered list

Unordered list
Unordered list
Unordered list

Lorem Ipsum

Name: Intro - (Section 2a)

CMS Enabled? Yes

Code snippet for resetting intro header is "Section 2 - Header - CMS".

Code snippet for resetting outro text is "Section 2 - Copy - CMS".

Note: This section can be switched out between video or image in the media module. Videos will show as pop-ups when the image is clicked.

Headline Lorem Ipsum

Name: Intro - (Section 2b)

CMS Enabled? Yes

Code snippet for resetting intro header is "Section 2 - Header - CMS".

Code snippet for resetting outro text is "Section 2 - Copy - CMS".

Note: This section can be switched out between video or image in the media module. Videos will show as pop-ups when the image is clicked.

Headline Lorem Ipsum

Name: Copy - (Section 3a)

CMS Enabled? Yes

Code snippet for resetting link and text is "Section 3 - Link and Text - CMS".

Link Text

Headline Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Name: Copy - (Section 3b)

CMS Enabled? Yes

Code snippet for resetting text is "Section 3 - Location Link and Text - CMS".

Search by Location

Headline Lorem Ipsum

Name: Social - (Section 4a)

CMS Enabled? Yes

Code snippet for resetting text is "Section 4 - Headline and Paragraph - CMS".

NOTE: The social media module can only include Facebook, Instagram, LinkedIn, Glassdoor, or Tiktok.

Headline Lorem Ipsum

Name: Image and Copy - (Section 5a)

CMS Enabled? Yes

Lorem ipsum dolor sit amet

Name: Image and Copy - (Section 5b)

CMS Enabled? Yes

Lorem ipsum dolor sit amet

Name: CTA - (Section 6a)

CMS Enabled? Yes

Lorem ipsum dolor sit amet

Name: Icon and Copy - (Section 9a)

CMS Enabled? Yes

Code snippet for each item is "Section 9 - Item # - CMS".

Note: The arrows and sizing of text should not be changed by CMS users. Published text color (white) and sizing will not reflect in the Custom HTML content editor/WYSIWYG for this section.

Headline Lorem Ipsum

Heading

Lorem ipsum dolor sit amet, consectetur
Heading

Lorem ipsum dolor sit amet, consectetur
Heading

Lorem ipsum dolor sit amet, consectetur
Heading

Lorem ipsum dolor sit amet, consectetur

Name: Icon and Copy - (Section 9b)

CMS Enabled? Yes

Code snippet for each item is "Section 9 - Item # - CMS".

Note: The arrows and sizing of text should not be changed by CMS users. Published text color (white) and sizing will not reflect in the Custom HTML content editor/WYSIWYG for this section.

Headline Lorem Ipsum

Heading

Lorem ipsum dolor sit amet, consectetur
Heading

Lorem ipsum dolor sit amet, consectetur
Heading

Lorem ipsum dolor sit amet, consectetur
Heading

Lorem ipsum dolor sit amet, consectetur
Heading

Lorem ipsum dolor sit amet, consectetur

Name: Homepage - Job Links Tabs

CMS Enabled? Yes for panel text

Code snippet for resetting panel text is "Job Links Tabs - CMS".

Hair Stylist Jobs

We know that stylists like you are most happy when they're cutting hair, so at a Great Clips salon, that's exactly what you get to do!

See Hair Stylist Jobs

Salon Assistant Manager Jobs

Got shears and a winning attitude? Have a yearning to earn and a desire to support other stylists? Then let’s talk! Maybe you’re a stylist who wants more responsibility, or you’re looking for a new opportunity?

See Salon Assistant
Manager Jobs

Salon Manager Jobs

Are you a stylist who wants more responsibility or are you looking for a new opportunity?

See Salon Manager Jobs

Receptionist Jobs

Are you a cosmetology school student looking to start getting in-salon experience? Great Clips relies on a team approach to ensure a great experience, and that starts with a welcome from the front desk.

See Receptionist Jobs

Corporate Jobs

At Great Clips, Inc., we work together to build the most profitable salons by delivering the most powerful and enduring brand. What does that mean? It means that the Great Clips corporate office keeps the brand we’ve built strong by supporting our franchisees in every way we can.

See Corporate Jobs

Name: Students - tabs Four Panels

CMS Enabled? Yes for panel text

Code snippet for resetting panel text is "Panel Tab - CMS".

The Great Scholarship Program

Know a student who’s ready to be great? We want to help them shine! Great Clips, Inc. awards over $100,000 in cosmetology and barbering scholarships annually, offering eligible students up to $5,000 each. Applying for the Great Scholarship program is now easier than ever—no essay required. Apply anytime, scholarships are awarded bi-annually.

Apply Now

Great Tools Giveaway Application

Great Clips® believes in the future of the hair industry and is proud to offer high school students interested in cosmetology or barbering the Great Tools Giveaway! Future stylists and barbers across the United States and Canada are invited to apply to receive a professional tool kit valued at $250 to help launch their dreams.

Apply Now

Name: Community Tabs

CMS Enabled? Yes for panel text

Code snippet for resetting panel text is "Community Tab - CMS".

Clips of Kindness

A small gesture for those fighting cancer. For many, the idea of hair loss can be daunting and unsettling. But when the time comes, Great Clips salons can make it easier for customers through our Clips of Kindness program.

Learn More

Children's Miracle Network Hospitals

Every year for the past 15 years, Great Clips salons have raised hundreds of thousands of dollars through generous customer donations to support their local hospitals. These efforts are personal and meaningful, and we invite you to be a part of it

Learn More

Cut It Out®

Unite to end domestic violence. Salon professionals can be invaluable and influential community partners in the fight against domestic abuse with proper training from the Professional Beauty Association's Cut It Out program.

Learn More

Wigs for Kids®

Helping children look like themselves. You don’t have to work at a hair salon to know how much your hairstyle affects your appearance and even your outlook on life. That’s why Great Clips salons support Wigs for Kids, so that every child—even those experiencing hair loss—can look like themselves and live their lives.

Learn More

Name: Salon roles popups

CMS Enabled? Yes

Name: Talent Community CTA

CMS Enabled? No

NOT READY TO APPLY?

Stay connected with us and receive updates on the latest job opportunities and company news.

Join the Talent Community Opens in a new window

Name: Job Alerts Form CTA

CMS Enabled? No

NOT READY TO APPLY?

Stay connected with us and receive updates on the latest job opportunities and company news.

Name: Students Talent Community CTA

CMS Enabled? No

NOT READY TO APPLY?

Stay connected with us and receive updates on the latest job opportunities and company news.

Join the Talent Community Opens in a new window

Name: Share - CTA

CMS Enabled? No

Full Width Copy (Section 11a)

Suggested Use: page introductions, general copy, blog articles

CMS Enabled? Yes

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Copy & Image (Section 12a)

Suggested Use: Short copy facing a supporting image

CMS Enabled? Yes

Lorem Ipsum Dolor

Quibusdam et animi facilis. Hic quia soluta aut culpa asperiores id delectus autem. Ut iusto architecto et nostrum dolores et consequatur iure qui dolorem sint et laborum consequatur cum odio culpa. Aut incidunt dignissimos hic vitae voluptas sed sunt recusandae aut modi sunt ut aperiam ipsa.