YSHOP2-609: As a seller, I should be guided on the images sizes (#355)

youcan-shop · Jun 6, 2023 · bda6528 · bda6528
1 parent 18eb2d7
commit bda6528
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 3 deletions.
diff --git a/assets/featured-collections.css b/assets/featured-collections.css
@@ -33,6 +33,7 @@
   aspect-ratio: 4/5;
   overflow: hidden;
   transition: 0.3s ease-in-out;
+  aspect-ratio: 1/1;
 }
 .yc-featured-collections .collections-list .collection-block .collection-details, .yc-featured-collections .collections-list .collection-block .collection-thumbnail img {
   transition: all 0.3s ease-in-out;
@@ -52,6 +53,7 @@
 .yc-featured-collections .collections-list .collection-block .collection-thumbnail img {
   width: 100%;
   height: 100%;
+  object-fit: cover;
 }
 .yc-featured-collections .collections-list .collection-block .collection-details {
   transition: 0.3s ease-in-out;

diff --git a/sections/featured-collections.liquid b/sections/featured-collections.liquid
@@ -82,7 +82,8 @@
         {
           "type": "category",
           "id": "category",
-          "label": "Category"
+          "label": "Category",
+          "info": "To ensure your images look great and load quickly, use a size of \"350px x 350px\" (1:1 aspect ratio)."
         }
       ]
     }

diff --git a/sections/featured-product-slider.liquid b/sections/featured-product-slider.liquid
@@ -339,7 +339,8 @@
         {
           "type": "product",
           "id": "product",
-          "label": "Product"
+          "label": "Product",
+          "info": "To ensure your images look great and load quickly, use a size of \"256px x 256px\" (1:1 aspect ratio)."
         },
         {
           "type": "text",

diff --git a/sections/featured-products.liquid b/sections/featured-products.liquid
@@ -149,7 +149,8 @@
         {
           "type": "product",
           "id": "product",
-          "label": "Product"
+          "label": "Product",
+          "info": "To ensure your images look great and load quickly, use a size of \"256px x 256px\" (1:1 aspect ratio)."
         },
         {
           "type": "text",

diff --git a/styles/featured-collections.scss b/styles/featured-collections.scss
@@ -35,6 +35,7 @@
       aspect-ratio: 4/5;
       overflow: hidden; 
       transition: 0.3s ease-in-out;
+      aspect-ratio: 1/1;
 
 
       .collection-details, .collection-thumbnail img {
@@ -60,6 +61,7 @@
         img {
           width: 100%;
           height: 100%;
+          object-fit: cover;
         }
       }