diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 0131dd6..3f4a754 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -25,6 +25,24 @@
padding: 0 40px;
}
-[class*="html--descriptionText"] {
- width: 100%;
+@media (max-width: 1024px) {
+ [class*="html--buy-button"] {
+ margin-bottom: 16px;
+ }
+
+ [class*="html--descriptionText"] {
+ width: 100%;
+ }
+}
+
+@media (max-width: 463px) {
+ [class*="html--buy-button"] {
+ flex-direction: column;
+ gap: 0;
+ }
+
+ [class*="html--buy-button"] :global(.vtex-button) {
+ height: 74px;
+ padding: 0 64px;
+ }
}
diff --git a/store/blocks/pdp/product-description.jsonc b/store/blocks/pdp/product-description.jsonc
index ee7f091..320ddf3 100644
--- a/store/blocks/pdp/product-description.jsonc
+++ b/store/blocks/pdp/product-description.jsonc
@@ -112,5 +112,10 @@
"displayMode": "first-image",
"zoomMode": "disabled"
}
+ },
+ "product-description": {
+ "props": {
+ "collapseContent": false
+ }
}
}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 0d802e0..f24a6f2 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -252,11 +252,11 @@
]
},
- "product-summary-image": {
- "props": {
- "showBadge": false
- }
- },
+ // "product-summary-image": {
+ // "props": {
+ // "showBadge": false
+ // }
+ // },
"list-context.product-list#shelfProducts": {
"blocks": ["product-summary.shelf#shelfProducts"],
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index d48d387..8b17523 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -114,11 +114,29 @@
padding-bottom: 1rem;
}
+.flexRowContent {
+ gap: 32px;
+}
+
.flexRowContent--product-container {
- width: 94.973%;
+ width: 94.445%;
+}
+
+.flexRow--product-container :global(.vtex-store-components-3-x-container) {
+ display: flex;
+ justify-content: center;
+ margin: 0;
+ padding: 0;
+ max-width: 100%;
+}
+.flexRow--product-container :global(.vtex-store-components-3-x-container) .stretchChildrenWidth {
+ padding: 0;
}
@media (max-width: 1024px) {
+ .flexRow--product-container :global(.vtex-store-components-3-x-container) {
+ padding: 0 40px;
+ }
.flexRowContent--product-container {
width: 100%;
}
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index e8bf9af..093e0b5 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -9,20 +9,45 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
/* Grid breakpoints */
.imageWrapper {
- height: 314px;
display: flex;
justify-content: center;
align-items: center;
}
+.image {
+ width: 314.4px;
+ height: 314.4px;
+}
+
.brandName {
font-style: normal;
font-weight: 400;
+ font-size: 18px;
line-height: 25px;
text-align: center;
color: #000000;
}
+.nameContainer {
+ padding: 16px 0 0 0;
+}
+
.containerNormal {
max-width: 314px !important;
+}
+
+@media (max-width: 1024px) {
+ .brandName {
+ font-size: 14px;
+ }
+ .image {
+ width: 291.2px;
+ height: 291.2px;
+ }
+}
+@media (min-width: 375px) and (max-width: 768px) {
+ .image {
+ width: 124.8px;
+ height: 124.8px;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index cc09d05..815dddb 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -27,6 +27,11 @@
background: transparent;
}
+.sliderTrack--shelf {
+ display: flex;
+ gap: 16px;
+}
+
.sliderLayoutContainer--shelf {
padding-left: 40px !important;
padding-right: 40px !important;
@@ -54,4 +59,21 @@
.sliderRightArrow--shelf::before {
visibility: visible;
content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png");
+}
+
+@media (max-width: 1024px) {
+ .sliderTrack--shelf {
+ gap: 12px !important;
+ }
+}
+@media (min-width: 375px) and (max-width: 755px) {
+ .sliderLeftArrow--shelf {
+ margin-left: 0;
+ }
+ .sliderRightArrow--shelf {
+ margin-right: 0;
+ }
+ .sliderTrack--shelf {
+ gap: 8px !important;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 2d3b657..d8af38a 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -13,11 +13,6 @@
background: red;
}
-.container {
- display: flex;
- justify-content: center;
-}
-
.productBrand--quickview {
display: flex;
justify-content: end;
@@ -30,6 +25,7 @@
.carouselGaleryThumbs {
max-height: 90px;
+ width: 150%;
display: block;
}
@@ -195,6 +191,7 @@
.shippingTableRow {
position: relative;
+ width: 100%;
}
.shippingTableHeadDeliveryName {
@@ -215,7 +212,7 @@
font-size: 0;
position: absolute;
top: 5%;
- left: 342%;
+ left: 61%;
}
.shippingTableHeadDeliveryEstimate::after {
@@ -232,7 +229,7 @@
font-size: 0;
position: absolute;
top: 5%;
- left: 198%;
+ left: 36%;
}
.shippingTableHeadDeliveryPrice::after {
@@ -263,7 +260,7 @@
.shippingTableCellDeliveryEstimate {
position: absolute;
- left: 62%;
+ left: 61%;
}
.shippingTableCellDeliveryPrice {
@@ -275,6 +272,10 @@
margin: 0;
}
+.skuSelectorNameContainer {
+ margin-bottom: 0;
+}
+
:global(.vtex-address-form-4-x-input)::placeholder {
font-style: normal;
font-weight: 400;
@@ -352,6 +353,10 @@
color: #fff;
}
+.inputGroup--pageProduct {
+ display: flex;
+}
+
.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
border: none;
border-radius: 0;
@@ -363,6 +368,10 @@
padding: 0;
}
+.inputGroup--pageProduct :global(.vtex-input__error) {
+ margin-top: 8px;
+}
+
.subscriberContainer {
margin-top: 43px;
}
@@ -464,14 +473,19 @@
width: 100% !important;
}
+:global(.vtex-input__error) {
+ position: absolute;
+ margin: 0;
+}
+
@media (max-width: 1024px) {
- .container {
- padding: 0 40px;
- }
.productBrand--quickview {
justify-content: flex-start;
margin-top: 32px;
}
+ .price_sellingPrice {
+ font-size: 18px;
+ }
.container--pageProduct {
width: 96%;
}
@@ -479,4 +493,16 @@
width: 100%;
max-width: 100%;
}
+}
+@media (max-width: 492px) {
+ .shippingContainer {
+ margin-bottom: 22px;
+ }
+ .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+ left: 170px;
+ top: 95%;
+ }
+ .shippingTable {
+ margin-top: 32px;
+ }
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index cbdd8db..79d8d4e 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -106,20 +106,38 @@
padding-bottom: 1rem;
}
+.flexRowContent {
+ gap: 32px;
+}
+
.flexRowContent--product-container {
- width: 94.973%;
+ width: 94.445%;
+}
+
+.flexRow--product-container :global(.vtex-store-components-3-x-container) {
+ display: flex;
+ justify-content: center;
+ margin: 0;
+ padding: 0;
+ max-width: 100%;
+
+ .stretchChildrenWidth {
+ padding: 0;
+ }
}
@media (max-width: 1024px) {
+ .flexRow--product-container :global(.vtex-store-components-3-x-container) {
+ padding: 0 40px;
+ }
.flexRowContent--product-container {
width: 100%;
- .flexRowContent {
- flex-direction: column;
- }
-
- .stretchChildrenWidth {
- width: 100% !important;
- padding: 0;
- }
+ }
+ .flexRowContent--product-container .flexRowContent {
+ flex-direction: column;
+ }
+ .flexRowContent--product-container .stretchChildrenWidth {
+ width: 100% !important;
+ padding: 0;
}
}
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
index 8fd4851..8218452 100644
--- a/styles/sass/pages/product/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -1,18 +1,46 @@
.imageWrapper {
- height: 314px;
+ // height: 245px;
display: flex;
justify-content: center;
align-items: center;
}
+.image {
+ width: 314.4px;
+ height: 314.4px;
+}
+
.brandName {
font-style: normal;
font-weight: 400;
+ font-size: 18px;
line-height: 25px;
text-align: center;
color: $color-black;
}
+.nameContainer {
+ padding: 16px 0 0 0;
+}
+
.containerNormal {
max-width: 314px !important;
}
+
+@media (max-width: 1024px) {
+ .brandName {
+ font-size: 14px;
+ }
+
+ .image {
+ width: 291.2px;
+ height: 291.2px;
+ }
+}
+
+@media (min-width: 375px) and (max-width: 768px) {
+ .image {
+ width: 124.8px;
+ height: 124.8px;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index 9019e7c..9e3e4e1 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -17,6 +17,11 @@
background: transparent;
}
+.sliderTrack--shelf {
+ display: flex;
+ gap: 16px;
+}
+
.sliderLayoutContainer--shelf {
padding-left: 40px !important;
padding-right: 40px !important;
@@ -47,3 +52,23 @@
content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png");
}
}
+
+@media (max-width: 1024px) {
+ .sliderTrack--shelf {
+ gap: 12px !important;
+ }
+}
+
+@media (min-width: 375px) and (max-width: 755px) {
+ .sliderLeftArrow--shelf {
+ margin-left: 0;
+ }
+
+ .sliderRightArrow--shelf {
+ margin-right: 0;
+ }
+
+ .sliderTrack--shelf {
+ gap: 8px !important;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 0c2f72c..eeee669 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -2,11 +2,6 @@
background: red;
}
-.container {
- display: flex;
- justify-content: center;
-}
-
.productBrand--quickview {
display: flex;
justify-content: end;
@@ -19,6 +14,7 @@
.carouselGaleryThumbs {
max-height: 90px;
+ width: 150%;
display: block;
}
@@ -190,6 +186,7 @@
.shippingTableRow {
position: relative;
+ width: 100%;
}
.shippingTableHeadDeliveryName {
@@ -210,7 +207,7 @@
font-size: 0;
position: absolute;
top: 5%;
- left: 342%;
+ left: 61%;
}
.shippingTableHeadDeliveryEstimate::after {
@@ -227,7 +224,7 @@
font-size: 0;
position: absolute;
top: 5%;
- left: 198%;
+ left: 36%;
}
.shippingTableHeadDeliveryPrice::after {
@@ -258,7 +255,7 @@
.shippingTableCellDeliveryEstimate {
position: absolute;
- left: 62%;
+ left: 61%;
}
.shippingTableCellDeliveryPrice {
@@ -270,6 +267,10 @@
margin: 0;
}
+.skuSelectorNameContainer {
+ margin-bottom: 0;
+}
+
:global(.vtex-address-form-4-x-input)::placeholder {
font-style: normal;
font-weight: 400;
@@ -347,6 +348,10 @@
color: $color-white;
}
+.inputGroup--pageProduct {
+ display: flex;
+}
+
.inputGroup--pageProduct :global(.vtex-input-prefix__group) {
border: none;
border-radius: 0;
@@ -358,6 +363,10 @@
padding: 0;
}
+.inputGroup--pageProduct :global(.vtex-input__error) {
+ margin-top: 8px;
+}
+
.subscriberContainer {
margin-top: 43px;
@@ -476,15 +485,21 @@
width: 100% !important;
}
+:global(.vtex-input__error) {
+ position: absolute;
+ margin: 0;
+}
+
@media (max-width: 1024px) {
- .container {
- padding: 0 40px;
- }
.productBrand--quickview {
justify-content: flex-start;
margin-top: 32px;
}
+ .price_sellingPrice {
+ font-size: 18px;
+ }
+
.container--pageProduct {
width: 96%;
}
@@ -496,3 +511,17 @@
}
}
}
+
+@media (max-width: 492px) {
+ .shippingContainer {
+ margin-bottom: 22px;
+ }
+
+ .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+ left: 170px;
+ top: 95%;
+ }
+ .shippingTable {
+ margin-top: 32px;
+ }
+}