Getting Started

Introduction

The following documentation serves as your guide to the new theme. Since this is Ghost theme documentation, it is assumed that you have a basic knowledge of the Ghost.

Getting Started

Uploading a theme

This is where the magic happens! You are able to upload, activate and delete a theme in the Ghost Admin of your publication.

Step-by-Step
  1. To upload a theme, go to the 'Design & branding' settings in the Ghost Admin and click 'Change theme' in the bottom right corner.
  2. Then click the 'Upload theme' button in the upper right corner.
  3. Once uploaded, click 'Activate' to activate the theme on your site.
Activation

Dark & color version

The dark and color version introduces a fresh and distinctive appearance for your website, bringing a modern and stylish aesthetic that enhances the visual experience for your visitors.

Step-by-Step
  1. Go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Color scheme' position.
  3. Use the dropdown menu to select your option.
  4. Finally, click 'Save' to activate.
Tip: How to add a global background color?
  1. To add the global partial background color, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Global background color in hex string' position.
  3. Paste your color – color must be a valid hexadecimal string, e.g. #052cff – you can generate the color on the site htmlcolorcodes.com.
  4. Finally, click 'Save' to activate.
Tip: Dark & color version depending on operating system preferences
Modern operating systems (Windows, macOS, iOS, etc.) allow users to choose their preference for light or dark system themes. The below feature is used to detect if the user has requested the system to use a light or dark color theme.
  1. To activate an auto dark version based on user operating system preferences, select the 'Auto' option.
  2. Click 'Save' to activate.
Activation

Search function

By default, the theme uses a native search option. You can also use the search function specially designed for this theme — to do this, you must set the Content API key.

Step 1: Generating Content API key
  1. To generate 'Content API key', go to the 'Integrations' settings in the Ghost Admin.
  2. Click 'Add custom integration', then give the new integration a name, like 'Search', and click the 'Add' button.
  3. Copy your 'Content API key' and click 'Save & close'.
Step 2: Activate the search function
  1. Go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Content API key for search' position.
  3. Paste your 'Content API key'.
  4. Finally, click 'Save' to activate.
Activation

Social accounts

Facebook and X
  1. To add Facebook and X account to your publication, go to the 'Social accounts' settings in the Ghost Admin.
  2. Once adding social accounts, click 'Save' to activate.
  1. Open ../partials/footer_icons.hbs file in your code editor.
  2. Then, uncomment the block – remove the lines which contains {{!-- and --}} for the chosen profile icon.
  3. Now replace the # for each href value with your own profile links.
  4. Save your footer_icons.hbs file in ../partials/ folder.
Activation

Authors page

To present all authors from your publication in an elegant way, you can add a custom authors page.

Step-by-Step
  1. Create a new page, add a page title, and open the 'Page settings' panel using the icon in the top right of the screen.
  2. At the bottom of the panel you’ll see a dropdown menu titled 'Template'.
  3. Use the dropdown menu to select the 'Authors' template, close the panel.
  4. Finally, click 'Publish'.
Activation

Tags page

To present all tags from your publication in an elegant way, you can add a custom tags page.

Step-by-Step
  1. Create a new page, add a page title, and open the 'Page settings' panel using the icon in the top right of the screen.
  2. At the bottom of the panel you’ll see a dropdown menu titled 'Template'.
  3. Use the dropdown menu to select the 'Tags' template, close the panel.
  4. Finally, click 'Publish'.
Activation

Contact page

If you wish to have a direct way in which your readers can contact you, you can add a contact page based on Formspree or Getform.

Step 1: Add your Formspree or Getform endpoint
  1. Go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Contact form endpoint' position.
  3. Paste your Formspree or Getform endpoint, e.g. https://formspree.io/f/xhyplkej
  4. Finally, click Save to activate.
Step 2: Add a contact page
  1. Create a new page, add a page title, and open the 'Page settings' panel using the icon in the top right of the screen.
  2. At the bottom of the panel you’ll see a dropdown menu titled 'Template'.
  3. Use the dropdown menu to select the 'Contact' template, close the panel.
  4. Finally, click 'Publish'.
