# How to Embed a Section Inside Your Article Content

You can insert a custom section directly into your article content using a special shortcode. This is perfect for adding dynamic or reusable content blocks—like forms, banners, or product highlights—anywhere in your article. For the most flexibility, we recommend creating a unique blog post template for each article where you want to use this feature.

<figure><img src="https://p197.p4.n0.cdn.zight.com/items/eDuDWWpn/17d4a585-64d0-4452-8efb-465ee2258211.jpg?v=49901e707f39c70975c13ce9444cb8d3" alt=""><figcaption></figcaption></figure>

***

#### Step 1: Create a New Blog Post Template and Assign It

1. In your Shopify admin, go to **Online Store > Themes** and click **Customize** on your current theme.
2. In the theme editor, use the page selector at the top to navigate to a blog post.
3. Click the dropdown at the top center and select **Create template**. Give your new template a unique name (e.g., `custom-article-template`).&#x20;
4.

```
<figure><img src="https://p197.p4.n0.cdn.zight.com/items/6qupdg2b/cfc3f03c-bd09-4446-a478-8df4defac002.gif?v=57900ec12373d052ded3e120f306128f" alt=""><figcaption></figcaption></figure>
```

5. Customize this template as needed. This will allow you to add unique sections or content for this specific blog post. For this tutorial to work, you MUST use the Design Pack section called [Article content](https://design-packs.com/blogs/blog-fluid-grid/article-content) (all of the Design Pack blog post templates use this section, eg. [Browse](https://design-packs.com/blogs/featured-post-blog/browse) and [Spotlight](https://design-packs.com/blogs/featured-post-blog/spotlight))&#x20;

   <figure><img src="/files/ecvxtTWzoQI1ZTIV5DLj" alt=""><figcaption></figcaption></figure>
6. Save the template.
7. Assign this new template to your desired blog post:
   * Go to **Online Store > Blog Posts** in your Shopify admin.
   * Edit the blog post you want to update.
   * In the **Theme template** section, select your new template and save.

{% embed url="<https://share.zight.com/xQumGXb4>" %}

***

#### Step 2: Set Up the Section with a Link anchor ID

* **Add a new section** in your theme editor and configure (while editing your new blog post template).

{% embed url="<https://share.zight.com/P8uzn457>" %}

* Go to the **Advanced** settings for the section.
* In the **Link anchor id** field, enter a value that starts with `embed` (for example: `embed-newsletter`, `embed-promo`, or `embed-gallery`).

{% embed url="<https://share.zight.com/RBu2oxlD>" %}

* **Important:** The anchor id must begin with `embed` for this feature to work.
* **Why?** Sections with an anchor id starting with `embed` are hidden from the main page and only appear where you place the shortcode.

***

#### Step 3: Add the Shortcode to Your Article

In your article content, insert the following shortcode exactly where you want the section to appear:

```
[#embed-section#]
```

* Replace `embed-section` with the exact value you set in the **Link anchor id** field. Eg. `[#embed-gallery#]`
* **There must be no spaces anywhere in the shortcode.**

{% embed url="<https://share.zight.com/NQum2PYg>" %}

***

#### Step 4: Save and Preview

1. Save your article.
2. When you view the article, the section will appear exactly where you placed the shortcode. You can edit the section as needed and it will updated in the article. You can add multiple embedded sections into your article with the same approach. Eg. \[#embed-gallery-1#], \[#embed-gallery-2#], etc

{% embed url="<https://share.zight.com/X6uLgP7P>" %}

***

#### Examples

**Newsletter Signup**

*Link anchor id:* `embed-newsletter`

*Shortcode:*

```
[#embed-newsletter#]
```

**Promotional Banner**

*Link anchor id:* `embed-promo-banner`

*Shortcode:*

```
[#embed-promo-banner#]
```

**Contact Form**

*Link anchor id:* `embed-contact-form`

*Shortcode:*

```
[#embed-contact-form#]
```

**Custom Gallery**

*Link anchor id:* `embed-gallery`

*Shortcode:*

```
[#embed-gallery#]
```

***

#### Notes & Best Practices

* **The Link anchor id must start with `embed`** (e.g., `embed-form`, `embed-banner`, `embed-gallery`).
* **The shortcode must be in the format:**

  ```
  [#embed-section#]
  ```

  with no spaces.
* If you remove the shortcode from your article, the section will not display anywhere on the page.
* You can use this feature to add forms, banners, or any custom content block to your articles.
* Creating a unique template for each blog post gives you maximum flexibility for custom content. Alternatively, you can create metaobjects to populate the sections and use the same template for multiple articles (knowledge of metafields and metaobjects is required)
* You will see a "HTML error found" warning message on the template with this approach, but this can safely be ignored and only appears in the theme editor (it appears because we are nesting the section in another section)

  <figure><img src="/files/eUIzQrb5OB4nHPM8PgVs" alt="" width="265"><figcaption></figcaption></figure>

***

**Need help?**

If you have questions or need assistance, contact our support team at <info@design-packs.com>.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://design-packs.gitbook.io/docs/fundamentals/helpful-guides/how-to-embed-a-section-inside-your-article-content.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
