feat: adiciona css da shelf

2023-02-07 11:40:28 -03:00 · 2023-02-07 11:40:28 -03:00 · fbe0abb61e
commit fbe0abb61e
parent 969ffc873e
11 changed files with 981 additions and 57 deletions
--- a/react/components/Html/style.css
+++ b/react/components/Html/style.css
@ -1,14 +1,17 @@
-[class*="html--pdp-breadcrumb"] {
-  margin-left: 40px;
-}
-
-[class*="html"] {
+[class*="html--quantityAndButton"] {
  display: flex;
  width: 100%;
  gap: 10px;
  margin-bottom: 16px;
 }

+[class*="html--prate"] {
+  display: flex;
+  flex-direction: column;
+}
+[class*="add-to-cart-button"] {
+  width: 100%;
+}
 [class*='html']>[class*='button'] {
  width: 100%;
  height: 49px;
--- a/react/parcelamentoPage.tsx
+++ b/react/parcelamentoPage.tsx
@ -21,11 +21,11 @@ const Parcelamento = () => {
  }
  console.log(product)
  return (
-    <p className={handles.handles.ParcelaWrapper}>
+    <span className={handles.handles.ParcelaWrapper}>
      {Installments.numberOfInstallments}&nbsp;x&nbsp;de&nbsp;R$&nbsp;
      {Price.numberOfInstallments?.toFixed(2).toString().replace('.', ',')} sem
      juros
-    </p>
+    </span>
  )
 }

--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@ -3,13 +3,12 @@
    "children": [
      "html#breadcrumb",
      "condition-layout.product#availability",
-      "tab-layout#desc",
+      "html#product-description",
      "flex-layout.row#specifications-title",
      // "product-specification-group#table",
-      "list-context.product-list#demo1",
+      "html#slider",
      "product-questions-and-answers",
      "newsletter"
-
    ]
  },
  "list-context.product-list#demo1": {
@ -21,6 +20,15 @@
    ]
  },
  "product-summary.shelf#demo1": {
+    "children": [
+      "html#prateleira"
+    ]
+  },
+  "html#prateleira": {
+    "props": {
+      "blockClass": "prate",
+      "testId": "vtex-product-summary"
+    },
    "children": [
      "product-summary-name",
      "product-summary-description",
@ -30,6 +38,13 @@
      "product-summary-buy-button"
    ]
  },
+  "product-summary-image": {
+    "props": {
+      "aspectRatio": {
+        "desktop": "1:1"
+      }
+    }
+  },
  "slider-layout#demo-products": {
    "props": {
      "itemsPerPage": {
@ -42,12 +57,39 @@
      "blockClass": "carousel"
    }
  },
-  "html#quantityAndButton": {
+  "html#slider": {
+    "props": {
+      "testId": "product-summary-list"
+    },
    "children": [
-      "product-quantity",
+      "list-context.product-list#demo1"
+    ]
+  },
+  "html#quantityAndButton": {
+    "props": {
+      "blockClass": "quantityAndButton"
+    },
+    "children": [
+      "html#product-quantity",
      "html#add-to-cart-button"
    ]
  },
+  "html#product-quantity": {
+    "props": {
+      "testId": "product-quantity"
+    },
+    "children": [
+      "product-quantity"
+    ]
+  },
+  "html#shipping-simulator": {
+    "props": {
+      "testId": "shipping-simulator"
+    },
+    "children": [
+      "shipping-simulator"
+    ]
+  },
  "Pix-academy": {
    "props": {
      "blockClass": "pix-wrapper"
@ -121,25 +163,33 @@
    }
  },
  "tab-content.item#desc2": {
-    "children": ["flex-layout.row#description-row"],
+    "children": [
+      "flex-layout.row#description-row"
+    ],
    "props": {
      "tabId": "desc2"
    }
  },
  "tab-content.item#desc3": {
-    "children": ["flex-layout.row#description-row"],
+    "children": [
+      "flex-layout.row#description-row"
+    ],
    "props": {
      "tabId": "desc3"
    }
  },
  "tab-content.item#desc4": {
-    "children": ["flex-layout.row#description-row"],
+    "children": [
+      "flex-layout.row#description-row"
+    ],
    "props": {
      "tabId": "desc4"
    }
  },
  "tab-content.item#desc5": {
-    "children": [],
+    "children": [
+      "flex-layout.row#description-row"
+    ],
    "props": {
      "tabId": "desc5"
    }
@ -181,6 +231,14 @@
      "product-description"
    ]
  },
+  "html#product-description": {
+    "props": {
+      "testId": "product-description"
+    },
+    "children": [
+      "tab-layout#desc"
+    ]
+  },
  "product-description": {
    "props": {
      "blockClass": "product-description-m3"
@ -230,7 +288,7 @@
      "blockClass": "product"
    },
    "children": [
-      "flex-layout.row#product-image",
+      "html#imagens",
      "product-bookmark",
      "product-specification-badges"
    ]
@ -252,6 +310,14 @@
      "rowGap": 0
    }
  },
