.vscode/settings.json

@@ -164,5 +164,14 @@
         }
       }
     }
-  ]
+  ],
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": false
+  },
+  "explorerExclude.backup": {}
 }

react/PaymentPix.tsx

@@ -0,0 +1,3 @@
+import { PaymentPix } from "./components/PaymentPix/PaymentPix";
+
+export default PaymentPix;

react/ProductDescription.tsx

@@ -1,3 +0,0 @@
-import { ProductDescription } from "./components/ProductDescription/ProductDescription";
-
-export default ProductDescription;

react/components/PaymentPix/PaymentPix.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+
+import styles from "./styles.css";
+
+const PaymentPix = () => {
+  const product = useProduct();
+  const pricePix = (
+    (product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9
+  ).toFixed(2);
+
+  const imagePix =
+    "https://agenciamagma.vtexassets.com/arquivos/imgPix-savio-carvalho.png";
+
+  const convertPrice = pricePix.toString().replace(".", ",");
+
+  return (
+    <div className={styles.paymentPixWrapper}>
+      <img
+        className={styles.paymentPixImg}
+        src={imagePix}
+        alt="Imagem do Pix"
+      />
+      <div className={styles.paymentPixText}>
+        <p className={styles.paymentPixValue}>R$ {convertPrice}</p>
+        <p className={styles.paymentPixDiscount}>10% de desconto</p>
+      </div>
+    </div>
+  );
+};
+
+export { PaymentPix };

react/components/PaymentPix/styles.css

@@ -0,0 +1,38 @@
+.paymentPixWrapper {
+  display: flex;
+  flex-direction: row;
+  margin-top: 8px;
+  margin-bottom: 16px;
+  height: 39px;
+  gap: 26px;
+  align-items: center;
+}
+.paymentPixImg {
+  display: flex;
+  width: 66px;
+  height: 24px;
+  align-items: center;
+}
+.paymentPixText {
+  display: flex;
+  flex-direction: column;
+}
+.paymentPixValue {
+  margin: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 25px;
+
+  color: rgba(0, 0, 0, 0.58);
+}
+.paymentPixDiscount {
+  margin: 0;
+  color: #929292;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 13px;
+  line-height: 18px;
+}

react/components/ProductDescription/ProductDescription.tsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-const ProductDescription = () => {
-  return <div>Oaswq</div>;
-};
-
-export { ProductDescription };

store/blocks/pdp/product.jsonc

@@ -6,6 +6,8 @@
       "flex-layout.row#description",
       "flex-layout.row#specifications-title",
       "tab-layout#product",
+      "list-context.product-list#shelf",
+      "newsletter",
       "product-questions-and-answers"
     ]
   },
@@ -77,7 +79,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "50%",
       "rowGap": 0
     }
   },
@@ -86,12 +88,15 @@
   },
   "product-images": {
     "props": {
+      "thumbnailsOrientation": "horizontal",
+
       "aspectRatio": {
         "desktop": "auto",
-        "phone": "16:9"
+        "phone": "auto"
       },
-      "displayThumbnailsArrows": false,
+
-      "displayMode": "list"
+      "showPaginationDots": false,
+      "showNavigationArrows": false
     }
   },
   "product-images#descricao": {
@@ -111,22 +116,27 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      "product-separator",
+      "product-paymentPix-component",
-      "product-identifier.product",
       "sku-selector",
-      "product-quantity",
+
+      "flex-layout.row#cart",
       "product-assembly-options",
       "product-gifts",
-      "flex-layout.row#buy-button",
+
       "availability-subscriber",
       "shipping-simulator"
     ]
   },
-
+  "flex-layout.row#cart": {
+    "props": {
+      "blockClass": "cart"
+    },
+    "children": ["product-quantity", "flex-layout.row#buy-button"]
+  },
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3
@@ -143,9 +153,10 @@
 
   "flex-layout.row#buy-button": {
     "props": {
-      "marginTop": 4,
+      "width": "80%",
-      "marginBottom": 7
+      "blockClass": "buyButton"
     },
+
     "children": ["add-to-cart-button"]
   },
 
