feat(shipping-simulator): added custom placeholder component

react/components/Html/index.tsx

@@ -4,38 +4,49 @@ import { useCssHandles } from "vtex.css-handles";
 const CSS_HANDLES = ["html"] as const;
 
 type HtmlProps = {
-    children?: ReactNode,
+  children?: ReactNode;
-    /**
+  /**
-     * Qual tag Html que deseja que seja usar
+   * Qual tag Html que deseja que seja usar
-     *
+   *
-     * @default div
+   * @default div
-     */
+   */
-    tag?: keyof React.ReactHTML
+  tag?: keyof React.ReactHTML;
-    /**
+  /**
-     * Classes CSS extras que deseja adicionar.
+   * Classes CSS extras que deseja adicionar.
-     * Feito para uso de [classes do tachyons](https://tachyons.io/)
+   * Feito para uso de [classes do tachyons](https://tachyons.io/)
-     */
+   */
-    tachyonsClasses?: string
+  tachyonsClasses?: string;
-    /**
+  /**
-     * Se caso quiser usar esse componente
+   * Se caso quiser usar esse componente
-     * para adicinar um texto simples
+   * para adicinar um texto simples
-     */
+   */
-    text?: string
+  text?: string;
-    /**
+  /**
-       * Tag ID para
+   * Tag ID para
-       */
+   */
-    testId?: string
+  testId?: string;
-}
+};
-
+
-export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
+export const Html = ({
-    const { handles } = useCssHandles(CSS_HANDLES);
+  children = null,
-
+  tag = "div",
-    const props = {
+  text = "",
-      className: `${handles.html} ${classes}`,
+  tachyonsClasses: classes = "",
-      "data-testid": testId
+  testId,
-    };
+}: HtmlProps) => {
-    const Children = <>{children}{text}</>;
+  const { handles } = useCssHandles(CSS_HANDLES);
-    const Element = React.createElement(tag, props, Children);
+
-
+  const props = {
-    return <>{Element}</>;
+    className: `${handles.html} ${classes}`,
+    "data-testid": testId,
+  };
+  const Children = (
+    <>
+      {children}
+      {text}
+    </>
+  );
+  const Element = React.createElement(tag, props, Children);
+
+  return <>{Element}</>;
 };

react/components/PixCustomInstallments/_ComponentsFunctions.ts

