Skip to content
SamitaSamita docs

Search guides in Product Labels.

    Try free for 7 days
    English
    EnglishFrenchSoonItalianSoonJapaneseSoonSpanishSoonPortuguese (Portugal)SoonGermanSoonCzechSoonDanishSoonFinnishSoonKoreanSoonNorwegian (Bokmål)SoonDutchSoonPolishSoonPortuguese (Brazil)SoonTurkishSoonChinese (Simplified)SoonChinese (Traditional)Soon
    Open in Claude Ask questions about this pageOpen in ChatGPT Ask questions about this page

    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

    Section titled “Open the Position section”

    1. Open Badges & Labels

      Section titled “Open Badges & Labels”

      In Shopify admin, open Sami Product Labels > Badges & Labels.

    2. Create or select a badge

      Section titled “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.

    3. Expand Position

      Section titled “Expand Position”

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

      Position section in the Design tab of the badge editor

      Open the Design tab and expand Position.

    Place the badge inside the product image

    Section titled “Place the badge inside the product image”

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

    Choose where the setting applies

    Section titled “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.

    Badge placement selector with Listing pages and Product page tabs

    Apply one inside-image position everywhere or configure Listing pages and Product page separately.

    Choose a preset position

    Section titled “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

    Nine-point Badge position grid for an inside-image badge

    Select one of nine preset positions inside the product image.

    Set a custom position by percentage

    Section titled “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.

    Use Custom Position enabled with vertical and horizontal percentage controls

    Choose the vertical and horizontal anchors, then set their percentage offsets.

    Place the badge outside the product image

    Section titled “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.

    Outside product image selected with the Predefined position menu

    Choose a product-page element, then align the badge to the left, center, or right.

    Place the badge with a theme selector

    Section titled “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.

    Custom outside-image position fields for product, home, collection, and other pages

    Enter the theme ID or class for each page type that needs a custom badge position.

    Adjust margin and padding

    Section titled “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.

    Expanded Margin and Padding controls in the Position section

    Fine-tune the badge with pixel-based margin and padding values.

    Preview and save

    Section titled “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

    Section titled “Next steps”

    Was this helpful?