Customization

Logo

A publication logo is the primary logo for your brand and is displayed across your theme.

Step-by-Step
  1. To upload a logo, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Brand' – expand this settings list and go to the 'Publication logo' position.
  3. Click 'Upload logo' to upload your logo.
  4. Finally, click 'Save' to activate.
Tip: How to change logo size?
  1. To change logo size go to the 'Code injection' settings in the Ghost Admin and paste this code to the 'Site header':
<style>
:root {
   /* Desktop */
   --height-logo-header: <value>;
   --height-logo-footer: <value>;
}
</style>

Example code for changing the logo size for the 'Desktop' view

<style>
:root {
   /* Mobile */
   --height-logo-mobile-header: <value>;
   --height-logo-mobile-footer: <value>;
}
</style>

Example code for changing the logo size for the 'Mobile' view

  1. Adjust the current <value> to match the expected value, such as 30px
  2. Finally, click 'Save' to activate.
Tip: Uploading an additional logo for dark color scheme
  1. To upload an additional logo, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right, you’ll see the 'Site-wide' tab – expand this settings list and go to the 'Color scheme' position – select the option related to dark color scheme to display the option to upload an additional logo below.
  3. Click 'Upload Image' to upload your logo.
  4. Finally, click 'Save' to activate.
Customization

Publication cover

A publication cover is an optional large background image that can be used with your publication.

Step-by-Step
  1. To upload a publication cover, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Brand' – expand this settings list and go to the 'Publication cover' position.
  3. Click 'Upload cover' to upload your image.
  4. Finally, click 'Save' to activate.
Tip: How to change background cover opacity?
  1. To change opacity, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Theme' – expand this settings list and go to the 'Opacity of site cover image', 'Opacity of tag and author cover image' or 'Opacity of post cover image' position.
  3. Change the value to the desired level — values from 0.1 to 1.0 indicate increasing transparency.
  4. Finally, click 'Save' to activate.
Tip: Publication cover only on the homepage
By default, the publication cover is displayed on all pages. If you want to show the publication cover only on the homepage, change the 'Publication cover only on homepage' setting in the Ghost Admin.
  1. Go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Publication cover only on homepage' position.
  3. Use the switch to activate the option.
  4. Finally, click 'Save' to activate.
Customization

Accent color

Primary color used in your publication.

Step-by-Step
  1. To change the accent color in your publication, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Brand' – expand this settings list and go to the 'Accent color' position.
  3. Choose your color.
  4. Finally, click 'Save' to activate.
Customization

Fonts

You can change fonts using the 'Typography' setting in the 'Design & branding' section.

Using this option might not always give the best results because fonts are designed for different purposes and can vary in size. The theme doesn’t affect the list of available fonts or adjust them, so it’s a good idea to experiment and find what works best for your needs.
Step-by-Step
  1. Go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right, you’ll see the 'Brand' tab and find the 'Typography' section.
  3. Use the dropdown menu to select your option.
  4. Finally, click 'Save' to activate.
Customization

Hero title

Add and customize your own title on the homepage directly below the header on homepage.

Tip: How to add your own hero title?
  1. To add your own hero title, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Homepage' – expand this settings list and go to the 'Hero title text' position.
  3. Enter your own hero title.
Tip: How to align the hero title to the left?
  1. If you want to align the hero title to the left, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Homepage' – expand this settings list and go to the 'Hero title position' position.
  3. Use the dropdown menu to select the 'Left' option.
  4. Finally, click 'Save' to activate.
Tip: How to activate overlap? (example)
  1. If you want the hero title to overlap the images in the featured section, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Homepage' – expand this settings list and go to the 'Hero title position' position.
  3. Use the dropdown menu to select the 'Center and overlap' or 'Left and overlap' option.
  4. Finally, click 'Save' to activate.
Customization

Colors of post background

You can easily add color to the header post background.