@@ -1,3 +1,20 @@
+export const calculationPercent = (
+  percent: number | undefined,
+  value: number | undefined
+) => {
+  if (value && percent) {
+    const newPercent = percent / 100;
+
+    const discount = value * newPercent;
+
+    const newValue = value - discount;
+
+    return newValue.toFixed(2).toString().replace(".", ",");
+  }
+
+  return "";
+};
+
 export const sanatizeColor = (color: string) => {
   if (color) {
     const [first] = color.split(" ");

react/components/PixCustomInstallments/_PixCustomInstallments.tsx

@@ -3,57 +3,38 @@ import React from "react";
 import styles from "./_PixCustomInstallments.module.css";
 
 import { useProduct } from "vtex.product-context";
-import { sanatizeColor } from "./_ComponentsFunctions";
+import { calculationPercent, sanatizeColor } from "./_ComponentsFunctions";
 
 interface IPixCustomInstallmentsProps {
   label: string;
   percent: number;
+  color: string;
 }
 
 export function PixCustomInstallments({
   label = "de desconto",
   percent = 10,
+  color = "c-on-base",
 }: IPixCustomInstallmentsProps) {
   const data = useProduct();
 
-  const calculationPercent = (
-    percent: number | undefined,
-    value: number | undefined
-  ) => {
-    if (value && percent) {
-      const newPercent = percent / 100;
-
-      const discount = value * newPercent;
-
-      const newValue = value - discount;
-
-      return newValue.toFixed(2).toString().replace(".", ",");
-    }
-
-    return "";
-  };
-
-  console.log(data);
-
   return (
     <div className={`${styles["pix"]} flex`}>
       <img
         src="https://agenciamagma.vteximg.com.br/arquivos/pix-m3academy-henrquesantos-2023.svg"
         alt="Promoção de pagamento com o PIX"
       />
-      <p>
+      <div>
-        <span className={styles["pix__priceValue"]}>
+        <p className={styles["pix__priceValue"]}>
           {`R$ ${calculationPercent(
             percent,
             data?.product?.priceRange.sellingPrice.highPrice
           )}`}
-        </span>
+        </p>
-        <div
+        <p className={`${styles["pix__label"]} ${sanatizeColor(color)}`}>
-          className={`${styles["pix__label"]} ${sanatizeColor("c-on-base")}`}
-        >
           {`${percent}% ${label}`}
-        </div>
+        </p>
-      </p>
+      </div>
     </div>
   );
 }
@@ -68,5 +49,9 @@ PixCustomInstallments.schema = {
     percent: {
       type: "number",
     },
+
+    color: {
+      type: "string",
+    },
   },
 };

react/components/Placeholder/_Placeholder.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+
+interface IPlaceholderProps {
+  text: string;
+}
+
+export function Placeholder({ text = "Digite seu CEP" }: IPlaceholderProps) {
+  function waitForElm(selector: any) {
+    return new Promise((resolve) => {
+      if (document.querySelector(selector)) {
+        return resolve(document.querySelector(selector));
+      }
+
+      const observer = new MutationObserver(() => {
+        if (document.querySelector(selector)) {
+          resolve(document.querySelector(selector));
+          observer.disconnect();
+        }
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    });
+  }
+
+  async function ShippingSimulatorPlaceholder(): Promise<void> {
+    const shippingSimulatorInput = (await waitForElm(
+      ".vtex-store-components-3-x-shippingContainer .vtex-address-form-4-x-input"
+    )) as any;
+
+    if (shippingSimulatorInput !== null || shippingSimulatorInput) {
+      shippingSimulatorInput.placeholder = text;
+    }
+  }
+
+  useEffect(() => {
+    ShippingSimulatorPlaceholder();
+  }, []);
+
+  return <></>;
+}
+
+Placeholder.schema = {
+  title: "Placeholder do shipping-simulation",
+  type: "object",
+  properties: {
+    text: {
+      type: "string",
+    },
+  },
+};

react/components/Placeholder/index.ts

@@ -0,0 +1 @@
+export { Placeholder } from "./_Placeholder";

react/package.json

@@ -24,11 +24,11 @@
     "@vtex/tsconfig": "^0.4.4",
     "graphql": "^14.6.0",
     "typescript": "3.9.7",
+    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles",
+    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
     "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime",
     "vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout",
     "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text",
-    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide",
+    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide"
-    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
-    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles"
   }
 }

react/placeholder.ts

@@ -0,0 +1 @@
+export {Placeholder as default} from "./components/Placeholder"

react/tsconfig.json

@@ -8,4 +8,4 @@
     "target": "es2017"
   },
   "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
-}
+}

react/yarn-error.log

@@ -1,30 +1,30 @@
 Arguments: 
-  C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\yarn\bin\yarn.js
+  /home/usuario/.nvm/versions/node/v18.12.1/bin/node /usr/bin/yarn add @types/m3-utils
 
 PATH: 
-  C:\Program Files\Common Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Users\victo\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Program Files\Git\cmd;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\vtex\bin;C:\Program Files\MySQL\MySQL Server 8.0\bin;C:\Python27;C:\Program Files\mingw-w64\x86_64-8.1.0-posix-seh-rt_v6-rev0\mingw64\bin;C:\Program Files\Oracle\VirtualBox;C:\Users\victo\Documents\flutter\bin;C:\Program Files\Android\Android Studio\bin;C:\Users\victo\AppData\Local\Programs\Python\Python310\Scripts\;C:\Users\victo\AppData\Local\Programs\Python\Python310\;C:\Users\victo\AppData\Local\Microsoft\WindowsApps;C:\Users\victo\AppData\Local\Programs\Microsoft VS Code\bin;C:\Program Files\heroku\bin;C:\Users\victo\AppData\Local\Programs\Hyper\resources\bin
+  /home/usuario/.cache/activestate/bin:/home/usuario/.local/ActiveState/StateTool/release/bin:/home/usuario/.nvm/versions/node/v18.12.1/bin:/home/usuario/.cache/activestate/bin:/home/usuario/.local/ActiveState/StateTool/release/bin:/home/usuario/bin:/home/usuario/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
 
 Yarn version: 
