> For the complete documentation index, see [llms.txt](https://highfivethemes.gitbook.io/principle-user-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://highfivethemes.gitbook.io/principle-user-documentation/main-templates/case-study-template.md).

# Case Study Template

**Principal** provides a separate template for case study

<figure><img src="/files/F3C6muOoGRUSjZhE09d6" alt=""><figcaption></figcaption></figure>

## To create the Case Study pos&#x74;**:** <a href="#to-create-the-categories-page" id="to-create-the-categories-page"></a>

1. Go to **Posts** from the admin menu.
2. Click the **New post** button in the top right corner.
3. Add **Post title.**
4. Add **featured image** for this page.
5. Click <img src="https://highfivethemes.gitbook.io/~gitbook/image?url=https%3A%2F%2F570087162-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FwvffoSogkWPRht0dQCRD%252Fuploads%252FMe62hAJzByne8YkmhI5n%252F01.png%3Falt%3Dmedia%26token%3Db6e00f70-f0e4-4c3c-bede-ec8d21603049&#x26;width=38&#x26;dpr=4&#x26;quality=100&#x26;sign=2eb67510&#x26;sv=1" alt="" data-size="line"> icon in the top right corner to open the **Post settings.**
6. Add a **small description text** (inside **excerpt**). **Excerpt:** This will be displayed on the case study card.

   <figure><img src="/files/RHrSwsUTZ6EYldN0DVTh" alt=""><figcaption></figcaption></figure>
7. Select the **Template** dropdown and choose the Case Study Post.
8. Click **Publish.**

## To create client date to sideba&#x72;**:** <a href="#to-create-the-categories-page" id="to-create-the-categories-page"></a>

* Go to **Settings > Code injection** from the admin menu
* Choose **Site footer**

  ![](https://highfivethemes.gitbook.io/~gitbook/image?url=https%3A%2F%2F570087162-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FwvffoSogkWPRht0dQCRD%252Fuploads%252FoqrsCHnglV22rujAwIMR%252Fcode%2520injection.png%3Falt%3Dmedia%26token%3D6491f07f-f7cc-4e05-a3a3-7ebc40470fbb\&width=768\&dpr=4\&quality=100\&sign=50914ff5\&sv=1)
* Here is the code to add client data such as **client name and image**, **products used**, **company type**, **location**, **methods**, and **results**.

```javascript
<script data-case-study-clients>
  if (document.querySelector('#spectra')){
    document.querySelector('#spectra').insertAdjacentHTML("beforeend", `
      <div class="sidebar__client">
            <h4 class="sidebar__title">Client</h4>
            <div class="client-info">
                <div class="client-info__img-wrapper">
                    <img class="client-info__img" src="/assets/images/client1.jpg" alt="client img"> // You need to change "src" and specify your path tho the downloaded image
                </div>
                <div class="client-info__wrapper">
                    <span class="client-info__name">Nick Anderson</span> // To change the name
                    <span class="client-info__desc">CEO Spectra</span> // To change the position held
                </div>
            </div>
            <h4 class="sidebar__title">Products used</h4>
            <div class="sidebar__product">
                <span class="sidebar__text">Guides</span> // To change the product name
                <span class="sidebar__desc">Maximized efficiency with guides.</span> // To change the product description
            </div>
            <div class="sidebar__product">
                <span class="sidebar__text">Video Lectures</span> // To change the product name
                <span class="sidebar__desc">Elevated skills with video insights.</span> // To change the product description
            </div>
            <h4 class="sidebar__title">Company type</h4>
            <span class="sidebar__text">Higher Education</span> // To change the company type
            <h4 class="sidebar__title">Location</h4>
            <span class="sidebar__text">Canada</span> // To change the location
            <h4 class="sidebar__title">Methods</h4>
            <span class="sidebar__text">User Research</span> // To change the methods
            <h4 class="sidebar__title">Results</h4>
            <div class="sidebar__result">55+</div> // To change the results
            <span class="sidebar__result-desc">Increase in user engagement.</span> // To change the results description
            <div class="sidebar__result">30%</div> // To change the results
            <span class="sidebar__result-desc">Reduction in checkout time.</span> // To change the results description
        </div>
    `);
  }
</script>
```

**Adding Client Photos to the Theme**

To add a client's photo to the website, follow these steps:

1. Locate the theme folder named `assets`.
2. Inside the `assets` folder, find an `images` folder. If it doesn't exist, create a new folder named `images`.
3. Add the client's photos to the `images` folder.
4. Specify the correct path in the code to include these images.
5. After updating the theme with new photos, reload the

Please specify the path to the photo:

{% code title="With local image" %}

```
<img class="client-info__img" src="/assets/images/client1.jpg" alt="client img">
```

{% endcode %}

You can also add photos via the web if you don't want to upload photos to the topic.

{% code title="With image from web" %}

```
<img class="client-info__img" src="https://img.icons8.com/emoji/48/fire.png" alt="client img">
```

{% endcode %}

* Click **Save** to save your work!

{% hint style="info" %}
Starting with **Ghost 6.0**, themes will display a maximum of 100 case study posts on the case studies page.
{% endhint %}
