react/components/Html/styles.css

@@ -4,9 +4,35 @@
 
 
 [class*="html--add-to-cart-button"] button {
-  background-color: #000000;
+  background-color: #000000 !important;
   border: none;
   width: 526px;
   height: 49px;
   padding: 12px 64px;
 }
+
+[class*="html--product-quantity-cart-button"] {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+[class*="html--product-quantity-cart-button"] input{
+  height: 49px;
+
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+[class*="html--product-quantity-cart-button"] button{
+  height: 49px;
+  background-color: #FFFFFF;
+
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #000000;
+}

store/blocks/pdp/product.jsonc

@@ -10,6 +10,7 @@
       "product-questions-and-answers"
     ]
   },
+
   "html#breadcrumb": {
     "props": {
       "tag": "section",
@@ -18,20 +19,24 @@
     },
     "children": ["breadcrumb"]
   },
+
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },
+
   "rich-text#specifications": {
     "props": {
       "text": "##### Product Specifications"
     }
   },
+
   "flex-layout.row#description": {
     "props": {
       "marginBottom": 7
     },
     "children": ["product-description"]
   },
+
   "condition-layout.product#availability": {
     "props": {
       "conditions": [
@@ -43,6 +48,7 @@
       "Else": "flex-layout.row#product-availability"
     }
   },
+
   "flex-layout.row#product-main": {
     "props": {
       "colGap": 7,
@@ -81,6 +87,7 @@
       "rowGap": 0
     }
   },
+
   "html#product-image": {
     "props":{
       "tag": "div",
@@ -89,6 +96,7 @@
     },
     "children": ["product-images"]
   },
+
   "product-images": {
     "props": {
       "aspectRatio": "1:1",
@@ -99,6 +107,27 @@
       "thumbnailAspectRatio": "1:1"
     }
   },
+
+  "html#product-quantity": {
+    "props": {
+      "tag": "div",
+      "testId": "product-quantity",
+      "blockClass": "product-quantity"
+    },
+    "children": ["product-quantity"]
+  },
+
+  "html#product-quantity-cart-button": {
+    "props": {
+      "tag": "div",
+      "blockClass": "product-quantity-cart-button"
+    },
+    "children": [
+      "html#product-quantity",
+      "flex-layout.row#buy-button"
+    ]
+  },
+
   "flex-layout.col#right-col": {
     "props": {
       "preventVerticalStretch": true,
@@ -112,10 +141,11 @@
       "flex-layout.row#selling-price",
       "product-installments#m3",
       "html#sku-selector-m3",
-      "product-quantity",
+      "html#product-quantity-cart-button",
+      /*"html#product-quantity",*/
       "product-assembly-options",
       "product-gifts",
-      "flex-layout.row#buy-button",
+      /*"flex-layout.row#buy-button",*/
       "availability-subscriber",
       "shipping-simulator",
       "share#default"
@@ -176,6 +206,7 @@
       "flex-layout.col#right-col-availability"
     ]
   },
+
   "flex-layout.col#right-col-availability": {
     "props": {
       "preventVerticalStretch": true,
@@ -189,6 +220,7 @@
       "flex-layout.row#availability"
     ]
   },
+  
   "flex-layout.row#availability": {
     "props": {
       "blockClass": "message-availability"

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

@@ -9,6 +9,7 @@
 /* Grid breakpoints */
 .buttonText {
   font-weight: 400;
-  font-size: 18px;
-  line-height: 25px;
+  font-size: 18px !important;
+  line-height: 25px !important;
+  color: #FFFFFF !important;
 }

styles/css/vtex.product-quantity.css

@@ -0,0 +1,16 @@
+/*
+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 */
+.quantitySelectorTitle {
+  display: none;
+}
+
+.quantitySelectorContainer {
+  margin: 0;
+}

styles/sass/pages/product/vtex.add-to-cart-button.scss

@@ -1,5 +1,6 @@
 .buttonText {
   font-weight: 400;
-  font-size: 18px;
-  line-height: 25px;
+  font-size: 18px !important;
+  line-height: 25px !important;
+  color: #FFFFFF !important;
 }

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

@@ -0,0 +1,7 @@
+.quantitySelectorTitle {
+  display: none;
+}
+
+.quantitySelectorContainer {
+  margin: 0;
+}