-  1.22.17
+  1.22.19
 
 Node version: 
-  14.18.1
+  18.12.1
 
 Platform: 
-  win32 x64
+  linux x64
 
 Trace: 
-  Error: http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-contex@0.10.0/public/@types/vtex.product-context: Request failed "500 Internal Server Error"
+  Error: https://registry.yarnpkg.com/@types%2fm3-utils: Not found
-      at ResponseError.ExtendableBuiltin (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:696:66)
+      at params.callback [as _callback] (/usr/lib/node_modules/yarn/lib/cli.js:66145:18)
-      at new ResponseError (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:802:124)
+      at self.callback (/usr/lib/node_modules/yarn/lib/cli.js:140890:22)
-      at Request.<anonymous> (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:67099:16)
+      at Request.emit (node:events:513:28)
-      at Request.emit (events.js:400:28)
+      at Request.<anonymous> (/usr/lib/node_modules/yarn/lib/cli.js:141862:10)
-      at Request.module.exports.Request.onRequestResponse (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:141760:10)
+      at Request.emit (node:events:513:28)
-      at ClientRequest.emit (events.js:400:28)
+      at IncomingMessage.<anonymous> (/usr/lib/node_modules/yarn/lib/cli.js:141784:12)
-      at HTTPParser.parserOnIncomingClient (_http_client.js:647:27)
+      at Object.onceWrapper (node:events:627:28)
-      at HTTPParser.parserOnHeadersComplete (_http_common.js:127:17)
+      at IncomingMessage.emit (node:events:525:35)
-      at Socket.socketOnData (_http_client.js:515:22)
+      at endReadableNT (node:internal/streams/readable:1359:12)
-      at Socket.emit (events.js:400:28)
+      at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
 
 npm manifest: 
   {
@@ -34,6 +34,7 @@ npm manifest:
     "dependencies": {
       "apollo-client": "^2.6.8",
       "jquery": "^3.6.0",
+      "m3-utils": "^0.1.0",
       "react": "^16.12.0",
       "react-apollo": "^3.1.3",
       "react-dom": "^16.12.0",
@@ -53,11 +54,12 @@ npm manifest:
       "@vtex/tsconfig": "^0.4.4",
       "graphql": "^14.6.0",
       "typescript": "3.9.7",
+      "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles",
+      "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
       "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime",
       "vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout",
       "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text",
-      "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide",
+      "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide"
-      "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-contex@0.10.0/public/@types/vtex.product-context"
     }
   }
 
@@ -631,6 +633,11 @@ Lockfile:
     dependencies:
       js-tokens "^3.0.0 || ^4.0.0"
   
+  m3-utils@^0.1.0:
+    version "0.1.0"
+    resolved "https://registry.yarnpkg.com/m3-utils/-/m3-utils-0.1.0.tgz#0e0ebe1a108263ab23ce53bdee8beab5a1a0e4a8"
+    integrity sha512-N8bdQwPBeiTnOIzWKweN4rI683Lmm/xbXpfy1PqQLjqIZZcgh1eidq9Spab1RogK3DPQ9hlmvAyl4wGW6rmJmQ==
+  
   memoize-one@^6.0.0:
     version "6.0.0"
     resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
@@ -841,6 +848,14 @@ Lockfile:
     resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
     integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
   
+  "vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles":
+    version "1.0.0"
+    resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles#336b23ef3a9bcb2b809529ba736783acd405d081"
+  
+  "vtex.product-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context":
+    version "0.10.0"
+    resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context#c5e2a97b404004681ee12f4fff7e6b62157786cc"
+  
   "vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime":
     version "8.130.0"
     resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime#6958e1017c423c0906eae3500bad70d3fb353a98"

store/blocks/pdp/product-shelf.jsonc

@@ -38,7 +38,7 @@
       "itemsPerPage": {
         "desktop": 4,
         "(min-width:1025px)": 4,
-        "(min-width:768px)": 3,
+        "(min-width:769px)": 3,
         "tablet": 2,
         "phone": 2
       },