Step-by-Step
  1. To add the color of background on post header, just add an adequate internal tag in 'Post settings' panel to the published post.
  2. For example, add an internal tag #bg-ruby (tags which are prefixed by a # character, are internal tags within Ghost).
  3. Click 'Update', to activate.
  1. The tag slug should be hash-bg-colorname, for example hash-bg-ruby
A palette of light colors

White

#bg-white

Pearl

#bg-pearl

Cream

#bg-cream

Sand

#bg-sand

Carmel

#bg-carmel

Coffee

#bg-coffee

Milkshake

#bg-milkshake

Peach

#bg-peach

Rose

#bg-rose

Thistle

#bg-thistle

Cerise

#bg-cerise

Pink

#bg-pink

Lavender

#bg-lavender

Aqua

#bg-aqua

Fog

#bg-fog

Turquoise

#bg-turquoise

Conch

#bg-conch

Avocado

#bg-avocado

Moss

#bg-moss

Emerald

#bg-emerald
A palette of vibrant colors

Ultramarine

#bg-ultramarine

Violet

#bg-violet

Malibu

#bg-malibu

Sea

#bg-sea

Mint

#bg-mint

Lime

#bg-lime

Lemon

#bg-lemon

Apricot

#bg-apricot

Yellow

#bg-yellow

Orange

#bg-orange

Coral

#bg-coral

Magenta

#bg-magenta

Ruby

#bg-ruby

Fuchsia

#bg-fuchsia

Eggplant

#bg-eggplant

Indigo

#bg-indigo
A palette of dark colors

Olive

#bg-olive

Gold

#bg-gold

Burgundy

#bg-burgundy

Camelot

#bg-camelot

Mauve

#bg-mauve

Eden

#bg-eden

Teal

#bg-teal

Jade

#bg-jade

Peacock

#bg-peacock

Cobalt

#bg-cobalt

Venice

#bg-venice

Admiral

#bg-admiral

Denim

#bg-denim

Ink

#bg-ink

Graphite

#bg-graphite
Tip: How to add your own color?
  1. To add your own color, go the 'Tags' settings in the Ghost Admin.
  2. Then, open 'Internal tags' tab and click 'New tag'.
  3. Create for example #bg-arctic and add your color, for example #aac7ff.
  4. Click 'Save', to activate just add #bg-arctic in 'Post settings' panel to the published post.
  1. The tag slug should be hash-bg-colorname, for example hash-bg-arctic
Tip: How to force the default color?
If you are also using a global background color for the whole site, you may want to use a default color for the post – to do this, add #bg-default internal tag to the published post.
  1. The tag slug should be hash-bg-default
Customization

Special section

You have the option to add a special section with posts on the homepage, below the 'Load more' button.

By default, the section located on the homepage displays related posts to the most recent post if it has a 'primary tag' added.
Tip: How to add a special section with posts for selected tags?
  1. Go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Homepage' – expand this settings list and go to the 'Tags for special section' position.
  3. Enter your tag (or tags) slug, e.g. story,lifestyle,design
Customization

Hide author

Decide whether you want to display the author in the feed and on the post page.

Step-by-Step
  1. To hide the author, go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Site-wide' – expand this settings list and go to the 'Show author' position.
  3. Use the toggle switch.
  4. Finally, click 'Save' to activate.
Customization

Post header layouts

The theme includes a collection of post header layouts, allowing you to customize text and images in relation to each other.

Templates only work when a featured image is added.
Activate 'Default Image With Background Image' template (example)
  1. Open the 'Post settings' panel using the icon in the top right of the screen.
  2. At the bottom of the panel you’ll see a dropdown menu titled 'Template'.
  3. Use the dropdown menu to select the 'Post Default Image With Background Image' template, close the panel.
  4. Finally, click 'Publish'.
Activate 'Background Image' template (example)
  1. Open the 'Post settings' panel using the icon in the top right of the screen.
  2. At the bottom of the panel you’ll see a dropdown menu titled 'Template'.
  3. Use the dropdown menu to select the 'Post Background Image' template, close the panel.
  4. Finally, click 'Publish'.
