Common HTML customization examples

Custom Font

You can assign any font as long as you provide the stylesheet link.

The example below helps to overwrite the primary font family:

1<link rel="preconnect" href="https://fonts.googleapis.com">
2<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3<link href="https://fonts.googleapis.com/css2?family=Festive&display=swap" rel="stylesheet">
4<style>
5:root {
6  --ghc-primary-font-family: Festive, inter !important;
7}
8</style>

The example below will customize the font for specific HTML elements:

1<link rel="preconnect" href="https://fonts.googleapis.com">
2<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3<link href="https://fonts.googleapis.com/css2?family=Festive&display=swap" rel="stylesheet">
4<style> 
5h1, h2, h3, h4, h5, h6, a, button, input{ 
6    font-family: festive, inter !important; 
7}
8</style>

The example below will customize the font for all article bodies:

1<style>
2  .fr-view p {
3    font-size: 14px !important;
4    font-family: Arial !important;
5  }
6
7  .fr-view h3 {
8    font-size: 18px !important;
9    font-family: Arial !important;
10  }
11  .fr-view span {
12    font-family: Arial !important;
13}
14</style>

Changing the timezone at the bottom of contact cards

You can add a custom HTML code that changes the text inside the timezone-abbr class name with what you'd like to be displayed.

1<span class="timezone-abbr">GMT+2</span>
2
3

Hyperlinking the logo

You can use this code to hyperlink the logo in the Help Center which will take visitors to a new page/tab once they click on it:

1<script type="text/javascript">
2  HelpCenter.setLogoLink('https://your-website.com');
3</script>
4
5

The code needs to be added to Settings → Help Center → the Help Center you'd like → Customization - you should toggle the Extra HTML ON then paste the code there.

Hiding the Contact button at the bottom of the Help Center

1<style>
2    .ghc-footer-contact-page-link {
3      display: none;
4    }
5  </style>
6
7

Changing the Contact us into Email us

1<script type="text/javascript">
2document.addEventListener("DOMContentLoaded", function () {
3    setTimeout(() => {
4        document.querySelector(
5        ".ghc-main-content-container section:last-child h1"
6        ).innerHTML = "Email us";
7    });
8});
9</script>

1<meta name="viewport" content="width=device-width, initial-scale=1.0">
2<style>
3
4
5.sidebar {
6  margin: 0;
7  padding: 0;
8  width: 200px;
9  background-color: #f1f1f1;
10  position: fixed;
11  height: 100%;
12  overflow: auto;
13}
14
15
16.sidebar a {
17  display: block;
18  color: #161616;
19  padding: 16px;
20  font-size: 16px;
21  font-weight: 600;
22  font-family: Inter;
23  text-decoration: none;
24}
25 
26.sidebar a.active {
27  background-color: #04AA6D;
28  color: white;
29}
30
31
32.sidebar a:hover:not(.active) {
33  background-color: #555;
34  color: white;
35}
36
37
38.sidebar img {
39  display: block;
40}
41
42
43.ghc-main-content-container {
44  margin-left: 200px;
45  padding: 1px 16px;
46}
47
48
49footer {
50  margin-left: 200px;
51}
52
53
54@media screen and (max-width: 700px) {
55  .sidebar {
56    width: 100%;
57    height: auto;
58    position: relative;
59  }
60  .sidebar a {float: left;}
61  div.content {margin-left: 0;}
62
63
64  .ghc-main-content-container {
65    margin-left: 0;
66  }
67
68
69  footer {
70    margin-left: 0;
71  }
72}
73
74
75@media screen and (max-width: 400px) {
76  .sidebar a {
77    text-align: center;
78    float: none;
79  }
80}
81</style>
82<div class="sidebar">
83  <img src="https://imgur.com/euXO5sp.jpg">
84  <a href="https://www.gorgias.com/">🛒 Back to shop</a>
85  <a href="mailto:[email protected]">📭 Email Us</a>
86</div>

Change Get more information in the Help Center

1<style>
2.ghc-labeled-display-mode-switch > h2{
3  opacity: 0;
4}
5</style>   
6 <script>
7        document.addEventListener('DOMContentLoaded', () => {
8            let getMoreInfoH2 = document.querySelector('.ghc-labeled-display-mode-switch > h2');
9            getMoreInfoH2.innerText = 'New title';
10            getMoreInfoH2.style.opacity = 1;
11
12        });
13    </script>

Redirect to your Help Center from your store

You can add a hyperlink that will lead your customers to your Help Center directly from your store - here are the instructions for Shopify, for example:

1. Access your Shopify theme settings, and click on Customize.
2. For the header or footer, for example, go to Main Menu where you can add a new button for your FAQs.
3. Copy your Help Center URL and, in your Main Menu, where your new button for FAQs is, click Edit and paste your URL.
4. Apply changes.

Common HTML customization examplesUpdated 2 months ago