+  "html#imagens": {
+    "props": {
+      "testId": "product-images"
+    },
+    "children": [
+      "product-images"
+    ]
+  },
  "flex-layout.row#product-image": {
    "children": [
      "product-images"
@ -275,29 +341,71 @@
      "rowGap": 0
    },
    "children": [
-      "flex-layout.row#product-name",
-      "product-identifier.product",
+      "html#product-name",
+      "html#codigo",
      "product-rating-summary",
-      "flex-layout.row#selling-price",
-      "Parcelamento",
-      "Pix-academy",
-      "sku-selector",
+      "html#selling-price",
+      "html#product-installments",
+      "html#pixacademy",
+      "html#sku-selector",
      "html#quantityAndButton",
      "product-assembly-options",
      "product-gifts",
      "availability-subscriber",
-      "shipping-simulator"
+      "html#shipping-simulator"
+    ]
+  },
+  "html#selling-price": {
+    "props": {
+      "testId": "product-price"
+    },
+    "children": [
+      "product-selling-price"
+    ]
+  },
+  "html#pixacademy": {
+    "props": {
+      "testId": "pix-price",
+      "blockClass": "pix-wrapper"
+    },
+    "children": [
+      "Pix-academy"
+    ]
+  },
+  "html#product-installments": {
+    "props": {
+      "testId": "product-installments"
+    },
+    "children": [
+      "product-installments"
+    ]
+  },
+  "html#product-name": {
+    "props": {
+      "testId": "product-name"
+    },
+    "children": [
+      "vtex.store-components:product-name"
    ]
  },
  "flex-layout.row#product-name": {
    "props": {
      "marginBottom": 3,
-      "blockClass": "product-name"
+      "blockClass": "product-name",
+      "testId": "product-name"
    },
    "children": [
      "vtex.store-components:product-name"
    ]
  },
