To change aspect ratio of product by category, you can do these.
#1. First, 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 collectionJsonData=await fetchJSON(window.location.pathname);if(!collectionJsonData.items)return;const collectionUrl=collectionJsonData.collection.fullUrl;for(const item of collectionJsonData.items){try{const productJsonData=await fetchJSON(item.fullUrl);if(!productJsonData.item||!productJsonData.item.categoryIds||productJsonData.item.categoryIds.length===0)continue;if(!productJsonData.nestedCategories||!productJsonData.nestedCategories.itemCategories)continue;const productItem=document.querySelector(`[href="${item.fullUrl}"]`);if(!productItem)continue;const productListItem=productItem.closest('.product-list-item');if(!productListItem)continue;productJsonData.nestedCategories.itemCategories.forEach(category=>{const categorySlug=category.shortSlug||category.displayName.toLowerCase().replace(/\s+/g,'-');productListItem.classList.add(`category-${categorySlug}`)})}catch(error){console.log('Error fetching product data:',error)}}});</script>
#2. Next, use code like this to Custom CSS to change ratio of Product Image in Store Page by category.
div.product-list-item.category-copywriting .grid-image-wrapper {
aspect-ratio: 2 / 3 !important;
}
div.product-list-item.category-trade-marketing .grid-image-wrapper {
aspect-ratio: 1 / 1 !important;
}
div.product-list-item.category-se0 .grid-image-wrapper {
aspect-ratio: 1 / 3 !important;
}
#3. Remember to change Category Name + Ratio