@@ -85,7 +85,7 @@
         "(min-width: 1921px)": "434.4px",
         "desktop": "314.4px",
         "(min-width:1025px)": "314.4px",
-        "(min-width:768px)": "291.2px",
+        "(min-width:769px)": "291.2px",
         "tablet": "291.2px",
         "phone": "124.8px"
       },
@@ -93,7 +93,7 @@
         "(min-width: 1921px)": "434.4px",
         "desktop": "314.4px",
         "(min-width:1025px)": "314.4px",
-        "(min-width:768px)": "291.2px",
+        "(min-width:769px)": "291.2px",
         "tablet": "291.2px",
         "phone": "124.8px"
       }

store/blocks/pdp/product-specifications-table.jsonc

@@ -162,7 +162,8 @@
   "product-images#product-specification": {
     "props": {
       "aspectRatio": "1:1",
-      "displayMode": "first-image"
+      "displayMode": "first-image",
+      "zoomMode": "disabled"
     }
   },
 

store/blocks/pdp/product.jsonc

@@ -5,12 +5,19 @@
       "condition-layout.product#availability",
       "flex-layout.row#product-specifications",
       "html#pdp-slider-shelf-title",
-      "html#list-context-pdp-shelf",
+      "flex-layout.row#list-context-pdp-shelf",
       "flex-layout.row#newsletter",
       "product-questions-and-answers"
     ]
   },
 
+  "flex-layout.row#list-context-pdp-shelf": {
+    "props": {
+      "blockClass": "productShelf"
+    },
+    "children": ["html#list-context-pdp-shelf"]
+  },
+
   "html#breadcrumb": {
     "props": {
       "tag": "section",
@@ -105,7 +112,14 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": {
+        "(min-width:1921px)": "49.130434783%",
+        "(min-width:1025px)": "48.823529412%",
+        "(min-width:769px)": "100%",
+        "desktop": "48.823529412%",
+        "tablet": "100%",
+        "phone": "100%"
+      },
       "rowGap": 0
     }
   },
@@ -145,7 +159,16 @@
     "props": {
       "testId": "shipping-simulator"
     },
-    "children": ["shipping-simulator"]
+    "children": [
+      "shipping-placeholder",
+      "shipping-simulator#pdp-shipping-simulator"
+    ]
+  },
+
+  "shipping-simulator#pdp-shipping-simulator": {
+    "props": {
+      "placeholder": "OKOKOKOKO"
+    }
   },
 
   "flex-layout.row#pix-custom-installments": {

store/interfaces.json

@@ -5,9 +5,10 @@
   },
 
   "pix-custom-installments": {
-    "component": "PixCustomInstallments",
+    "component": "PixCustomInstallments"
-    "props": {
+  },
-      "text": "10 % de desconto"
+
-    }
+  "shipping-placeholder": {
+    "component": "placeholder"
   }
 }

styles/css/vtex.breadcrumb.css

@@ -9,8 +9,9 @@
 /* Grid breakpoints */
 .container {
   width: 100%;
-  display: flex;
+  display: inline-flex;
   padding: 0 40px;
+  margin-top: 16px;
   flex-wrap: wrap;
   flex-basis: 100%;
   align-items: baseline;
@@ -43,10 +44,6 @@
 }
 
 .arrow--1 .link {
-  font-size: 0;
-}
-.arrow--1 .link::before {
-  content: "Sapatos";
   font-size: 14px;
   line-height: 20.12px;
 }

styles/css/vtex.flex-layout.css

@@ -108,6 +108,13 @@
 .flexRow--productMain {
   padding: 0 40px;
 }