+  "html#sku-selector": {
+    "props": {
+      "testId": "sku-selector"
+    },
+    "children": [
+      "sku-selector"
+    ]
+  },
  "sku-selector": {
    "props": {
      "variationsSpacing": 3,
@ -315,6 +423,7 @@
  },
  "html#add-to-cart-button": {
    "props": {
+      "blockClass": "add-to-cart-button",
      "testId": "add-to-cart-button"
    },
    "children": [
@ -340,12 +449,21 @@
      "blockClass": "info-availability"
    },
    "children": [
-      "flex-layout.row#product-name",
-      "product-identifier.product",
-      "sku-selector",
+      "html#product-name",
+      "html#codigo",
+      "html#sku-selector",
      "flex-layout.row#availability"
    ]
  },
+  "html#codigo": {
+    "props": {
+      "blockClass": "codigo",
+      "testId": "product-code"
+    },
+    "children": [
+      "product-identifier.product"
+    ]
+  },
  "flex-layout.row#availability": {
    "props": {
      "blockClass": "message-availability"
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@ -22,4 +22,8 @@
 .product-identifier .product-identifier__label,
 .product-identifier .product-identifier__separator {
  display: none;
+}
+
+.product-identifier__value {
+  text-align: right;
 }
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@ -1,31 +1,153 @@
+/*
+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 */
 .sliderLayoutContainer {
+  padding: 0 40px 32px;
+  margin-bottom: 32px;
+}
+.sliderLayoutContainer .sliderLeftArrow {
+  left: 36px;
+  margin: 0;
+  padding: 0;
+}
+.sliderLayoutContainer .sliderRightArrow {
+  right: 36px;
+  margin: 0;
+  padding: 0;
+}
+.sliderLayoutContainer .sliderTrackContainer {
+  margin: 0 auto;
+  width: 94%;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack {
+  gap: 16px;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) {
+  margin: 0;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) {
+  padding: 0;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
+  display: flex;
+  order: 1;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) {
+  display: none;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
+  width: 100%;
+  height: 100%;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) {
+  display: flex;
+  order: 2;
+  padding: 0;
  justify-content: center;
 }
-
-.sliderLayoutContainer--carousel {
-  background-color: #F0F0F0;
-  min-height: 450px;
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) {
+  display: flex;
+  max-width: 282.4px;
+  height: 50px;
+  align-items: center;
+  order: 4;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #000;
 }
-
-.sliderTrackContainer {
-  max-width: 100%;
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) {
+  display: flex;
+  order: 3;
+  padding: 0;
 }
-
-.paginationDotsContainer {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration-line: line-through;
+  gap: 1px;
 }
-
-.layoutContainer--shelf {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  max-width: 96rem;
-  min-height: 550px;
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  color: #bababa;
+  text-transform: lowercase;
+  text-decoration: none;
+  padding: 0;
 }
-
-.slide--shelf {
-  margin-bottom: 25px;
-  padding-left: .5rem;
-  padding-right: .5rem;
-  min-height: 550px;
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  color: #bababa;
+  text-decoration: none;
+  padding: 0;
 }
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice)::after {
+  content: "por";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  color: #bababa;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) {
+  padding: 0;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-product-summary-2-x-currencyContainer) {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  text-align: center;
+  color: #000;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
+  display: none;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-installmentsPrice) {
+  display: none;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-buyButtonContainer) {
+  display: none;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-description) {
+  display: none;
+}
+.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-SKUSelectorContainer) {
+  display: none;
+}
+.sliderLayoutContainer .paginationDotsContainer {
+  align-items: center;
+}
+.sliderLayoutContainer .paginationDotsContainer .paginationDot {
+  width: 10px;
+  height: 10px;
+  background-color: #000;
+}
+.sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive {
+  background-color: #fff;
+  width: 17px !important;
+  height: 17px !important;
+  border: 0.5px solid #000;
+}
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@ -8,6 +9,14 @@
 /* Media Query M3 */
 /* Grid breakpoints */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
+.container--product-description-m3 {
+  padding: 0 !important;
+}
+
+.container {
+  padding: 0 40px;
+}
+
 .newsletter {
  background: black;
 }
@ -76,14 +85,16 @@
  line-height: 19px;
 }

+.shippingTable {
+  display: block;
+}
+
 .carouselGaleryThumbs {
  width: 59.24%;
-  padding-left: 40px;
 }

 .productImageTag {
  width: unset !important;
-  margin-left: 40px;
 }

 .productNameContainer {
@ -154,6 +165,168 @@
  border-color: #000;
 }

+.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName,
+.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue {
+  font-size: 0;
+}
+.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::before {
+  content: "OUTRAS CORES";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+.skuSelectorSubcontainer--tamanho {
+  margin-bottom: 10px;
+}
+.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
+  margin: 0;
+}
+.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer {
+  margin-top: 21px;
+}
+.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  content: "OUTROS TAMANHOS: ";
+  color: #929292;
+}
+.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
+  margin: 0;
+  margin-left: 0;
+  column-gap: 16px;
+}
+.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+  margin: 0;
+}
+.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector {
+  border-color: #000000;
+  border-width: 2px;
+  width: 40px;
+  height: 40px;
+  border-radius: 24px;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 5;
+  margin: 0 auto;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+  border: 1px solid #989898;
+}
+.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
+  width: 30px;
+  height: 30px;
+  transform: rotate(274deg);
+  left: 4px;
+  top: 5px;
+}
+.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
+}
+.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue {
+  color: #000000;
+}
+
+.subscriberContainer .title {
+  font-size: 0;
+  margin-bottom: 0;
+}
+.subscriberContainer .title::before {
+  content: "Produto indisponível";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  color: #868686;
+}
+.subscriberContainer .subscribeLabel {
+  font-size: 0;
+}
+.subscriberContainer .subscribeLabel::before {
+  content: "Deseja saber quando estiver disponível?";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  color: #868686;
+}
+.subscriberContainer .form .content {
+  position: relative;
+  display: flex;
+  height: 40px;
+  gap: 8px;
+}
+.subscriberContainer .form .content .input {
+  margin: 0;
+}
+.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) {
+  border: 0.6px solid #989898;
+  border-radius: 0;
+}
+.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  border-radius: 0;
+}
+.subscriberContainer .form .content .submit {
+  width: 100%;
+  position: absolute;
+  bottom: calc(-100% - 27px);
+  margin: 0 !important;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button) {
+  width: 100%;
+  background: #000;
+  border: 0.6px solid #000;
+  border-radius: 0;
+  color: #fff;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) {
+  padding: 12px;
+  font-size: 0;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label)::before {
+  content: "avise-me";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-size: 18px;
+  line-height: 25px;
+  text-transform: uppercase;
+  padding: 12px;
+}
+
 .shippingContainer {
  display: flex;
  margin: 0;
@ -224,4 +397,67 @@
  display: flex;
  align-items: center;
  color: #fff;
+}
+
+.shippingTable {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+.shippingTable .shippingTableHead {
+  display: flex;
+}
+.shippingTable .shippingTableHead .shippingTableRow {
+  display: flex;
+  gap: 62px;
+  margin-bottom: 15px;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
+  order: 2;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+  font-size: 0;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
+  content: "FRETE";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 19px;
+}
+.shippingTable .shippingTableBody .shippingTableRow {
+  display: flex;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  align-items: center;
+  color: #afafaf;
+  margin-bottom: 15px;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+  order: 2;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
+  width: 108px;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
+  width: 95px;
+  margin-right: 32px;
+  padding: 0;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn {
+  display: none;
 }
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@ -11,7 +11,9 @@
  margin-bottom: 32px;
  display: flex;
  flex-direction: row;
-  column-gap: 197.5px;
+  padding-right: 40px;
+  padding-left: 40px;
+  justify-content: space-around;
 }
 .listContainer::after {
  content: "";
--- a/styles/sass/pages/product/vtex.product-identifier.scss
+++ b/styles/sass/pages/product/vtex.product-identifier.scss
@ -17,3 +17,6 @@
    display: none;
  }
 }