@@ -218,5 +229,25 @@
     "props": {
       "tabId": "product2"
     }
+  },
+  "list-context.product-list#shelf": {
+    "blocks": ["product-summary.shelf#shelf"],
+    "children": ["slider-layout#shelf-products"]
+  },
+  "product-summary.shelf#shelf": {
+    "children": ["product-summary-image#shelf", "product-summary-price"]
+  },
+  "slider-layout#shelf-products": {
+    "props": {
+      "itemsPerPage": {
+        "desktop": 4,
+        "tablet": 1,
+        "phone": 1
+      },
+      "infinite": true,
+      "showNavigationArrows": "desktopOnly",
+      "blockClass": "carousel"
+    },
+    "children": []
   }
 }

store/blocks/product-summary/product-summary-list.jsonc

@@ -9,14 +9,10 @@
     ]
   },
   "responsive-layout.desktop#productSummaryList": {
-    "children": [
+    "children": ["flex-layout.row#summaryListDesktop"]
-      "flex-layout.row#summaryListDesktop"
-    ]
   },
   "responsive-layout.mobile#productSummaryList": {
-    "children": [
+    "children": ["flex-layout.row#summaryListMobile"]
-      "flex-layout.row#summaryListMobile"
-    ]
   },
   "product-price-savings#summaryPercentage": {
     "props": {
@@ -36,7 +32,7 @@
     ]
   },
   "flex-layout.row#summaryListDesktop": {
-    "props":{
+    "props": {
       "fullWidth": true,
       "colSizing": "auto",
       "blockClass": "summaryListDesktop"
@@ -69,9 +65,7 @@
     ]
   },
   "flex-layout.row#productSpecifications": {
-    "children": [
+    "children": ["product-specification-group#summary"]
-      "product-specification-group#summary"
-    ]
   },
   "product-summary-name#summaryListDesktop": {
     "props": {
@@ -100,18 +94,13 @@
       "colSizing": "auto",
       "colGap": 5
     },
-    "children": [
+    "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"]
-      "add-to-cart-button",
-      "flex-layout.row#buyNowButton"
-    ]
   },
   "flex-layout.row#buyNowButton": {
     "props": {
       "blockClass": "buyNowButton"
     },
-    "children": [
+    "children": ["add-to-cart-button#buyNow"]
-      "add-to-cart-button#buyNow"
-    ]
   },
 
   "add-to-cart-button#buyNow": {
@@ -123,10 +112,7 @@
     }
   },
   "flex-layout.col#priceSummaryListDesktop": {
-    "children": [
+    "children": ["product-selling-price#summary", "product-list-price#summary"]
-      "product-selling-price#summary",
-      "product-list-price#summary"
-    ]
   },
   "stack-layout#summaryListDesktop": {
     "children": [
@@ -144,7 +130,7 @@
     }
   },
   "flex-layout.row#summaryListMobile": {
-    "props":{
+    "props": {
       "preserveLayoutOnMobile": true,
       "colSizing": "auto",
       "blockClass": "summaryListMobile",

store/blocks/product-summary/product-summary.jsonc

@@ -81,9 +81,7 @@
   },
   "product-price-savings#summary": {
     "props": {
-      "markers": [
+      "markers": ["discount"],
-        "discount"
-      ],
       "blockClass": "summary"
     }
   }

store/interfaces.json

@@ -6,7 +6,7 @@
     "component": "html",
     "composition": "children"
   },
-  "product-description-component": {
+  "product-paymentPix-component": {
-    "component": "ProductDescription"
+    "component": "PaymentPix"
   }
 }

styles/css/agenciamagma.store-theme.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .html {
   background-color: red;

styles/css/vtex.add-to-cart-button.css

@@ -0,0 +1,10 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */

styles/css/vtex.address-form.css

@@ -0,0 +1,13 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
+.input::placeholder {
+  content: "Digite seu CEP";
+}

styles/css/vtex.breadcrumb.css

@@ -6,6 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .homeIcon {
   display: none;

styles/css/vtex.flex-layout.css

@@ -1,98 +1,32 @@
-.flexRowContent--menu-link,
+@charset "UTF-8";
-.flexRowContent--main-header {
+/*
-  padding: 0 0.5rem;
+0 - 600PX: Phone
-}
+600 - 900px: Table portrait
-
+900 - 1200px: Tablet landscape
-@media screen and (min-width: 40em) {
+[1200 - 1800] is where our nortal styles apply
-  .flexRowContent--menu-link,
+1800px + : Big desktop
-  .flexRowContent--main-header {
+*/
-    padding: 0 1rem;
+/* Media Query M3 */
-  }
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
-}
+/* Grid breakpoints */
-
+.flexRowContent--cart {
-@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%;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 25px;
 }
-
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button) {
-.flexColChild--quickviewDetails:first-child {
+  background-color: black;
-  overflow-y: auto;
-  height: 66% !important;
-  overflow-x: hidden;
 }
-
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label) {
-.flexColChild--quickviewDetails:last-child {
+  font-size: 0;
-  height: 34% !important;
 }
-
+.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label)::after {
-.flexRow--addToCartRow {
+  content: "adicionar à sacola";
-  padding-bottom: 1rem;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #ffffff;
 }

styles/css/vtex.product-identifier.css

@@ -1,3 +1,32 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
 .product-identifier--productReference {
-  margin-bottom: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.product-identifier__label {
+  display: none;
+}
+
+.product-identifier__separator {
+  display: none;
+}
+
+.product-identifier__value {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(146, 146, 146, 0.48);
 }

styles/css/vtex.product-quantity.css

@@ -0,0 +1,30 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
+.quantitySelectorTitle {
+  display: none;
+}
+
+.quantitySelectorStepper {
+  background-color: white;
+}
+
+:global(.vtex-numeric-stepper__input) {
+  border-right: none;
+  border-left: none;
+}
+
+:global(.vtex-numeric-stepper__minus-button) {
+  background-color: white;
+}
+
+.quantitySelectorStepper {
+  border: none;
+}

styles/css/vtex.rich-text.css

@@ -6,4 +6,5 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */

styles/css/vtex.store-components.css

@@ -6,4 +6,155 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
+.container {
+  max-width: 100%;
+  margin: 0 0 0 0 !important;
+}
+
+.productImageTag {
+  max-height: none !important;
+}
+
+.thumbImg {
+  width: 86%;
+  margin: 0;
+}
+
+.productImagesThumb {
+  height: auto !important;
+}
+
+.productBrand {
+  display: flex;
+  justify-content: flex-end;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+}
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue {
+  margin-right: 5px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
+  content: "OUTRAS CORES";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
+  border-radius: 30px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
+  border-radius: 21px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  text-transform: uppercase;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
+  content: "OUTROS TAMANHOS:";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
+  width: 40px;
+  height: 40px;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-radius: 30px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
+  width: 40px;
+  height: 40px;
+  border-radius: 30px;
+  padding: 0;
+  margin: auto;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
+  padding: 0;
+  margin: auto;
+}
+
+.shippingContainer :global(.vtex-button) {
+  width: 49px;
+  height: 49px;
+  background-color: black;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
+  content: "Ok";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: #ffffff;
+}
+
+.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after {
+  content: "CALCULAR FRETE:";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+.shippingContainer {
+  display: flex;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+  height: 49px;
+}
+.shippingContainer :global(.vtex-button) {
+  position: relative;
+  right: 127px;
+  top: 27px;
+  width: 49px;
+  height: 49px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  position: relative;
+  left: 70px;
+  top: 8px;
+}

styles/sass/pages/product/vtex.address-form.scss

@@ -0,0 +1,5 @@
+.input {
+  &::placeholder {
+    content: "Digite seu CEP";
+  }
+}

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

@@ -0,0 +1,23 @@
+.flexRowContent--cart {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 25px;
+  .flexRow--buyButton {
+    :global(.vtex-button) {
+      background-color: black;
+    }
+    :global(.vtex-button__label) {
+      font-size: 0;
+      &::after {
+        content: "adicionar à sacola";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        color: #ffffff;
+      }
+    }
+  }
+}

styles/sass/pages/product/vtex.product-identifier.scss

@@ -0,0 +1,19 @@
+.product-identifier--productReference {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+.product-identifier__label {
+  display: none;
+}
+.product-identifier__separator {
+  display: none;
+}
+.product-identifier__value {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(146, 146, 146, 0.48);
+}

styles/sass/pages/product/vtex.product-quantity.scss

@@ -0,0 +1,20 @@
+.quantitySelectorTitle {
+  display: none;
+}
+
+.quantitySelectorStepper {
+  background-color: white;
+}
+
+:global(.vtex-numeric-stepper__input) {
+  border-right: none;
+  border-left: none;
+}
+
+:global(.vtex-numeric-stepper__minus-button) {
+  background-color: white;
+}
+
+.quantitySelectorStepper {
+  border: none;
+}

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

@@ -0,0 +1,161 @@
+.container {
+  max-width: 100%;
+  margin: 0 0 0 0 !important;
+}
+
+.productImageTag {
+  max-height: none !important;
+}
+
+.thumbImg {
+  width: 86%;
+  margin: 0;
+}
+
+.productImagesThumb {
+  height: auto !important;
+}
+.productBrand {
+  display: flex;
+  justify-content: flex-end;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+}
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+  .valueWrapper .skuSelectorItemTextValue {
+    margin-right: 5px;
+  }
+
+  .skuSelectorSubcontainer--cor {
+    .skuSelectorName {
+      font-size: 0;
+      &::after {
+        content: "OUTRAS CORES";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #929292;
+      }
+    }
+    .frameAround {
+      border-radius: 30px;
+    }
+    .skuSelectorItemImageValue,
+    .skuSelectorInternalBox {
+      border-radius: 21px;
+    }
+    .skuSelectorSelectorImageValue {
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #929292;
+      text-transform: uppercase;
+    }
+  }
+  .skuSelectorSubcontainer--tamanho {
+    .skuSelectorName {
+      font-size: 0;
+      &::after {
+        content: "OUTROS TAMANHOS:";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #929292;
+      }
+    }
+    .frameAround {
+      width: 40px;
+      height: 40px;
+      top: 0;
+      left: 0;
+      right: 0;
+      border-radius: 30px;
+    }
+
+    .skuSelectorInternalBox {
+      width: 40px;
+      height: 40px;
+      border-radius: 30px;
+      padding: 0;
+      margin: auto;
+    }
+    .skuSelectorItemTextValue {
+      padding: 0;
+      margin: auto;
+    }
+  }
+}
+
+.shippingContainer {
+  :global(.vtex-button) {
+    width: 49px;
+    height: 49px;
+    background-color: black;
+    :global(.vtex-button__label) {
+      font-size: 0;
+      &::after {
+        content: "Ok";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 19px;
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+.shippingContainer {
+  :global(.vtex-input) {
+    :global(.vtex-input__label) {
+      font-size: 0;
+      &::after {
+        content: "CALCULAR FRETE:";
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: #929292;
+      }
+    }
+  }
+}
+.shippingContainer {
+  display: flex;
+  :global(.vtex-input-prefix__group) {
+    height: 49px;
+  }
+
+  :global(.vtex-button) {
+    position: relative;
+    right: 127px;
+    top: 27px;
+    width: 49px;
+    height: 49px;
+  }
+  :global(.vtex-address-form__postalCode) {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+  :global(.vtex-address-form__postalCode-forgottenURL) {
+    position: relative;
+    left: 70px;
+    top: 8px;
+  }
+}

styles/sass/utils/_vars.scss

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+
 $color-black: #292929;
 
 $color-white: #fff;
@@ -19,7 +21,7 @@ $grid-breakpoints: (
   sm: 576px,
   md: 768px,
   lg: 992px,
-	xl: 1200px
+  xl: 1200px,
 ) !default;
 
 $z-index: (
@@ -27,5 +29,5 @@ $z-index: (
   level2: 10,
   level3: 15,
   level4: 20,
-	level5: 25
+  level5: 25,
 ) !default;