+@media screen and (min-width: 1921px) {
+  .flexRow--productAvailability,
+  .flexRow--productMain {
+    width: 75%;
+    margin: 0 auto;
+  }
+}
 
 @media screen and (max-width: 1024px) {
   .flexRowContent--productSpecificationItemContainer,
@@ -148,6 +155,8 @@
 .flexRowContent--productActions :global(.vtex-button) {
   height: 72px;
   line-height: 24.51px;
+  border: 0;
+  border-radius: 0;
 }
 @media screen and (min-width: 768px) {
   .flexRowContent--productActions :global(.vtex-button) {
@@ -169,6 +178,12 @@
 .flexRow--productSpecifications {
   padding: 0 40px;
 }
+@media screen and (min-width: 1921px) {
+  .flexRow--productSpecifications {
+    width: 75%;
+    margin: 0 auto;
+  }
+}
 
 @media screen and (min-width: 1025px) {
   .flexRow--productSpecificationItemContainer {
@@ -185,6 +200,16 @@
   }
 }
 
+.flexRow--productShelf {
+  padding: 0 40px;
+}
+@media screen and (min-width: 1921px) {
+  .flexRow--productShelf {
+    width: 75%;
+    margin: 0 auto;
+  }
+}
+
 .flexRow--newsletter {
   background-color: #000;
   margin-top: 32px;

styles/css/vtex.slider-layout.css

@@ -41,13 +41,24 @@
 
 .sliderLayoutContainer--productShelf {
   width: 100%;
-  padding: 0 40px;
 }
-@media screen and (min-width: 1921px) {
+
-  .sliderLayoutContainer--productShelf {
+.sliderArrows--productShelf {
-    width: 68.75%;
+  width: 12.2px;
-    margin: 0 auto;
+  height: 29.6px;
-  }
+  padding: 0;
+  margin: 0;
+}
+.sliderArrows--productShelf .caretIcon {
+  display: none;
+}
+
+.sliderLeftArrow--productShelf {
+  background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-henriquesantos.svg) !important;
+}
+
+.sliderRightArrow--productShelf {
+  background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-henriquesantos.svg) !important;
 }
 
 .sliderTrackContainer--productShelf {

styles/css/vtex.store-components.css

@@ -11,10 +11,30 @@
 .container {
   padding: 0;
 }
+@media screen and (min-width: 1025px) {
+  .container {
+    min-width: 100%;
+  }
+}
 
 .productImageTag {
   object-fit: fill !important;
 }
+@media screen and (min-width: 769px) {
+  .productImageTag {
+    max-height: 944px !important;
+  }
+}
+@media screen and (min-width: 1025px) {
+  .productImageTag {
+    max-height: 664px !important;
+  }
+}
+@media screen and (min-width: 1921px) {
+  .productImageTag {
+    max-height: 904px !important;
+  }
+}
 
 .carouselGaleryThumbs {
   display: block !important;
@@ -34,6 +54,7 @@
 }
 
 .productNameContainer {
+  color: #575757;
   line-height: 34px;
 }
 @media screen and (max-width: 768px) and (min-width: 375px) {
@@ -67,14 +88,14 @@
   height: 0;
 }
 .skuSelectorSubcontainer--cor .skuSelectorName::before {
-  content: "Outros Cores";
+  content: "Outros Cores:";
 }
 
 .skuSelectorSubcontainer--tamanho {
   order: 0;
 }
 .skuSelectorSubcontainer--tamanho .skuSelectorName::before {
-  content: "Outros Tamanhos";
+  content: "Outros Tamanhos:";
 }
 
 .skuSelectorOptionsList,
@@ -176,9 +197,9 @@
   .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
     text-align: unset;
     position: absolute;
-    right: -50.7%;
+    right: -56.65%;
     top: 70%;
-    margin-left: 16px;
+    margin-left: 32px;
     padding: 0;
     transform: translateY(-50%);
   }
@@ -217,6 +238,9 @@
   border: 0;
   margin: 0;
   padding: 16px 0 0;
+  max-width: 326px;
+  width: 326px;
+  overflow: auto;
 }
 
 .shippingTableHead {
@@ -284,6 +308,8 @@
   height: 100%;
   background-color: #000;
   color: #fff;
+  border: 0;
+  border-radius: 0;
 }
 .subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label) {
   font-size: 0;

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -1,7 +1,8 @@
 .container {
   width: 100%;
-  display: flex;
+  display: inline-flex;
   padding: 0 40px;
+  margin-top: 16px;
   flex-wrap: wrap;
   flex-basis: 100%;
   align-items: baseline;
@@ -37,13 +38,8 @@
 
 .arrow--1 {
   .link {
-    font-size: 0;
+    font-size: 14px;
-
+    line-height: 20.12px;
-    &::before {
-      content: "Sapatos";
-      font-size: 14px;
-      line-height: 20.12px;
-    }
   }
 }
 

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

@@ -100,6 +100,11 @@
 .flexRow--productAvailability,
 .flexRow--productMain {
   padding: 0 40px;
+
+  @media screen and (min-width: 1921px) {
+    width: 75%;
+    margin: 0 auto;
+  }
 }
 
 .flexRowContent--productSpecificationItemContainer,
@@ -142,6 +147,8 @@
   :global(.vtex-button) {
     height: 72px;
     line-height: 24.51px;
+    border: 0;
+    border-radius: 0;
 
     @media screen and (min-width: 768px) {
       height: 49px;
@@ -165,6 +172,11 @@
 
 .flexRow--productSpecifications {
   padding: 0 40px;
+
+  @media screen and (min-width: 1921px) {
+    width: 75%;
+    margin: 0 auto;
+  }
 }
 
 .flexRow--productSpecificationItemContainer {
@@ -181,6 +193,15 @@
   }
 }
 
+.flexRow--productShelf {
+  padding: 0 40px;
+
+  @media screen and (min-width: 1921px) {
+    width: 75%;
+    margin: 0 auto;
+  }
+}
+
 .flexRow--newsletter {
   background-color: #000;
   margin-top: 32px;

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

@@ -32,14 +32,27 @@
 
 .sliderLayoutContainer--productShelf {
   width: 100%;
-  padding: 0 40px;
+}
 
-  @media screen and (min-width: 1921px) {
+.sliderArrows--productShelf {
-    width: 68.75%;
+  width: 12.2px;
-    margin: 0 auto;
+  height: 29.6px;
+  padding: 0;
+  margin: 0;
+
+  .caretIcon {
+    display: none;
   }
 }
 
+.sliderLeftArrow--productShelf {
+  background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-henriquesantos.svg) !important;
+}
+
+.sliderRightArrow--productShelf {
+  background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-henriquesantos.svg) !important;
+}
+
 .sliderTrackContainer--productShelf {
   padding-bottom: 33px;
 

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

@@ -1,9 +1,25 @@
 .container {
   padding: 0;
+
+  @media screen and (min-width: 1025px) {
+    min-width: 100%;
+  }
 }
 
 .productImageTag {
   object-fit: fill !important;
+
+  @media screen and (min-width: 769px) {
+    max-height: 944px !important;
+  }
+
+  @media screen and (min-width: 1025px) {
+    max-height: 664px !important;
+  }
+
+  @media screen and (min-width: 1921px) {
+    max-height: 904px !important;
+  }
 }
 
 .carouselGaleryThumbs {
@@ -26,6 +42,7 @@
 }
 
 .productNameContainer {
+  color: #575757;
   line-height: 34px;
 
   @media screen and (max-width: 768px) and (min-width: 375px) {
@@ -62,7 +79,7 @@
 
   .skuSelectorName {
     &::before {
-      content: "Outros Cores";
+      content: "Outros Cores:";
     }
   }
 }
@@ -72,7 +89,7 @@
 
   .skuSelectorName {
     &::before {
-      content: "Outros Tamanhos";
+      content: "Outros Tamanhos:";
     }
   }
 }
@@ -188,9 +205,9 @@
       text-align: unset;
 
       position: absolute;
-      right: -50.7%;
+      right: -56.65%;
       top: 70%;
-      margin-left: 16px;
+      margin-left: 32px;
       padding: 0;
       transform: translateY(-50%);
     }
@@ -235,6 +252,9 @@
   border: 0;
   margin: 0;
   padding: 16px 0 0;
+  max-width: 326px;
+  width: 326px;
+  overflow: auto;
 }
 
 .shippingTableHead {
@@ -316,6 +336,8 @@
       height: 100%;
       background-color: #000;
       color: #fff;
+      border: 0;
+      border-radius: 0;
 
       :global(.vtex-button__label) {
         font-size: 0;