> For the complete documentation index, see [llms.txt](https://docs.samita.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.samita.io/sami-b2b-onboarding/add-a-form-to-your-store/theme-editor-block.md).

# Add the form block in the theme editor

Show an application form as a section on a page template, using the app's block in the theme editor.

Sami B2B Onboarding adds a **B2B application form** block to your theme. It shows a form as a section of its own on a page template, so you can put your own sections above and below it, such as a banner or a list of what wholesale buyers get.

{% hint style="info" %}
Before you start: the form must be published (**Active** in **Forms**). Keep the app embed on as well, so your store access settings apply on the page. See [Turn on the app embed](/sami-b2b-onboarding/getting-started/turn-on-the-app-embed.md).
{% endhint %}

## Pick a template for the form

A section added to a page template shows on every page that uses that template. Most pages use your theme's default page template, including the page the app made for your form, which already holds the form. To show the form on one page only, give that page a template of its own, as in the steps below.

## Add the block to a template of its own

{% stepper %}
{% step %}

### Open the theme editor

In your Shopify admin, go to **Online Store › Themes** and click **Edit theme** on your current theme.
{% endstep %}

{% step %}

### Create a page template

Open the template menu at the top of the theme editor (it reads **Home page** when the editor opens). Choose **Pages**, then **Create template**. Name it, for example `wholesale`, base it on **Default page**, and click **Create template**.

The editor switches to the new template.
{% endstep %}

{% step %}

### Add the form section

In the sidebar on the left, click **Add section** under **Template**, open the **Apps** tab and choose **B2B application form**.

The form is added as a block in an **Apps** section, and the preview shows your default form in it. In the theme editor you always see the form itself, even when you're signed in to your store.

<figure><img src="https://3844812229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRrf4pQPgjvb3GW7IN3Ci%2Fuploads%2Fgit-blob-b38ae72e6cad4fb787674cbc84107e5581b406e3%2Fscreenshot-shopify-theme-editor-add-form-section.png?alt=media" alt="The theme editor on the wholesale page template, with the Add section panel open on the Apps tab and the B2B application form block from Sami B2B Onboarding listed."><figcaption><p>Add section under Template, then pick B2B application form on the Apps tab.</p></figcaption></figure>
{% endstep %}

{% step %}

### Choose the form

Click **B2B application form** under **Apps** in the sidebar. In its **Form** box:

* leave it empty to show your default form, or
* type another form's slug, the short name the box's help text asks for.

To find a form's slug, go to **Forms** in the app, click **…** (More actions) on the form's row and choose **Copy embed code**. Paste it somewhere you can read it: the slug is the text in the last pair of quotes. For the **Wholesale application** form, it's `wholesale-application`.

<figure><img src="https://3844812229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRrf4pQPgjvb3GW7IN3Ci%2Fuploads%2Fgit-blob-9063380dcffab1f8d0c031bc677fce232eb02e2a%2Fscreenshot-shopify-theme-editor-form-setting.png?alt=media" alt="The theme editor on the wholesale page template, with the B2B application form block selected, wholesale-application typed in its Form box, and the application form in the preview."><figcaption><p>Leave Form empty for your default form, or type another form's slug.</p></figcaption></figure>
{% endstep %}

{% step %}

### Save

Click **Save** at the top right of the theme editor.
{% endstep %}

{% step %}

### Give a page the template

In your Shopify admin, go to **Online Store › Pages**. Open the page that should show the form, or click **Add page** to make one and give it a title, for example `Wholesale`. Under **Theme template**, choose `wholesale`, then click **Save**.

Don't choose it for the page the app made for the form: that page already holds the form, so it would show twice.
{% endstep %}
{% endstepper %}

## Use the shortcut from Forms

The app has a shortcut that opens the theme editor with the block ready.

{% stepper %}
{% step %}

### Open the shortcut

In the app, go to **Forms**. Click **…** (More actions) on the form's row and choose **Add block in theme editor**.

<figure><img src="https://3844812229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRrf4pQPgjvb3GW7IN3Ci%2Fuploads%2Fgit-blob-433e6aa7855a9dc1f9d129bd6158e9a09b11d1ad%2Fscreenshot-forms-more-actions-add-block.png?alt=media" alt="The More actions menu of a form on the Forms page, listing View applications, Copy embed code, Add block in theme editor, Duplicate form, Unpublish and Delete form."><figcaption><p>Add block in theme editor opens the theme editor with the form block added.</p></figcaption></figure>
{% endstep %}

{% step %}

### Pick the form and save

The theme editor of your current theme opens on the default page template, with the **B2B application form** block added. Click the block, type the form's slug in **Form** (or leave it empty for your default form), then click **Save**.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
The shortcut adds the section to your default page template. Every page that uses that template then shows the form, including the page the app made for it, which shows the form twice. To show the form on one page only, use a template of its own as described above.
{% endhint %}

## Check it on your store

{% stepper %}
{% step %}

### Open the page as a guest

Open the page on your store in a private browser window, so you see it as a buyer who isn't signed in. The form shows in its section, between your other sections.
{% endstep %}

{% step %}

### Fix what you see, if needed

* **This form is not available right now.** The slug in **Form** doesn't match a published form. Check the spelling, or publish the form in **Forms**.
* **A different form shows.** **Form** is empty, so the section shows your default form. Type the slug of the form you want, or make that form the default with **…** (More actions) › **Set as default** in **Forms**.
  {% endstep %}
  {% endstepper %}

If you lock your store, a page from **Online Store › Pages** that shows the form stays open to visitors. See [Lock the store](/sami-b2b-onboarding/store-access/lock-the-store.md).

## Next steps

* [Design the form](/sami-b2b-onboarding/application-forms/design-the-form.md) — match the form's font, colors and width to the page around it.
* [Paste the embed code](/sami-b2b-onboarding/add-a-form-to-your-store/embed-code.md) — put the form in a Custom Liquid section or a page builder instead.
* [Use the form page the app creates](/sami-b2b-onboarding/add-a-form-to-your-store/use-the-form-page.md) — share a ready-made page when you don't need a designed one.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.samita.io/sami-b2b-onboarding/add-a-form-to-your-store/theme-editor-block.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.