How to add a stick to vendor logo

First tried v18.2a

I wanted to indicate the level of trust in a vendor. This allows customers to use vendors that have been reviewed by us and provides the opportunity to charge vendors for certificaiton at a 'trust level'. The solution is a little messy and would be worse with more than a few vendors. There is likely a way to turn this into a add-on but at the moment this code relies on you identifying the file reference for the vendor logo for each vendor you wish to add a 'sticker' for.

If there is an easier way, please share your code :)

Follow this step-by-step guide to add a "Vendor Level" sticker (e.g., "Trusted Vendor") across the top of a vendor's logo.

Step 1: Locate the Relevant Template File

You need to modify the template file responsible for rendering the vendor's logo.

Navigate to the following directory within your platform's theme folder:

      design/themes/YOUR_THEME/templates/addons/YOUR_ADDON/overrides/common/

In the example, the file was company_data.tpl, located at:

      design/themes/abt__unitheme2/templates/addons/abt__unitheme2_mv/overrides/common/company_data.tpl

Step 2: Modify the HTML Template

Add a new <div> for the sticker inside the existing logo container:

Find the part of the code where the vendor logo is displayed:

      {if $show_links}{/if}
      {include file="common/image.tpl" images=$company.logos.theme.image image_width="240" class="ty-company-image"}

Replace the code with this:

      {if $show_links}{/if}
        
          {include file="common/image.tpl" images=$company.logos.theme.image image_width="240" class="ty-company-image"}
          Trusted Vendor

Step 3: Add Custom CSS

The next step is to position the sticker over the vendor's logo using CSS. You will need to add this CSS to your theme's styles:

    /* Ensure the logo container is positioned relative */
    .ty-company-detail__logo {
      position: relative;
      display: inline-block;
    }

    /* Vendor logo specific IDs */
    img#det_img_9, img#det_img_141 {
      display: block;
      position: relative;
    }

    /* Sticker position and style */
    .logo-sticker {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: green;
      color: white;
      padding: 4px 8px;
      font-weight: bold;
      border-radius: 5px;
      text-align: center;
      white-space: nowrap;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Hide sticker if no image exists */
    .logo-sticker {
      display: none;
    }

    /* Show sticker when logo is present */
    img#det_img_9 ~ .logo-sticker, img#det_img_141 ~ .logo-sticker {
      display: flex;
    }

Step 4: Adjust for Specific Vendors (Optional)

If you want the sticker to appear only for certain vendors, you can add conditional logic:

    {if $company.company_id == 9}
      Trusted Vendor
    {/if}

Step 5: Clear Cache and Test

After making the changes, clear the cache to apply updates:

    php admin.php --dispatch=tools.clear_cache

Visit the storefront and check the vendor logos to confirm the "Trusted Vendor" sticker is displayed correctly.

Conclusion

Following these steps, you can add a custom "Vendor Level" sticker across the top of a vendor's logo on both the vendor detail and vendor list pages. The sticker is styled using CSS, and the HTML template is modified to include a wrapper around the vendor's logo, allowing the sticker to be positioned accordingly.