+.product-identifier__value{
+  text-align: right;
+}
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@ -0,0 +1,171 @@
+.sliderLayoutContainer {
+  padding: 0 40px 32px;
+  margin-bottom: 32px;
+
+  .sliderLeftArrow {
+    left: 36px;
+    margin: 0;
+    padding: 0;
+  }
+
+  .sliderRightArrow {
+    right: 36px;
+    margin: 0;
+    padding: 0;
+  }
+
+  .sliderTrackContainer {
+    margin: 0 auto;
+    width: 94%;
+
+    .sliderTrack {
+      gap: 16px;
+
+      .slide {
+        .slideChildrenContainer {
+          :global(.vtex-product-summary-2-x-container) {
+            margin: 0;
+
+            :global(.vtex-product-summary-2-x-element) {
+              padding: 0;
+              :global(.vtex-product-summary-2-x-imageContainer) {
+                display: flex;
+                order: 1;
+
+                :global(.vtex-store-components-3-x-discountContainer) {
+                  :global(.vtex-store-components-3-x-discountInsideContainer) {
+                    display: none;
+                  }
+                  :global(.vtex-product-summary-2-x-imageContainer) {
+                    :global(.vtex-product-summary-2-x-imageNormal) {
+                      width: 100%;
+                      height: 100%;
+                    }
+                  }
+                }
+              }
+              :global(.vtex-product-summary-2-x-nameContainer) {
+                display: flex;
+                order: 2;
+                padding: 0;
+                justify-content: center;
+
+                :global(.vtex-product-summary-2-x-productBrand) {
+                  display: flex;
+                  max-width: 282.4px;
+                  height: 50px;
+                  align-items: center;
+                  order: 4;
+
+                  font-family: 'Open Sans', sans-serif;
+                  font-style: normal;
+                  font-weight: 400;
+                  font-size: 18px;
+                  line-height: 25px;
+                  text-align: center;
+                  color: #000;
+                }
+              }
+              :global(.vtex-product-summary-2-x-priceContainer) {
+                display: flex;
+                order: 3;
+                padding: 0;
+
+                :global(.vtex-store-components-3-x-listPrice) {
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  text-decoration-line: line-through;
+                  gap: 1px;
+
+                  :global(.vtex-store-components-3-x-listPriceLabel) {
+                    font-family: 'Open Sans', sans-serif;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 14px;
+                    line-height: 19px;
+                    text-align: center;
+                    color: #bababa;
+                    text-transform: lowercase;
+                    text-decoration: none;
+                    padding: 0;
+                  }
+                  :global(.vtex-store-components-3-x-listPriceValue) {
+                    font-family: 'Open Sans', sans-serif;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 14px;
+                    line-height: 19px;
+                    text-align: center;
+                    color: #bababa;
+                    text-decoration: none;
+                    padding: 0;
+                  }
+                }
+                :global(.vtex-store-components-3-x-listPrice)::after {
+                  content: 'por';
+                  font-family: 'Open Sans', sans-serif;
+                  font-style: normal;
+                  font-weight: 400;
+                  font-size: 14px;
+                  line-height: 19px;
+                  text-align: center;
+                  color: #bababa;
+                }
+
+                :global(.vtex-store-components-3-x-sellingPrice) {
+                  padding: 0;
+
+                  :global(.vtex-product-summary-2-x-currencyContainer) {
+                    font-family: 'Open Sans', sans-serif;
+                    font-style: normal;
+                    font-weight: 700;
+                    font-size: 24px;
+                    line-height: 33px;
+                    text-align: center;
+                    color: #000;
+                  }
+
+                  :global(.vtex-store-components-3-x-sellingPriceLabel) {
+                    display: none;
+                  }
+                }
+
+                :global(.vtex-store-components-3-x-installmentsPrice) {
+                  display: none;
+                }
+              }
+
+              :global(.vtex-product-summary-2-x-buyButtonContainer) {
+                display: none;
+              }
+              :global(.vtex-product-summary-2-x-description) {
+                display: none;
+              }
+              :global(.vtex-product-summary-2-x-SKUSelectorContainer) {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .paginationDotsContainer {
+    align-items: center;
+    // bottom: -32px;
+
+    .paginationDot {
+      width: 10px;
+      height: 10px;
+      background-color: #000;
+    }
+
+    .paginationDot--isActive {
+      background-color: #fff;
+      width: 17px !important;
+      height: 17px !important;
+      border: 0.5px solid #000;
+    }
+  }
+}
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@ -1,5 +1,11 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap');

+.container--product-description-m3{
+  padding: 0 !important;
+}
+.container{
+  padding: 0 40px;
+}
 .newsletter{
    background: black;
    .container{
@ -73,13 +79,14 @@
      }
    }
  }
+  .shippingTable{
+    display: block;
+  }
 .carouselGaleryThumbs {
  width: 59.24%;
-  padding-left: 40px;
 }
 .productImageTag{
  width: unset !important;
-  margin-left: 40px;
 }
 .productNameContainer{
  display: flex;
@ -150,7 +157,190 @@
 .frameAround {
  border-color: #000;
 }
+.skuSelectorSubcontainer--cor {
+  .skuSelectorNameContainer {
+    .skuSelectorTextContainer {
+      .skuSelectorName,
+      .skuSelectorSelectorImageValue {
+        font-size: 0;
+      }
+      .skuSelectorName::before {
+        content: 'OUTRAS CORES';
+        font-family: 'Open Sans', sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #929292;
+      }
+    }
+  }
+}
+.skuSelectorSubcontainer--tamanho {
+  margin-bottom: 10px;
+  .skuSelectorNameContainer {
+    margin: 0;
+    .skuSelectorTextContainer {
+      margin-top: 21px;
+      .skuSelectorName {
+        font-size: 0;
+        &::after {
+          font-family: "Open Sans";
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          content: "OUTROS TAMANHOS: ";
+          color: #929292;
+        }
+      }
+    }
+    .skuSelectorOptionsList {
+      margin: 0;
+      margin-left: 0;
+      column-gap: 16px;
+      .skuSelectorItem {
+        border-radius: 100%;
+        width: 40px;
+        height: 40px;
+        margin: 0;
+        // border: 1px solid #989898;
+        .frameAround--sku-selector {
+          border-color: #000000;
+          border-width: 2px;
+          width: 40px;
+          height: 40px;
+          border-radius: 24px;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          left: 0;
+          z-index: 5;
+          margin: 0 auto;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+        }
+        .skuSelectorInternalBox {
+          border-radius: 100%;
+          width: 40px;
+          height: 40px;
+          border: 1px solid #989898;
+          .diagonalCross {
+            width: 30px;
+            height: 30px;
+            transform: rotate(274deg);
+            left: 4px;
+            top: 5px;
+          }
+          .skuSelectorItemTextValue {
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 19px;
+            color: rgba(185, 185, 185, 0.6);
+          }
+        }
+      }
+      .skuSelectorItem--selected {
+        .skuSelectorInternalBox {
+          .skuSelectorItemTextValue {
+            color: #000000;
+          }
+        }

+      }
+    }
+  }
+}
+.subscriberContainer {
+  .title {
+    font-size: 0;
+    margin-bottom: 0;
+  }
+  .title::before {
+    content: 'Produto indisponível';
+    font-family: 'Open Sans', sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 19px;
+    display: flex;
+    align-items: center;
+
+    color: #868686;
+  }
+  .subscribeLabel {
+    font-size: 0;
+  }
+  .subscribeLabel::before {
+    content: 'Deseja saber quando estiver disponível?';
+    font-family: 'Open Sans', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    display: flex;
+    align-items: center;
+
+    color: #868686;
+  }
+  .form {
+    .content {
+      position: relative;
+      display: flex;
+      height: 40px;
+      gap: 8px;
+
+      .input {
+        margin: 0;
+
+        :global(.vtex-input) {
+          :global(.vtex-input-prefix__group) {
+            border: 0.6px solid #989898;
+            border-radius: 0;
+
+            :global(.vtex-styleguide-9-x-input) {
+              border-radius: 0;
+            }
+          }
+        }
+      }
+      .submit {
+        width: 100%;
+        position: absolute;
+        bottom: calc(-100% - 27px);
+        margin: 0 !important;
+
+        :global(.vtex-button) {
+          width: 100%;
+          background: #000;
+          border: 0.6px solid #000;
+          border-radius: 0;
+          color: #fff;
+
+          :global(.vtex-button__label) {
+            padding: 12px;
+            font-size: 0;
+          }
+          :global(.vtex-button__label)::before {
+            content: 'avise-me';
+            font-family: 'Open Sans', sans-serif;
+            font-style: normal;
+            font-size: 18px;
+            line-height: 25px;
+            text-transform: uppercase;
+            padding: 12px;
+          }
+        }
+      }
+    }
+  }
+}
 .shippingContainer {
  display: flex;
  margin: 0;
@ -238,3 +428,76 @@
    }
  }
 }
+.shippingTable {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  border: none;
+
+  .shippingTableHead {
+    display: flex;
+    .shippingTableRow {
+      display: flex;
+      gap: 62px;
+      margin-bottom: 15px;
+
+      font-family: 'Open Sans', sans-serif;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #202020;
+      text-transform: uppercase;
+
+      .shippingTableHeadDeliveryEstimate {
+        order: 2;
+      }
+      .shippingTableHeadDeliveryPrice {
+        font-size: 0;
+      }
+      .shippingTableHeadDeliveryPrice::before {
+        content: 'FRETE';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 19px;
+      }
+    }
+  }
+
+  .shippingTableBody {
+    .shippingTableRow {
+      display: flex;
+
+      .shippingTableCell {
+        font-family: 'Open Sans', sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        align-items: center;
+        color: #afafaf;
+        margin-bottom: 15px;
+      }
+
+      .shippingTableCellDeliveryEstimate {
+        order: 2;
+      }
+      .shippingTableCellDeliveryPrice {
+        width: 108px;
+      }
+      .shippingTableCellDeliveryName {
+        width: 95px;
+        margin-right: 32px;
+        padding: 0;
+
+        .shippingTableLabel {
+          .shippingTableRadioBtn {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@ -2,7 +2,9 @@
  margin-bottom: 32px;
  display: flex;
  flex-direction: row;
-  column-gap: 197.5px;
+  padding-right: 40px;
+  padding-left: 40px;
+  justify-content: space-around;
  &::after{
    content: "";
    background-color: #BFBFBF;