store/blocks/pdp/product.jsonc

@@ -87,6 +87,8 @@
   },
   "product-images": {
     "props": {
+      "thumbnailMaxHeight": 90,
+      "thumbnailsOrientation": "horizontal",
       "aspectRatio": {
         "desktop": "auto",
         "phone": "16:9"

styles/css/agenciamagma.store-theme.css

@@ -8,9 +8,9 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .html {
-  background-color: red;
+  background-color: blue;
 }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  background-color: red;
 }

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,12 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.container {
+  background-color: aqua;
+}

styles/css/vtex.store-components.css

@@ -7,6 +7,12 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.newsletter {
+.productImageTag--main {
-  background: red;
+  max-height: unset !important;
+}
+
+.productImagesThumb {
+  height: auto !important;
+  width: 90px !important;
+  margin-right: 16px !important;
 }

styles/sass/pages/product/agenciamagma.store-theme.scss

@@ -1,8 +1,7 @@
 .html {
-  background-color: red;
+  background-color: blue;
 }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  background-color: red;
 }
-

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

@@ -0,0 +1,3 @@
+.container {
+  background-color: aqua;
+}

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

@@ -1,3 +1,8 @@
-.newsletter{
+.productImageTag--main {
-    background: red;
+  max-height: unset !important;
-}
+}
+.productImagesThumb {
+  height: auto !important;
+  width: 90px !important;
+  margin-right: 16px !important;
+}