store/blocks/pdp/product.jsonc

@@ -60,7 +60,7 @@
       "blockClass": "product"
     },
     "children": [
-      "flex-layout.row#product-image",
+      "html#product-image",
       "product-bookmark",
       "product-specification-badges"
     ]
@@ -78,26 +78,32 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
       "rowGap": 0
     }
   },
-  "flex-layout.row#product-image": {
+  "html#product-image": {
+    "props":{
+      "tag": "div",
+      "testId": "product-images",
+      "blockClass": "product-image"
+    },
     "children": ["product-images"]
   },
   "product-images": {
     "props": {
-      "aspectRatio": {
+      "aspectRatio": "1:1",
-        "desktop": "auto",
+      "displayThumbnailsArrows": false,
-        "phone": "16:9"
+      "thumbnailsOrientation": "horizontal",
-      },
+      "showNavigationArrows": false,
-      "displayThumbnailsArrows": true
+      "showPaginationDots": false,
+      "thumbnailAspectRatio": "1:1"
     }
   },
   "flex-layout.col#right-col": {
     "props": {
       "preventVerticalStretch": true,
-      "rowGap": 0
+      "rowGap": 0,
+      "blockClass": "right-col"
     },
     "children": [
       "flex-layout.row#product-name",

styles/css/vtex.breadcrumb.css

@@ -9,6 +9,7 @@
 /* Grid breakpoints */
 .container {
   padding: 0 40px;
+  margin-bottom: 16px;
 }
 .container .homeIcon {
   display: none;

styles/css/vtex.flex-layout.css

@@ -1,98 +1,18 @@
-.flexRowContent--menu-link,
+/*
-.flexRowContent--main-header {
+0 - 600PX: Phone
-  padding: 0 0.5rem;
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.flexRowContent {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin: 0;
 }
 
-@media screen and (min-width: 40em) {
+.stretchChildrenWidth {
-  .flexRowContent--menu-link,
+  width: 100% !important;
-  .flexRowContent--main-header {
-    padding: 0 1rem;
-  }
-}
-
-@media screen and (min-width: 80rem) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 0.25rem;
-  }
-}
-
-.flexRowContent--menu-link {
-  background-color: #03044e;
-  color: #fff;
-}
-
-.flexRowContent--main-header {
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--main-header-mobile {
-  align-items: center;
-  padding: 0.625rem 0.5rem;
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
-  color: #ffffff;
-  font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
-  color: #727273;
-  font-size: 14px;
-}
-
-.flexRow--deals {
-  background-color: #0F3E99;
-  padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
-  align-items: center;
-}
-
-.flexRow--deals .flexCol {
-  align-items: center;
-  margin-bottom: 5px;
-  padding-top: 5px;
-}
-
-.flexCol--filterCol {
-  max-width: 500px;
-  min-width: 230px;
-}
-
-.flexCol--productCountCol {
-  align-items: flex-start;
-}
-
-.flexCol--orderByCol {
-  align-items: flex-end;
-}
-
-.flexCol--orderByMobileCol {
-  width: 42%;
-}
-
-.flexCol--filterMobileCol {
-  width: 38%;
-}
-
-.flexRow--quickviewMainRow {
-  display: flex;
-  max-height: 100%;
-}
-
-.flexColChild--quickviewDetails:first-child {
-  overflow-y: auto;
-  height: 66% !important;
-  overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
-  height: 34% !important;
-}
-
-.flexRow--addToCartRow {
-  padding-bottom: 1rem;
 }

styles/css/vtex.store-components.css

@@ -10,3 +10,57 @@
 .newsletter {
   background: red;
 }
+
+.container {
+  padding: 0 40px;
+}
+
+.thumbImg,
+.figure,
+.carouselThumbBorder {
+  width: 90px;
+  height: 90px;
+}
+
+.productImagesThumb {
+  width: 90px !important;
+  height: 90px !important;
+  margin: 0 16px 0 0;
+}
+
+.productImageTag,
+.productImageTag--main {
+  max-width: 100%;
+  max-height: 100% !important;
+  margin-bottom: 16px;
+}
+
+.carouselGaleryThumbs,
+.carouselGaleryCursor,
+.carouselContainer,
+.productImagesContainer,
+.productImagesContainer--carousel,
+.content {
+  max-width: 664px;
+  margin: 0;
+}
+@media screen and (min-width: 1920px) {
+  .carouselGaleryThumbs,
+  .carouselGaleryCursor,
+  .carouselContainer,
+  .productImagesContainer,
+  .productImagesContainer--carousel,
+  .content {
+    max-width: 904px;
+  }
+}
+@media screen and ((min-width: 1025px) and (max-width: 1200px)) {
+  .carouselGaleryThumbs,
+  .carouselGaleryCursor,
+  .carouselContainer,
+  .productImagesContainer,
+  .productImagesContainer--carousel,
+  .content {
+    max-width: 500px;
+  }
+}

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -1,5 +1,6 @@
 .container {
   padding: 0 40px;
+  margin-bottom: 16px;
 
   .homeIcon {
     display: none;

styles/sass/pages/product/vtex.flex-layout.scss

@@ -0,0 +1,9 @@
+.flexRowContent {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin: 0;
+}
+
+.stretchChildrenWidth {
+  width: 100% !important;
+}

styles/sass/pages/product/vtex.store-components.scss

@@ -1,3 +1,45 @@
 .newsletter{
     background: red;
 }
+
+.container {
+  padding: 0 40px;
+}
+
+.thumbImg,
+.figure,
+.carouselThumbBorder {
+  width: 90px;
+  height: 90px;
+}
+
+.productImagesThumb {
+  width: 90px !important;
+  height: 90px !important;
+  margin: 0 16px 0 0;
+}
+
+.productImageTag,
+.productImageTag--main {
+  max-width: 100%;
+  max-height: 100% !important;
+  margin-bottom: 16px;
+}
+
+.carouselGaleryThumbs,
+.carouselGaleryCursor,
+.carouselContainer,
+.productImagesContainer,
+.productImagesContainer--carousel,
+.content {
+  max-width: 664px;
+  margin: 0;
+
+  @media screen and (min-width: 1920px) {
+    max-width: 904px;
+  }
+
+  @media screen and ((min-width: 1025px) and (max-width: 1200px)) {
+    max-width: 500px;
+  }
+}