diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 94d1a1a..fbdc8cd 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -60,3 +60,18 @@
line-height: 22px;
color: #000000;
}
+
+[class*="html--shipping-simulator"] button {
+ background-color: #000000;
+ border: none;
+ width: 49px;
+ height: 49px;
+}
+
+[class*="html--shipping-simulator"] a {
+ color: #000000;
+}
+
+[class*="html--shipping-simulator"] svg {
+ display: none;
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 234803a..deabf01 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -146,11 +146,20 @@
"product-assembly-options",
"product-gifts",
"availability-subscriber",
- "shipping-simulator",
+ "html#shipping-simulator",
"share#default"
]
},
+ "html#shipping-simulator": {
+ "props": {
+ "tag": "div",
+ "testId": "shipping-simulator",
+ "blockClass": "shipping-simulator"
+ },
+ "children": ["shipping-simulator"]
+ },
+
"product-installments#m3": {
"props": {
"markers": ["highlight"],
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index cfa70d8..7578c0b 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -144,4 +144,55 @@
.skuSelectorSubcontainer {
margin: 0;
+}
+
+.shippingContainer {
+ display: flex;
+ align-items: flex-end;
+ position: relative;
+}
+.shippingContainer :global(.vtex-input__label) {
+ font-size: 0;
+}
+.shippingContainer :global(.vtex-input__label)::after {
+ content: "Calcular Frete";
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ text-transform: uppercase;
+}
+.shippingContainer :global(.vtex-button__label) {
+ font-size: 0;
+}
+.shippingContainer :global(.vtex-button__label)::after {
+ content: "Ok";
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: #FFFFFF;
+ text-transform: uppercase;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+ display: flex;
+ align-items: center;
+ padding: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ text-decoration-line: underline;
+ padding: 0;
+ position: absolute;
+ top: 43px;
+ left: 312px;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+ height: 49px;
+ width: 231px;
+}
+.shippingContainer :global(.vtex-input__error) {
+ position: absolute;
+ margin: 2px;
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index bfafd18..19abef6 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -141,3 +141,64 @@
.skuSelectorSubcontainer {
margin: 0;
}
+
+.shippingContainer {
+ display: flex;
+ align-items: flex-end;
+
+ position: relative;
+
+ :global(.vtex-input__label) {
+ font-size: 0;
+
+ &::after {
+ content: "Calcular Frete";
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ text-transform: uppercase;
+ }
+ }
+
+ :global(.vtex-button__label) {
+ font-size: 0;
+
+ &::after {
+ content: "Ok";
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: #FFFFFF;
+ text-transform: uppercase;
+ }
+ }
+
+ :global(.vtex-address-form__postalCode) {
+ display: flex;
+ align-items: center;
+ padding: 0;
+ }
+
+ :global(.vtex-address-form__postalCode-forgottenURL) {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ text-decoration-line: underline;
+ padding: 0;
+
+ position: absolute;
+ top: 43px;
+ left: 312px;
+ }
+
+ :global(.vtex-input-prefix__group ) {
+ height: 49px;
+ width: 231px;
+ }
+
+ :global(.vtex-input__error) {
+ position: absolute;
+ margin: 2px;
+ }
+}