Activate 'Center' template (example)
  1. Open the 'Post settings' panel using the icon in the top right of the screen.
  2. At the bottom of the panel you’ll see a dropdown menu titled 'Template'.
  3. Use the dropdown menu to select the 'Post Center' template, close the panel.
  4. Finally, click 'Publish'.
Activate 'Center With Background Image' template (example)
  1. Open the 'Post settings' panel using the icon in the top right of the screen.
  2. At the bottom of the panel you’ll see a dropdown menu titled 'Template'.
  3. Use the dropdown menu to select the 'Post Center With Background Imager' template, close the panel.
  4. Finally, click 'Publish'.
Activate 'Center Image With Background Image' template (example)
  1. Open the 'Post settings' panel using the icon in the top right of the screen.
  2. At the bottom of the panel you’ll see a dropdown menu titled 'Template'.
  3. Use the dropdown menu to select the 'Post Center Image With Background Image' template, close the panel.
  4. Finally, click 'Publish'.
Activate 'Full Image' template (example)
  1. Open the 'Post settings' panel using the icon in the top right of the screen.
  2. At the bottom of the panel you’ll see a dropdown menu titled 'Template'.
  3. Use the dropdown menu to select the 'Post Full Image' template, close the panel.
  4. Finally, click 'Publish'.
Activate 'Full Image With Background Image' template (example)
  1. Open the 'Post settings' panel using the icon in the top right of the screen.
  2. At the bottom of the panel you’ll see a dropdown menu titled 'Template'.
  3. Use the dropdown menu to select the 'Post Full Image With Background Image' template, close the panel.
  4. Finally, click 'Publish'.
Customization

Responsive tables

The responsive table will display a horizontal scroll bar if the screen is too small to display the full content. The following description applies to the table added using the markdown card.

By default, the table adapts to the window width. If you have a table that is too wide, you can add a container <div class="responsive-table"> element with around the table, and it will display a horizontal scroll bar when needed.
Step-by-Step
  1. To add a responsive table, use the 'Markdown card'.
  2. Add a container <div class="responsive-table"> element with around the table (in markdown there always needs to be a blank line between any HTML and markdown).
<div class="responsive-table">

| # | Heading | Heading | Heading | Heading | Heading |
|:--|:--------|:--------|:--------|:--------|:--------|
| 1 | Cell    | Cell    | Cell    | Cell    | Cell    |
| 2 | Cell    | Cell    | Cell    | Cell    | Cell    |
| 3 | Cell    | Cell    | Cell    | Cell    | Cell    |

</div>

Markdown table syntax is quite simple. It does not allow row or cell spanning as well as putting multi-line text in a cell. The first row is always the header followed by an extra line with dashes - and optional colons : for forcing column alignment.

Tip: What it takes to generate a table?

To generate a table, you can use the tool Markdown Tables Generator.

Members

Custom pages

The members feature allows you to turn any site into a membership business with member signup, paid subscriptions and email newsletters.

The members feature is enabled by default. However, you need to create the following pages to avoid the 404 error.

Step-by-Step
  1. Create an Account page.
  2. Create Signup & Signin pages.
  3. Create a Membership page.
Tip: What to do in case of an 400 error with message e.g. 'Missing template members/signin.hbs for route /signin/'
The error indicates that there was previously used a routes.yaml file with another theme that required it. To solve the problem, reset the routes.yaml file to its default settings.
routes:

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Default settings for routes.yaml file

Members

Login panel

The login panel is a navigation component that shows 'Join' button when a member is logged out, and 'Account' button when a member is logged in.

Tip: Replacing 'Membership' with 'Sign up' (Requires theme editing)
  1. You can easily replace the 'Membership' page with 'Sign up', for this purpose open ../partials/members/login_panel.hbs file in your code editor and find:
<a href="{{@site.url}}/membership/" class="global-button-arrow">{{>icons/site/arrow}}{{t "Join"}}</a>
  1. Then, replace with:
