Skip to main content

Placeholders

Placeholders are designed to group labels by position and manage their appearance in the store.

note

Placeholders are the fundamental building blocks of the extension. They should be created before any labels are added.

Placeholders list​

Navigate to Marketing -> Promotions -> Product labels -> Manage placeholders to view the full list.

Campaigns dashboard

Placeholders list

Here, you'll find the following fields:

  • ID: the ID of the placeholder.
  • Title: a unique placeholder name.
  • Identifier: a unique placeholder identifier.
  • Status: the current placeholder status.
    • Enabled
    • Disabled
  • Position: the location on or around the product image where the label placeholder will appear.
  • Actions: available actions for the selected placeholder.
    • Edit: allows you to modify the placeholder.
    • Delete: removes the placeholder from the list.

Placeholder settings​

Use the Edit option in the Action column to view details of a specific record. Next placeholder settings will be available:

  • Title: a sensical title of placeholder.

  • Identifier: the identifier (code) of placeholder that is used to display labels, bound to this placeholder at required positions.

  • Is active: indicates whether this placeholder is active, and the bound labels are eligible for display.

  • Limit of labels: the number of labels to be displayed in the placeholder. If the number of labels assigned to the placeholder exceeds the specified limit (n), only the first n labels will be shown (sorted by their sort order). Leave this field empty or set it to 0 to disable the limit.

  • Labels direction: describes how labels should be arranged within the placeholder if more than one label is assigned to it:

    • Horizontal: labels are shown in a row (horizontally).
    • Vertical: labels are shown in a column (vertically).

  • Styles: CSS applied to this placeholder on the storefront. The styles apply to the placeholder itself, so plain declarations are enough, for example:

    min-height: 38px;
    background: #f3f4f6;

    LESS syntax is supported: nested rules, & (the placeholder itself) and @media queries, for example & > span { opacity: .8; } or @media (min-width: 768px) { min-height: 50px; }.

    The styles can only change the placeholder and the labels inside it:

    • Styles that use @import, @plugin, data-uri, image-size, image-width or image-height cannot be saved.
    • Styles that reach elements outside the placeholder are not applied on the storefront. This includes rules for other page elements, sibling selectors (+, ~) and rules such as @font-face or @keyframes. In this case, none of the placeholder's styles are applied.
    tip

    To see the new styles on the storefront, clear the Magento cache after saving the placeholder.

  • Position: allows choosing where labels should be displayed. This field has options for three types of positioning:

    • Automatically positioned: options for placing labels in a fixed position over the product image. The Position is calculated from two directions: vertical (Left, Center, Right) and horizontal (Top, Middle, Bottom). Not related to Labels direction option.

      Campaigns dashboard

      Placeholder position field

      If you wish to position the label to the upper right corner, select Top Right option. Only one placeholder for each of these positions can be created.

    • Outside: options for placing labels in a row above or below the product image instead of over it, so labels never cover the product photo. Available options are Outside Top Left, Outside Top Center, Outside Top Right, Outside Bottom Left, Outside Bottom Center and Outside Bottom Right. Only one placeholder for each of these positions can be created.

      Labels in outside positions

      Labels in outside positions on a product listing

      Outside positions apply to product images in lists: category pages, search results, and product blocks such as related products, up-sells and catalog widgets. On the product page, the main product image shows only labels from on-image placeholders.

      An outside placeholder has no height of its own: its height depends on the labels it contains, and it takes no space when a product has no labels in it. As a result, product tiles with and without outside labels in the same row may not line up. To keep the rows aligned, set a fixed height for the placeholder in the Styles field, for example min-height: 38px;.

      tip

      When the labels of a row do not fit the width of the product tile, they move to the next line, and a long label text wraps within the tile. Keep outside labels short for a tidy listing.

    • Manually positioned: allows you to place a label anywhere by inserting a code snippet into the corresponding location in the template file. This type of label has only one option — Manual. You can create as many manually positioned placeholders as needed. The code snippet for each placeholder will be generated after it is saved. For more information on manually positioned labels, see Display labels with manual position.