The Badge Manager provides merchants with the ability to adjust when and where badges appear on a product card on their site. This feature extends the self-serve functionality of the Searchspring™ Management Console (SMC), similar to other merchant-driven features such as merchandising campaigns, filters, and field settings.
Badges highlight attributes of specific products, such as an item on sale, an item with a special quality like “eco-friendly”, an item that is a best-seller, or a new product. You may use badges to highlight any attribute that may entice a shopper to purchase it.
You define the style of the badge and the rules used to determine when that badge displays. You can display multiple badges on each product, controlling what causes a badge to appear, where it appears, what it displays, and which badge has higher priority. Badges can be configured for position, color, and style. The system ties each unique condition (new, bestseller, low stock, etc.) to a condition tagged by you.
Access the Badge Manager within the SMC by navigating to Site Customizations, then clicking "Badges" in the "Display Settings" portion of the menu. If you do not see this menu, it may not be enabled for your site. Speak to your Customer Success Manager to enable the feature.
To add a new badge, click the "Add new badge" button. The Badge Design tab will appear.
Badge Design
During initial site implementation, you will define where your badges will appear. This action is to style the “slots” that you can use later to set up badge rules to fill with your badge contents.
Here, you define style elements that are found in the badge template, such as font, background color, padding, and spacing. Once the badge style (defined in the selected template) is chosen, the style is applied to the badge slots.
Note: Remember to save your changes when editing or creating a badge. If you navigate away from the badge designer without saving your changes, any unsaved configurations will be lost.
Any entry errors will be called out with red text. In the image below, there is an invalid character in the badge name, so that message is displayed below the name entry.
Badge names are unique; once the badge name has been set, the name auto-populates the label (input text) in the design settings.
Badge Styles
Badges come with a predefined selection of styles. The image below displays an example of possible input fields, which will differ based on the selected badge style. (For customized badge templates, contact your CSM.)
Note: When creating a new badge, click the "Continue" button to move from the "Badge Design" tab to the "Badge Behavior" tab, where you will save your changes. When editing an existing badge, click the "Save Changes" button instead.
The fields in the Badge Design tab appear as follows:
Badge Name
Key in the badge name into this field. The Badge Name is a unique identifier for this particular badge configuration. Once you input the badge name, the Badge Tag will be automatically generated based on the Badge Name. Badge Tags are used specifically for customer-managed front-end integrations.
Badge Style (Badge shape)
Select a badge style (template) from the drop-down menu. To add custom badge shapes, contact your CSM.
- Pill Badge (rounded rectangle)
- Rectangle Badge
- Text Badge (text only)
- Image Badge (URL)
Once the badge style is selected, the system will display style selectors to customize the badge.
Note: The Badge Name, Badge Style, and Position fields are mandatory.
Position
Once the badge has been named, select its position within the product card. Three sections of the product display are available for badges: Left, Right, and Callout (at the bottom of the product image). Users may configure a maximum of 30 badges, and there are no limits to how many of the 30 can be assigned to each section.
Each location can display only one badge at a time. If there are multiple rules for different badges assigned to the same location (such as the left section), the system will review the rules and determine which takes precedence, based on the priority assigned.
For example, if “new” and “best-seller” badges are assigned to the same slot, you will need to set up two badge rules:
- “New” badge: When a product has “is_new” in the ss_tags field, display “New”.
- “Best-seller” badge: When a product has “is_bestseller” in the ss_tags field, display “Best Seller”.
If a particular product is both “new” and a “best seller”, and Rule 1 & 2 are both satisfied, the first rule in the listed order will take priority, since only one badge at a time can be displayed for the location.
Note: Location-specific badges have restricted drop-down options (only left, only right, or only callout, depending on how this was configured in setup). A location-agnostic badge can be placed in any section (left or right).
Optional Template Parameters
Depending on the badge style that is selected, the template for that badge style may include a number of optional parameters that you can configure, including the following.
Background Color
Click the drop-down menu to select a badge background color from the display, or key in an alternate color using the hex code or RGB parameters. Use the transparency slider to select the level of transparency/saturation for the chosen color.
Text Color
Click the drop-down menu to select a text color from the display, or key in an alternate color using the hex code or RGB parameters. Use the transparency slider to select the level of transparency/saturation for the chosen color.
Image URL
If the Badge style you've chosen includes an image URL, type or paste-in the URL of the image’s location. All common image types are accepted, including .png, .svg, .webp, .jpg, .jpeg, and .gif.
Note: The URL should begin with "http://" or "https://".
Badge Behavior
Once Badge Design has been configured, switch to the Badge Behavior tab to configure the Badge rules. These rules define the conditions for when a badge should be applied to a product, and what label will be displayed.
Note: Some badges do not include a label. For those that do, the Label settings are mandatory.
Badge Name
This value is pulled from the "Badge Design" tab.
Label Type
Select the label input type from the drop-down list:
- Text
- Field value
Note: The available input fields depend on the style chosen for the badge in the Badge Design tabs.
Label Value
This field’s options are determined by the selection in the previous field, Label Type.
- If “Text” is chosen for the label input in the previous field, the content in this field will auto-update to the value in the Badge Name field when the badge name was first entered. You may replace the text here; however, if the badge name is later changed, this field will not update to match it.
- If “Field value” is chosen for this field, the input will change to a field drop-down list.
- If “No label” is chosen in the previous field, this field will be disabled.
Behavior
This section defines custom behaviors and conditions for when the badge is applied to a product.
Apply Badge When
Click the drop-down list to select from the available options. The values here depend on the badge type and the merchant's data.
Note: All values after the value Apply Badge When are conditioned to what is available for that field in question. For example, if the field Apply Badge When has been configured for “product tag”, then all available condition options will be tag-related.
Condition
Click the drop-down list to select from the available options. The values here depend on how the badge has been configured. They may include some or all of the following:
- equals
- is not equal to
- is null
- is not null
- is more than
- is more than or equal to
- is less than
- is less than or equal to
Field Value
Once the "Apply Badge When" and "Condition" values are chosen, the Field Value field will update per the previous selections.
If the field is a number, the rule can have mathematical operations such as:
- Is equal to
- Is less than
- Is more than
For example: Price is less than 100.00.
If the field is is not a number, the rule can have operations such as:
- Is
- Contains
- Is not
For example: Color is blue.
Note: Changes to badge behaviors are applied after indexing is complete, unless you use live indexing in which case the product might be updated earlier in a live-indexing event.
Note: No two badges can have the exact same set of rules.
Sample badge rules
Display field value
Show the field value for badge text. For example:
When “ss_status” is equal to "New", show "New"
Display input text
Show text input for badge text. For example:
When product_inventory less than “10”, display “Low Stock”(text input)
Display variable text on a badge
Show discount percentage depending on the discount calculated in the badge. For this you will need to create a product filter, for example:
When ss_discount_prcnt is not 0, show ss_discount_prcnt
Note: A product filter must be setup to calculate the discount percentage. For example:
ss_discount_prcnt = [(MSRP - price)/MSRP *100] + “% off”
The output of this operation is then stored in the field, and that field can be selected to display on the badge.
Once your configurations are set, click the Create Badge button to save your changes and create the new badge, or press the Discard button to remove those changes.
Additional configurations
Make additional configurations on the main badges screen; this addresses elements of each badge tag’s positioning and status.
Section (Left, Right, or Callout)
This header displays the section of each badge that was created: left, right, or callout. Only sections with existing badges will be displayed. (The "callout" section is the portion of the product card where the title, price, rating stars, add-to-cart button, etc., are displayed. It is typically located below the product image and can be rather large.)
Badge Name
The left column displays the badge name.
Status
The right column displays the badge's status: live or paused. Click the button to toggle the selection.
Click the pencil icon to open the Badge Design and edit the badge settings, or press the trashcan icon to delete the badge.
When a new badge is created, it shifts automatically to have the top priority in its section (left, right, or callout). To redefine a badge's priority, drag the badge up or down in the list using the grid icon at the left of each badge. Badge priority defines which badge will be shown if more than one badge in the same section is enabled for the same product.
An example of the reprioritization process is shown below:
Canceling or discarding changes
You cannot close badge creation without populating the mandatory inputs. If you opt to close the accordion with any of the following actions, a pop-up warning may appear to ask if you are sure: "Discard badge changes? You will lose all changes made to this badge". If you click “Yes”, all previous information will be discarded.
Click the “Discard” button or the “Keep Editing” button.
Comments
0 comments
Article is closed for comments.