<a href="{{@site.url}}/signup/" class="global-button-arrow">{{>icons/site/arrow}}{{t "Sign up"}}</a>
  1. Save your login_panel.hbs file in ../partials/members/ folder.
Members

Account page

The account page shows your members the type of account they’re having and gives them some subscription specific data.

Step-by-Step
  1. Create a new page, add a page title, and open the 'Page settings' panel using the icon in the top right of the screen.
  2. Provide the appropriate 'Page URL' as /account/
  3. At the bottom of the panel you’ll see a dropdown menu titled 'Template'.
  4. Use the dropdown menu to select the 'Account' template, close the panel.
  5. Finally, click 'Publish'.
Members

Signup & Signin pages

The 'Signup' and 'Signin' pages are allowing your visitors to sign up to your site in order to access members only content.

Step-by-Step
  1. Create a new page, add a page title, and open the 'Page settings' panel using the icon in the top right of the screen.
  2. Provide the appropriate 'Page URL' as /signin/ for the 'Signin' page and /signup/ for the 'Signup' page.
  3. At the bottom of the panel, you’ll see a dropdown menu titled 'Template'.
  4. Use the dropdown menu to select the 'Signin' for the signin page and 'Signup' for the signup page.
  5. Finally, click 'Publish'.
Members

Membership page

The 'Membership' page is helping your visitors to quickly visualize and compare the different pricing plans you offer.

Step-by-Step
  1. Create a new page, add a page title, and open the 'Page settings' panel using the icon in the top right of the screen.
  2. At the bottom of the panel you’ll see a dropdown menu titled 'Template'.
  3. Use the dropdown menu to select the 'Membership' template, close the panel.
  4. Finally, click 'Publish'.
Tip: How to add premium tier?
  1. Go to the 'Tiers' settings in the Ghost Admin.
  2. Click on the 'Connect with Stripe' and configure your Stripe account.
  3. If you have Stripe connected, click '+Add tier' – add your own tier name, description, monthly and yearly prices and list of benefits.
  4. Click 'Save & close'.
  5. Making tiers available to visitors – from the 'Portal settings', you can control which tiers appear on your site.
Tip: How to add description and list of benefits to free tier?
  1. Go to the 'Tiers' settings in the Ghost Admin.
  2. Click 'Free' position and add your tier description and list of benefits.
  3. Finally, click 'Save & close' to activate.
Tip: How to add position to FAQ?

You can add FAQ items in your page content using the HTML card by pasting the code below:

<details>
  <summary>Your title</summary>
  <p>Your description</p>
</details>

The page content on the Membership page only serves to add FAQ items, it is not designed for other types of content.

Members

Subscribe page

The subscribe page is allowing your visitors to sign up to your site in order to access members only content and receive the premium newsletter.

Step-by-Step
  1. Create a new page, add a page title, and open the 'Page settings' panel using the icon in the top right of the screen.
  2. At the bottom of the panel you’ll see a dropdown menu titled 'Template'.
  3. Use the dropdown menu to select the 'Subscribe' template, close the panel.
  4. Finally, click 'Publish'.
Members

Comments

The native comments feature in Ghost allows you to invite members to join the discussion and participate in a community directly on your website. Alternatively, you can opt for the Disqus option.

Ghost comments
  1. To enable native comments, go to the 'Access' settings in the Ghost Admin.
  2. Change the 'Commenting' level to 'All members' or 'Paid-members only'.
  3. Finally, click 'Save' to activate.
Disqus comments
  1. Go to the 'Design & branding' settings in the Ghost Admin.
  2. On the right you’ll see the tab 'Post' – expand this settings list and go to the 'Disqus shortname' position.
  3. Paste your 'Disqus shortname', e.g. copy only your-site from your-site.disqus.com
  4. Finally, click 'Save' to activate.
Advanced

Editing a theme

To edit files, you will need to unzip the theme archive — at this point you will have access to the necessary files indicated in the theme documentation.

