> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Lab - Customize Components

Plan: Stencil Developer

Lesson 6 of 18 · 30 min

**In this lab, you will:**

* Rearrange components on a page
* Add and remove components

**Prerequisites**

* Previous labs have been completed

> **Info**
>
> Before proceeding, either switch back to the original variation (**stencil start**), or ensure you are making changes in the **Settings** of the variation created above.

## Step 1: Rearrange Components on a Page

1. **Navigate** to Templates > Components > Common
2. **Open** templates/components/common/header.html
3. **Locate** and **cut** the following snippet:

```text showLineNumbers={false}
{{> components/common/navigation-menu}}
```

![Navigation menu snippet location](/_fern-img/6bd8e9cebcf49dcc8f8f27e97fe04aed629a0cc534d62d2a00b8a19f07fd1786.webp)

![Navigation menu snippet highlighted](/_fern-img/832df7eb4aec8691870ab5f8ab4813d1bfedcba07670c92b72fdcc8b1524d8c1.webp)

4. **Paste** at the very top of the file

![Navigation menu pasted at top](/_fern-img/16107182475e5b88afaf7ebe7b423e4b7e8d68d3ded13807f9c876677435f9aa.webp)

5. **Observe** navigation menu moved to top of page

![Navigation menu moved to top of page](/_fern-img/c9b0676da8d698132dd49c8da326a60e4562bcc33fe40e7994a9cdc0aa023d51.webp)

## Step 2: Remove Social-Links Component

**Introduction**

Before you begin the next step, make sure you have **visible Social Links on your storefront.** Social Links will only be visible if they have been enabled through the Storefront > Social media links in the control panel.

Additionally, if you haven't enabled any social link icons in the control panel (Storefront > Social media links), only the text from the custom component will be visible.

1. **Navigate** to *Components > Common*
2. **Open** footer.html
3. **Locate** and **delete** the following snippet:

```text showLineNumbers={false}
{{> components/common/social-links}}
```

![Social links snippet in footer](/_fern-files/bigcommerce.docs.buildwithfern.com/2299121bd4e21cdc8e35d8a258b4c8b1ca73cdc176f5d7d8252b812241eded08/assets/learn/stencil-core/image-13.jpg)

## Step 3 - Add a New Component

1. **Right** click on Component
2. **Select** *New > HTML File*

![Create new HTML file](/_fern-img/ab59320a990b8c1ea158ce27fdab9eede6930033f6444d062ffdee0c7d3224af.webp)

3. **Name** the new file "test.html" and **click** *OK*
4. **Replace** the contents of the new file with plain text (ex. TEST)

![Test component contents](/_fern-files/bigcommerce.docs.buildwithfern.com/2572dc0fd31ddb7db4bfa23c80efa6c97fe984b940be77d2d45d3b59a57f8495/assets/learn/stencil-core/image-15.png)

5. **Add** the new component to the footer.html file directly under the payment-icons component

```text showLineNumbers={false}
{{> components/common/test}}
```

6. **Observe** test component text on storefront

![Test component on storefront](/_fern-files/bigcommerce.docs.buildwithfern.com/aa2293b52c01daaef5ca324b21254a35d8683c3375b0f17d13dbb429d6bccbee/assets/learn/stencil-core/image-16.png)