Display a sticker on specified vendors logo
Do you want to put a label on vendor logo, indicating trust level or similar. How can I go about this e.g. if I wanted to put "Trusted Vendor" in a Green label with white text for selected vendors
in the file company_data.tpl that is located in the directory: design/themes/abt__unitheme2/templates/addons/abt__unitheme2_mv/overrides/common.Replace this text:
{if $show_links}<a class="ty-company-image-wrapper" href="{"companies.products?company_id=`$company.company_id`"|fn_url}">{/if} {include file="common/image.tpl" images=$company.logos.theme.image image_width="240" class="ty-company-image"}
with this one:
{if $show_links}<a class="ty-company-image-wrapper" href="{"companies.products?company_id=`$company.company_id`"|fn_url}">{/if} <div class="logo-sticker-wrapper"> {include file="common/image.tpl" images=$company.logos.theme.image image_width="240" class="ty-company-image"} <div class="logo-sticker">Trusted Vendor</div> </div>
in the file company_data.tpl that is located in the directory: design/themes/abt__unitheme2/templates/addons/abt__unitheme2_mv/overrides/common.
Then I have added the following CSS code to the store:
.ty-company-detail__logo { position: relative; display: inline-block;}img#det_img_9 { display: block; position: relative; }img#det_img_9 + .logo-sticker, img#det_img_241 + .logo-sticker { position: absolute; top: 10px; right: 10px; background-color: green; color: white; padding: 4px 8px; line-height: 1.2; font-weight: bold; border-radius: 5px; text-align: center; display: flex; align-items: center; justify-content: center; white-space: nowrap; z-index: 1000; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); }/* Hide the sticker by default if no image with the ID det_img_9 exists */.logo-sticker { display: none; }img#det_img_9 ~ .logo-sticker { display: flex; /* Make sure the sticker is shown if the image exists */}.ty-companies__img { position: relative; display: inline-block; }/* sticker on the vendor list page */img#det_img_141 { display: block; /* Ensure the image is a block-level element */ position: relative; /* Ensure the sticker is positioned relative to this image */}
where #det_img_141 image logo ID on the vendors list page and #det_img_9 logo on a Farm Pets vendor's page.