> 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/badges-and-labels/change-position.md).

# Change badge position

Place a badge inside or outside the product image, use preset or custom positions, and fine-tune its spacing.

Use the **Position** section to place a text or image badge over the product image, below a product-page element, or next to a custom theme element.

## Open the Position section

{% stepper %}
{% step %}

## Open Badges & Labels

In Shopify admin, open **Sami Product Labels > Badges & Labels**.
{% endstep %}

{% step %}

## Create or select a badge

To create a badge, click **Create badge**, then choose **Text badge** or **Image badge**.

To update an existing badge, click **Edit badge/label** in that badge's row.
{% endstep %}

{% step %}

## Expand Position

In the badge editor, stay on the **Design** tab, scroll to **Position**, and expand the section.

<figure><img src="https://1598842017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WRTlT5AcaLSAedbCJyZ%2Fuploads%2Fgit-blob-0352635ecd7e6f5736b77f0e3641e3535c1768af%2Fimage_31.png?alt=media" alt="Position section in the Design tab of the badge editor"><figcaption><p>Open the Design tab and expand Position.</p></figcaption></figure>
{% endstep %}
{% endstepper %}

## Place the badge inside the product image

Select **Inside product image** when the badge should overlay the product image.

### Choose where the setting applies

Use **Badge placement** to choose one of these modes:

* **Use the same position for collection page and product page** — One position applies to both page types.
* **Set different position for collection page and product page** — Use the **Listing pages** and **Product page** tabs to configure each position separately.

{% hint style="info" %}
The current editor labels the first per-page tab **Listing pages**, not **Collection page**.
{% endhint %}

<figure><img src="https://1598842017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WRTlT5AcaLSAedbCJyZ%2Fuploads%2Fgit-blob-802405614b5bd8ddd90013cbdc2c4f0e7c4fc560%2Fimage_32.png?alt=media" alt="Badge placement selector with Listing pages and Product page tabs"><figcaption><p>Apply one inside-image position everywhere or configure Listing pages and Product page separately.</p></figcaption></figure>

### Choose a preset position

Under **Badge position**, select one of the nine points in the position grid.

| Position          | Placement on the image    |
| ----------------- | ------------------------- |
| **Top left**      | Upper-left corner         |
| **Top center**    | Center of the top edge    |
| **Top right**     | Upper-right corner        |
| **Center left**   | Center of the left edge   |
| **Center**        | Center of the image       |
| **Center right**  | Center of the right edge  |
| **Bottom left**   | Lower-left corner         |
| **Bottom center** | Center of the bottom edge |
| **Bottom right**  | Lower-right corner        |

<figure><img src="https://1598842017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WRTlT5AcaLSAedbCJyZ%2Fuploads%2Fgit-blob-373bc58539ebc08918cb5dd7058ea793e5e41313%2Fimage_33.png?alt=media" alt="Nine-point Badge position grid for an inside-image badge"><figcaption><p>Select one of nine preset positions inside the product image.</p></figcaption></figure>

### Set a custom position by percentage

Turn on **Use Custom Position** when the nine presets are not precise enough. The editor replaces the grid with:

* A vertical anchor: **Top** or **Bottom**.
* A horizontal anchor: **Left** or **Right**.
* A percentage slider for the offset from each selected anchor.

Use the change-position buttons to switch anchors, then adjust the sliders while checking the preview.

<figure><img src="https://1598842017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WRTlT5AcaLSAedbCJyZ%2Fuploads%2Fgit-blob-c1efdfbec3c8a668db48160d32347ba046d23bdf%2Fimage_34.png?alt=media" alt="Use Custom Position enabled with vertical and horizontal percentage controls"><figcaption><p>Choose the vertical and horizontal anchors, then set their percentage offsets.</p></figcaption></figure>

## Place the badge outside the product image

Select **Outside product image** when the badge should appear beside product information instead of overlaying the image.

Open **Predefined position** and choose one of these options:

| Option                           | Placement on the product page                                 |
| -------------------------------- | ------------------------------------------------------------- |
| **Below the product image**      | Directly below the product image                              |
| **Below the product title**      | Directly below the product title                              |
| **Below the product price**      | Directly below the product price                              |
| **Below the product quantity**   | Directly below the quantity control                           |
| **Below the add to cart button** | Directly below the add-to-cart button                         |
| **Below the buy now button**     | Directly below the buy-now button                             |
| **Custom**                       | Next to an element identified by an ID or class in your theme |

Under **Badge position**, choose left, center, or right alignment for the badge.

<figure><img src="https://1598842017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WRTlT5AcaLSAedbCJyZ%2Fuploads%2Fgit-blob-e0b7372c73f877d6ec848e337c6eaf1099e3753b%2Fimage_35.png?alt=media" alt="Outside product image selected with the Predefined position menu"><figcaption><p>Choose a product-page element, then align the badge to the left, center, or right.</p></figcaption></figure>

### Place the badge with a theme selector

Choose **Custom** from **Predefined position** to target an element from your theme. Enter the relevant ID or class in any field you need:

| Field                           | Page type        |
| ------------------------------- | ---------------- |
| **Position in product page**    | Product pages    |
| **Position in home page**       | Home page        |
| **Position in collection page** | Collection pages |
| **Position in other page**      | Other page types |

For example, enter `.product-form` for a class or `#ProductInfo` for an ID. Add a value for each page type where the badge needs this custom placement.

{% hint style="warning" %}
Theme IDs and classes vary. Inspect your storefront theme to find a stable selector, then verify the result on every page type where the badge should appear.
{% endhint %}

<figure><img src="https://1598842017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WRTlT5AcaLSAedbCJyZ%2Fuploads%2Fgit-blob-ddd1033c637eec94ead9a75f2496d7ceb7c465d8%2Fimage_36.png?alt=media" alt="Custom outside-image position fields for product, home, collection, and other pages"><figcaption><p>Enter the theme ID or class for each page type that needs a custom badge position.</p></figcaption></figure>

## Adjust margin and padding

Expand **Margin** to change the outside spacing in pixels. The editor shows the sides relevant to the selected position.

Expand **Padding** to change the space between the badge content and its edges. You can set the top, bottom, left, and right values independently.

<figure><img src="https://1598842017-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WRTlT5AcaLSAedbCJyZ%2Fuploads%2Fgit-blob-b77f878eeba5f6d0285a5f6790f86dd71afbac97%2Fimage_37.png?alt=media" alt="Expanded Margin and Padding controls in the Position section"><figcaption><p>Fine-tune the badge with pixel-based margin and padding values.</p></figcaption></figure>

## Preview and save

Use the preview controls to check **Collection page** and **Product page**, then switch between **Desktop view** and **Mobile view**. When the badge appears in the intended location, click **Save**.

## Next steps

* [Change Badge Size](/badges-and-labels/change-size.md) — Resize the badge for different viewports and page types.
* [Change Badge Style](/badges-and-labels/change-style.md) — Customize fonts, colors, borders, and backgrounds.
* [Display by Device & Page](/badges-and-labels/display-device-page.md) — Control which devices and pages show the badge.

{% hint style="success" %}
**Need support?**

If you run into any difficulty while following these steps, contact us at <support@samita.io>.
{% endhint %}


---

# 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/badges-and-labels/change-position.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.