(Collection to List Section Sync) Tag above Product Name

Description

• List Simple Section, use Collection to List Section Sync Plugin
• Add Tag above Product Name

Use this code under Plugin code in Code Injection > Footer

<script>
setTimeout(function(){if(typeof SummaryListSections!=='undefined'){SummaryListSections.prototype.mapCollectionDataToListItems=function(){for(let[t,e]of this.sectionItems.entries()){const item=this.collectionData[t];const{title:i,assetUrl:s,excerpt:a,fullUrl:l,sourceUrl:c,recordTypeLabel:d,passthrough:m,tags:tagData}=item;const u=m?c:l;let p=new URL(s),g=new URLSearchParams(p.search);g.set("isSyncedImage","true"),p.search=g.toString();let S=e.querySelector(".list-item-content__title");let L=e.querySelector(".list-item-content__description");let y=e.querySelector("img");let v=e.querySelector("a.list-item-content__button");e.classList.add(d);if(S){if(tagData&&tagData.length>0){let existingTag=S.parentElement.querySelector('.list-sync-tag');if(!existingTag){let tagElement=document.createElement('div');tagElement.className='list-sync-tag';tagElement.textContent=tagData[0];S.parentElement.insertBefore(tagElement,S)}}
S.innerHTML=this.settings.titleLink?`<a href="${u}">${i}</a>`:`<span>${i}</span>`}
if(L)L.innerHTML=a;if(y){let newImg=y.cloneNode(!0);newImg.src=p;newImg.dataset.src=p;newImg.dataset.image=p;newImg.srcset="";y.parentElement.append(newImg);if(this.settings.imageLink&&!y.querySelector(".image-link")){const linkEl=document.createElement("a");linkEl.href=u;linkEl.classList.add("image-link");y.parentElement.append(linkEl)}
y.style.display="none"}
if(v){v.setAttribute("href",u);const originalText=this.sectionItems[0].querySelector("a.list-item-content__button").innerHTML;v.innerHTML=originalText}}
window.dispatchEvent(new Event("resize"))}}},2000)
</script>

Next, use this to Custom CSS

div.list-sync-tag {
    color: gray;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 10px;
}