How to add Product Detail to Store Page

Pro Tips Other Tips
1

To add Product Detail to Store Page, like this.

image
image700×397 46.5 KB

#1. First, use this code to Custom CSS

/* Product detail on Shop Page */
.product-description-excerpt {
  padding: 10px 0;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  margin-top: 8px;
}

.product-description-excerpt p {
  margin: 0;
  white-space: pre-wrap;
}

@media (max-width: 767px) {
  .product-description-excerpt {
    font-size: 12px;
    padding: 8px 0;
  }
}

image
image539×987 59.2 KB

#2. Next, use this code to Code Injection > Footer (or Store Page Header Injection)

<script>window.addEventListener('DOMContentLoaded',async()=>{const bodyClasses=document.body.classList;if(!bodyClasses.contains('collection-type-products')||bodyClasses.contains('view-item')){return}
const fetchJSON=async(path)=>{const queryParams='?format=json'+'&'+Date.now();const response=await fetch(path+queryParams);const jsonData=await response.json();return jsonData};const productItems=document.querySelectorAll('.product-list-item');productItems.forEach(async(item)=>{const productLink=item.querySelector('.product-list-item-link');if(!productLink)return;const productUrl=productLink.getAttribute('href');if(!productUrl)return;try{const productData=await fetchJSON(productUrl);if(!productData.item||!productData.item.excerpt)return;const productMeta=item.querySelector('.product-list-item-meta');if(!productMeta)return;const existingDescription=item.querySelector('.product-description-excerpt');if(existingDescription)return;const descriptionDiv=document.createElement('div');descriptionDiv.className='product-description-excerpt';descriptionDiv.innerHTML=productData.item.excerpt;productMeta.insertAdjacentElement('afterend',descriptionDiv)}catch(error){console.log('Error loading product data:',error)}})});</script>

image
image700×432 74.3 KB