To add custom text under Product Name in Shop Page, like this.
#1. First, edit each product > Click on EDIT in SEO and URL
#2. Enter custom text in SEO Description, like this
or this.
#3. Next, use this code to Code Injection > Footer
<script>document.addEventListener('DOMContentLoaded',function(){document.querySelectorAll('.product-list-item').forEach(item=>{const titleLink=item.querySelector('.product-list-item-link');const productTitle=item.querySelector('.product-list-item-title');if(titleLink&&productTitle){const href=titleLink.getAttribute('href');if(href){fetch(href+'?format=json-pretty').then(response=>response.json()).then(data=>{const seoDescription=data.item?.seoData?.seoDescription;if(seoDescription){const seoDiv=document.createElement('div');seoDiv.className='product-subline';seoDiv.textContent=seoDescription;productTitle.insertAdjacentElement('afterend',seoDiv)}}).catch(error=>console.log('Cannot get data:',href))}}})});</script>
<style>
.product-subline {
color: grey;
font-size: 16px;
}
</style>
#4. You can change custom text color/size here
