diff --git a/assets/fonts/OpenSans-Bold.ttf b/assets/fonts/OpenSans-Bold.ttf
new file mode 100644
index 0000000..a1398b3
Binary files /dev/null and b/assets/fonts/OpenSans-Bold.ttf differ
diff --git a/assets/fonts/OpenSans-Light.ttf b/assets/fonts/OpenSans-Light.ttf
new file mode 100644
index 0000000..d9a9e27
Binary files /dev/null and b/assets/fonts/OpenSans-Light.ttf differ
diff --git a/assets/fonts/OpenSans-Regular.ttf b/assets/fonts/OpenSans-Regular.ttf
new file mode 100644
index 0000000..1dc226d
Binary files /dev/null and b/assets/fonts/OpenSans-Regular.ttf differ
diff --git a/assets/fonts/OpenSans-SemiBold.ttf b/assets/fonts/OpenSans-SemiBold.ttf
new file mode 100644
index 0000000..66acb20
Binary files /dev/null and b/assets/fonts/OpenSans-SemiBold.ttf differ
diff --git a/react/Installments.tsx b/react/Installments.tsx
new file mode 100644
index 0000000..37b09f1
--- /dev/null
+++ b/react/Installments.tsx
@@ -0,0 +1,3 @@
+import { Installments } from "./components/installments";
+
+export default Installments;
diff --git a/react/ProductReference.tsx b/react/ProductReference.tsx
new file mode 100644
index 0000000..c951523
--- /dev/null
+++ b/react/ProductReference.tsx
@@ -0,0 +1,3 @@
+import { ProductReference } from "./components/product-reference";
+
+export default ProductReference;
diff --git a/react/components/installments/index.tsx b/react/components/installments/index.tsx
new file mode 100644
index 0000000..0ee84ad
--- /dev/null
+++ b/react/components/installments/index.tsx
@@ -0,0 +1,17 @@
+import React, { FC } from 'react'
+import { useProduct } from 'vtex.product-context'
+import styles from "./styles.css";
+
+export const Installments: FC = () => {
+
+ const productContextValue = useProduct();
+ console.log(productContextValue?.product?.priceRange.sellingPrice)
+
+ let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice)/4;
+
+ return (
+
+ 4 x de R$ {sellingPrice.toFixed(2).replace(".", ",")} sem juros
+
+ );
+}
diff --git a/react/components/installments/styles.css b/react/components/installments/styles.css
new file mode 100644
index 0000000..5d7eba2
--- /dev/null
+++ b/react/components/installments/styles.css
@@ -0,0 +1,10 @@
+.sellingPrice{
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
+}
+
+.sellingPriceBold{
+ font-weight: 700;
+}
diff --git a/react/components/product-reference/index.tsx b/react/components/product-reference/index.tsx
new file mode 100644
index 0000000..220b937
--- /dev/null
+++ b/react/components/product-reference/index.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from 'react'
+import { useProduct } from 'vtex.product-context'
+import styles from "./styles.css";
+
+export const ProductReference: FC = () => {
+
+ const productContextValue = useProduct();
+ console.log(productContextValue)
+
+ return (
+
+ {productContextValue?.product?.productReference}
+
+ );
+}
diff --git a/react/components/product-reference/styles.css b/react/components/product-reference/styles.css
new file mode 100644
index 0000000..1493c49
--- /dev/null
+++ b/react/components/product-reference/styles.css
@@ -0,0 +1,12 @@
+.containerProductReference{
+ display: flex;
+ justify-content: right;
+}
+
+.productReference{
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: right;
+ color: rgba(146, 146, 146, 0.48);
+}
diff --git a/react/types/index.d.ts b/react/types/index.d.ts
new file mode 100644
index 0000000..cbe652d
--- /dev/null
+++ b/react/types/index.d.ts
@@ -0,0 +1 @@
+declare module "*.css";
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index c192455..936f99c 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -8,7 +8,10 @@
"product-specification-group#table",
"shelf.relatedProducts",
"product-questions-and-answers"
- ]
+ ],
+ "props": {
+ "paddingLeft": 7
+ }
},
"html#breadcrumb": {
"props": {
@@ -34,6 +37,7 @@
},
"condition-layout.product#availability": {
"props": {
+ "blockClass": "vtex.store-components-3",
"conditions": [
{
"subject": "isProductAvailable"
@@ -42,6 +46,7 @@
"Then": "flex-layout.row#product-main",
"Else": "flex-layout.row#product-availability"
}
+
},
"flex-layout.row#product-main": {
"props": {
@@ -50,9 +55,10 @@
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
- "paddingBottom": 7
+ "paddingBottom": 7,
+ "blockClass": "container-product-main"
},
- "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
+ "children": ["html#stack", "flex-layout.col#right-col"]
},
"stack-layout": {
@@ -75,12 +81,12 @@
}
},
- "flex-layout.col#stack": {
+ "html#stack": {
"children": ["stack-layout"],
"props": {
- "width": "46.18%",
- "rowGap": 7,
- "colGap": 7
+ "width": "100%",
+ "rowGap": 0,
+ "colGap": 0
}
},
"flex-layout.row#product-image": {
@@ -88,6 +94,7 @@
},
"product-images": {
"props": {
+ "blockClass": "product-images-pdp",
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
@@ -95,22 +102,21 @@
"showNavigationArrows": false,
"displayThumbnailsArrows": false,
"thumbnailsOrientation": "horizontal",
- "colGap": 7,
- "defaultSize": 665,
- "maxHeight": 665
+ "showPaginationDots": false,
+ "thumbnailMaxHeight": 90
}
},
"flex-layout.col#right-col": {
"props": {
"preventVerticalStretch": true,
- "rowGap": 0
+ "rowGap": 0,
+ "width": "100%"
},
"children": [
"flex-layout.row#product-name",
- "product-rating-summary",
- "flex-layout.row#list-price-savings",
+ "product-reference",
"flex-layout.row#selling-price",
- "product-installments",
+ "installments",
"product-separator",
"product-identifier.product",
"sku-selector",
@@ -124,9 +130,16 @@
]
},
+ "product-reference": {
+ "props": {
+ "blockClass": "title-product-reference"
+ }
+ },
+
"flex-layout.row#product-name": {
"props": {
- "marginBottom": 3
+ "marginBottom": 3,
+ "blockClass": "name-product-h1"
},
"children": ["vtex.store-components:product-name"]
},
@@ -154,7 +167,7 @@
"paddingTop": 7
},
"children": [
- "flex-layout.col#stack",
+ "html#stack",
"flex-layout.col#right-col-availability"
]
},
diff --git a/store/interfaces.json b/store/interfaces.json
index c4b2ac4..cf685ef 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -2,6 +2,12 @@
"example-component": {
"component": "Example"
},
+ "product-reference": {
+ "component": "ProductReference"
+ },
+ "installments": {
+ "component": "Installments"
+ },
"html": {
"component": "html",
"composition": "children"
diff --git a/styles/configs/font-face.css b/styles/configs/font-face.css
index 9a1582b..1feca3e 100644
--- a/styles/configs/font-face.css
+++ b/styles/configs/font-face.css
@@ -1,5 +1,25 @@
+
+
@font-face {
- @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
- font-family: 'Open Sans', sans-serif;
- src: url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap') format("opentype");
+ font-family: "Open Sans", sans-serif;
+ src: url('assets/fonts/OpenSans-Light.ttf');
+ font-weight: 300;
+}
+
+@font-face {
+ font-family: "Open Sans", sans-serif;
+ src: url('assets/fonts/OpenSans-Regular.ttf');
+ font-weight: 400;
+}
+
+@font-face {
+ font-family: "Open Sans", sans-serif;
+ src: url('assets/fonts/OpenSans-SemiBold.ttf');
+ font-weight: 600;
+}
+
+@font-face {
+ font-family: "Open Sans", sans-serif;
+ src: url('assets/fonts/OpenSans-Bold.ttf');
+ font-weight: 700;
}
diff --git a/styles/configs/style.json b/styles/configs/style.json
index ee3264d..9864c85 100644
--- a/styles/configs/style.json
+++ b/styles/configs/style.json
@@ -253,84 +253,84 @@
"measure": [30, 34, 20],
"styles": {
"heading-1": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, arial, sans-serif",
"fontWeight": "700",
"fontSize": "3rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-2": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, arial, sans-serif",
"fontWeight": "700",
"fontSize": "2.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-3": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, arial, sans-serif",
"fontWeight": "700",
"fontSize": "1.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-4": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.5rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-5": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-6": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"body": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"small": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "0.875rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"mini": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "0.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"action": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, arial, sans-serif",
"fontWeight": "500",
"fontSize": "1rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--small": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, arial, sans-serif",
"fontWeight": "500",
"fontSize": "0.875rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--large": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, arial, sans-serif",
"fontWeight": "500",
"fontSize": "1.25rem",
"textTransform": "uppercase",
diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css
index 51d2038..34c4328 100644
--- a/styles/css/agenciamagma.store-theme.css
+++ b/styles/css/agenciamagma.store-theme.css
@@ -6,7 +6,4 @@
1800px + : Big desktop
*/
/* Media Query M3 */
-/* Grid breakpoints */
-.html--pdp-breadcrumb {
- padding-left: 40px;
-}
\ No newline at end of file
+/* Grid breakpoints */
\ No newline at end of file
diff --git a/styles/css/vtex-store-components-3.css b/styles/css/vtex-store-components-3.css
new file mode 100644
index 0000000..3afa73c
--- /dev/null
+++ b/styles/css/vtex-store-components-3.css
@@ -0,0 +1,14 @@
+/*
+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 {
+ margin: 0;
+ padding: 0;
+ max-width: max-content;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 529d592..5ec3b43 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -7,6 +7,10 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
+:global(.vtex-breadcrumb-1-x-container) {
+ padding: 0 40px;
+}
+
.homeIcon, .caretIcon {
display: none;
}
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index a7c5732..b8a2d20 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -1,98 +1,27 @@
-.flexRowContent--menu-link,
-.flexRowContent--main-header {
- padding: 0 0.5rem;
+/*
+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 */
+.flexRow--container-product-main {
+ padding: 0 40px;
+}
+.flexRow--container-product-main .flexRowContent--container-product-main {
+ display: grid;
+ grid-template-columns: 48.824% 1fr;
+ grid-column-gap: 32px;
+}
+.flexRow--container-product-main .flexRowContent--container-product-main .stretchChildrenWidth {
+ padding-right: 0;
}
-@media screen and (min-width: 40em) {
- .flexRowContent--menu-link,
- .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;
+.swiper-wrapper .swiper-slide-active {
+ width: 100%;
}
+.swiper-wrapper .swiper-slide {
+ width: 100%;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index 95f4cfe..cc015d0 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -1,79 +1,22 @@
-.listPrice {
- color: #727273;
- margin-bottom: .25rem;
- font-size: 1rem;
-}
-
-.sellingPrice {
- color: #3f3f40;
- font-size: 1.25rem;
-}
-
-.sellingPriceValue {
- font-size: 2.25rem;
+/*
+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 */
+.currencyContainer {
font-weight: 700;
+ font-size: 25px;
+ line-height: 38px;
+ color: #000000;
}
.installments {
- color: #727273;
- margin-bottom: 1rem;
-}
-
-.savings {
- font-weight: 500;
- color: #79B03A;
-}
-
-.sellingPriceValue--summary {
- font-size: 1.25rem;
- font-weight: 600;
- color: #2E2E2E;
-}
-
-.savings--summary {
- background: #8BC34A;
- border-radius: 1000px;
- align-items: center;
- display: flex;
-
- padding-left: 0.5rem;
- padding-right: 0.5rem;
- font-size: 0.875rem;
- font-weight: 600;
- vertical-align: baseline;
- color: #FFFFFF;
-}
-
-.savings-discount--summary {
- font-size: 0.875rem;
- font-weight: 600;
- vertical-align: baseline;
- color: #FFFFFF;
- padding-left: 0.5rem;
- padding-right: 0.5rem;
-}
-
-.listPrice--summary {
- margin-bottom: 0.25rem;
- font-size: .875rem;
-}
-
-.installments--summary {
- margin-bottom: 2rem;
- font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
- background: #0f3e99;
- border-radius: 1000px;
- align-items: center;
- display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
- font-size: 0.875rem;
- font-weight: 600;
- vertical-align: baseline;
- color: #FFFFFF;
- padding: 0.25rem 0.5rem 0.25rem 0.5rem;
-}
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index f8fa6cb..c60db02 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -9,4 +9,36 @@
/* Grid breakpoints */
.newsletter {
background: red;
+}
+
+.productImage .productImageTag--main {
+ object-fit: fill !important;
+ max-height: max-content !important;
+}
+
+.carouselGaleryThumbs {
+ margin-top: 16px;
+}
+
+.productImagesThumb--product-images-pdp {
+ margin-right: 16px;
+ margin-bottom: 0;
+ width: 90px !important;
+}
+.productImagesThumb--product-images-pdp:last-child {
+ margin-right: 0;
+}
+
+.container {
+ margin: 0;
+ padding: 0;
+ max-width: none;
+}
+
+.productNameContainer {
+ text-align: right;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 34px;
+ color: #575757;
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss
index 61ddc3b..8b13789 100644
--- a/styles/sass/pages/product/agenciamagma.store-theme.scss
+++ b/styles/sass/pages/product/agenciamagma.store-theme.scss
@@ -1,10 +1 @@
-.html {
- // background-color: red;
-}
-
-.html--pdp-breadcrumb {
- padding-left: 40px;
-}
-
-
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index cd5d14f..a423a10 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -1,3 +1,7 @@
+:global(.vtex-breadcrumb-1-x-container){
+ padding: 0 40px;
+}
+
.homeIcon, .caretIcon{
display: none;
}
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
new file mode 100644
index 0000000..7e27fca
--- /dev/null
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -0,0 +1,21 @@
+.flexRow--container-product-main{
+ padding: 0 40px;
+ .flexRowContent--container-product-main {
+ display: grid;
+ grid-template-columns: 48.824% 1fr;
+ grid-column-gap: 32px;
+ .stretchChildrenWidth{
+ padding-right: 0;
+ }
+ }
+}
+
+.swiper-wrapper{
+ .swiper-slide-active{
+ width: 100%;
+ }
+
+ .swiper-slide{
+ width: 100%;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss
new file mode 100644
index 0000000..7870d4e
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-price.scss
@@ -0,0 +1,13 @@
+.currencyContainer{
+ font-weight: 700;
+ font-size: 25px;
+ line-height: 38px;
+ color: #000000;
+}
+
+.installments{
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 36d0f22..b70f851 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,3 +1,38 @@
.newsletter{
background: red;
-}
\ No newline at end of file
+}
+
+.productImage{
+ .productImageTag--main{
+ object-fit: fill !important;
+ max-height: max-content !important;
+ }
+}
+
+
+.carouselGaleryThumbs{
+ margin-top: 16px;
+}
+
+.productImagesThumb--product-images-pdp{
+ margin-right: 16px;
+ margin-bottom: 0;
+ width: 90px !important;
+ &:last-child{
+ margin-right: 0;
+ }
+}
+
+.container{
+ margin: 0;
+ padding: 0;
+ max-width: none;
+}
+
+.productNameContainer{
+ text-align: right;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 34px;
+ color: #575757;
+}