Step-by-Step
  1. To edit your theme files, download a copy of the theme. For this purpose go to the 'Design & branding' settings in the Ghost Admin and click 'Change theme' in the bottom right corner.
  2. Use the 'Installed' tab menu in the upper right corner to download your theme, then unzip the theme locally.
  3. Once the theme is unzipped, the files can be edited using an code editor – make the changes indicated in the theme documentation.
You can edit files using applications (code editor) such as Sublime Text, Visual Studio Code or Brackets. Using native text editors like TextEdit on macOS may add formatting may cause the theme to work incorrectly.
  1. When you’ve finished making changes to the theme code, re-zip the theme directory for uploading back to Ghost.
To create a zip archive on a macOS, right-click on the theme folder to view the context menu. Then, click the 'Compress' option. On Windows right-click on the theme folder, select 'Send to', and then select 'Compressed (zipped) folder'.
  1. To upload a theme, go to the 'Design & branding' settings in the Ghost Admin and click 'Change theme' in the bottom right corner.
  2. Then click the 'Upload theme' button in the upper right corner.
  3. Once uploaded, click 'Activate' to activate the theme on your site.
Advanced

Updating a theme

Updates to the theme ensure compatibility with the latest Ghost version, performance improvements and minor bug fixes. So it is important that you use the latest available theme version.

If your theme features custom code, updating it with the latest versions will overwrite all your customizations.

Step-by-Step
  1. Download the latest version of the theme, then unzip the archive locally.
  2. Choose a theme version that is compatible with your Ghost version.
  3. To upload a theme, go to the 'Design & branding' settings in the Ghost Admin and click 'Change theme' in the bottom right corner.
  4. Then click the 'Upload theme' button in the upper right corner.
  5. Once uploaded, click 'Activate' to activate the theme on your site.
Tip: What if you’ve already edited the theme, and want to update it without losing your changes?

That’s a bit trickier to deal with but not impossible, as long as you can remember what the changes were, or more specifically which files you edited. Unfortunately in Ghost when updating a theme you have to re-enter your changes.

For more advanced users, it can be helpful to use a comparing files app like Sublime Merge – that way you can find your changes if you don’t remember them.

Tip: After uploading the theme my settings in Design section were reset, what should I do?

The best solution is to always use the same name e.g. theme-name.zip – that way you will not have to enter your settings again after uploading a theme.

Ghost assigns the settings in the 'Design & branding' section to the name of the uploaded archive. If you upload theme-v1.zip and theme-v2.zip – Ghost will recognize them as two different themes – so the settings will reset.
Advanced

Theme translation

Translations are used both when you want to add a new language and when you want to edit current phrases used in the theme.

Editing current phrases used in the theme (Requires theme editing)
  1. You’ll need to open the theme’s ../locales/en.json file in your code editor.
  2. Change the sentences used in the theme following the pattern:
{
    "Old translate": "New translate",
    ...
}
  1. After making your changes, save your file, compress the theme into a zip format, and upload it to Ghost.
Translation to another language (Requires theme editing)
  1. Inside the ../locales/ folder, add target language file for example es.json for Spanish and pl.json for Polish (a valid language code must be used).
  2. Based on the translation from the en.json file, add translations for your language in your code editor. For example, for Spanish, use in the es.json file:
{
    "Back": "Volver",
    "Newer Posts": "Artículos Siguientes",
    "Older Posts": "Artículos Anteriores",
    ...
}
  1. After making your changes, save your file, compress the theme into a zip format, and upload it to Ghost.
  2. Then, go to the 'Publication Language' settings in the Ghost Admin.
  3. Enter the correct language code into the 'Site language' field.
  4. Finally, click 'Save' to activate.
Advanced

Posts per page

The number of posts provided will depend on the 'post per page' setting which you can configure in your package.json file.

Step-by-Step (Requires theme editing)
  1. You’ll need to open the theme’s package.json file in your code editor and find:
"config": {
    ...
    "posts_per_page": <value>
    ...
}
  1. Change the current value to the expected value.
  2. Save your package.json file in root folder.