diff --git a/README.MD b/README.MD
new file mode 100644
index 00000000..13f4916f
--- /dev/null
+++ b/README.MD
@@ -0,0 +1,26 @@
+### STORE-THEME CORELABIZ ###
+
+- todas as features custom, estão atreladas a branch develop.
+Todas as branchs devem ser criadas partindo da develop.
+As demais branchs devem ser atualizadas com a develop.
+
+***- Testar atualizações.***
+Em caso de teste em todas as ramificações, testar na banch develop.
+Usar ws: https://updateDevelop--corelabiz.myvtex.com
+
+***- Vendor and name:***
+Foi gerado novas configurações para o uso.
+o vendor permanece vinculado a corebizlab.
+
+name: tratado com store-tami e version 0.0.0
+
+*** O uso da ws update reflete no teste, devido a mudança do name.***
+Sempre que usar uma nova ws, será necessário consigurar as páginas
+no /admin para corelabiz.store-tami@0.x:store.custom#nome-da-pagina
+
+Se existir alguma página com erro de carregamento, verificar no admin a configuração
+da pagina que deseja testar.
+ex: corelabiz.store-tami@0.x:store.custom#nome-da-pagina.
+
+*** VTEX LINK ***
+Para testar loja atualizada, rodar vtex link na ws: https://updateDevelop--corelabiz.myvtex.com
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index ff01a151..11b23a3d 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,12 +1,13 @@
 {
-  "vendor": "vtex",
-  "name": "store-theme",
-  "version": "5.1.0",
+  "vendor": "corelabiz",
+  "name": "store-tamii",
+  "version": "0.0.0",
   "builders": {
     "styles": "2.x",
     "store": "0.x",
     "sitemap": "0.x",
-    "docs": "0.x"
+    "docs": "0.x",
+    "react": "3.x"
   },
   "mustUpdateAt": "2018-09-05",
   "scripts": {
@@ -44,6 +45,10 @@
     "vtex.telemarketing": "2.x",
     "vtex.order-placed": "2.x",
     "vtex.checkout-summary": "0.x",
+    "vtex.checkout": "1.x",
+    "vtex.checkout-graphql": "0.x",
+    "vtex.checkout-cart": "0.x",
+    "vtex.checkout-resources": "0.x",
     "vtex.product-list": "0.x",
     "vtex.add-to-cart-button": "0.x",
     "vtex.product-bookmark-interfaces": "1.x",
@@ -62,7 +67,13 @@
     "vtex.product-specifications": "1.x",
     "vtex.tab-layout": "0.x",
     "vtex.condition-layout": "2.x",
-    "vtex.css-handles": "1.x"
+    "vtex.css-handles": "1.x",
+    "vtex.search-graphql": "0.x",
+    "vtex.format-currency": "0.x",
+    "vtex.device-detector": "0.x",
+    "vtex.product-context": "0.x",
+    "vtex.order-manager": "0.x",
+    "vtex.order-items": "0.x"
   },
   "peerDependencies": {
     "vtex.reviews-and-ratings": "3.x"
diff --git a/react/ButtonAddtoCart.jsx b/react/ButtonAddtoCart.jsx
new file mode 100644
index 00000000..2690631c
--- /dev/null
+++ b/react/ButtonAddtoCart.jsx
@@ -0,0 +1,2 @@
+import ButtonAddtoCart from "./components/ButtonAddtoCart";
+export default ButtonAddtoCart
\ No newline at end of file
diff --git a/react/ShelfCustom.jsx b/react/ShelfCustom.jsx
new file mode 100644
index 00000000..49ae2cdd
--- /dev/null
+++ b/react/ShelfCustom.jsx
@@ -0,0 +1,2 @@
+import ShelfCustom from "./components/ShelfCustom/ShelfCustom";
+export default ShelfCustom
\ No newline at end of file
diff --git a/react/components/ButtonAddtoCart/index.jsx b/react/components/ButtonAddtoCart/index.jsx
new file mode 100644
index 00000000..e2f4a847
--- /dev/null
+++ b/react/components/ButtonAddtoCart/index.jsx
@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from "react";
+
+import { Button } from "vtex.styleguide";
+import { NumericStepper } from "vtex.styleguide";
+import styles from "../../styles/components/ButtonAddtoCart/styles.css";
+
+import { useOrderItems } from "vtex.order-items/OrderItems";
+
+const ButtonAddtoCart = ({ valor }) => {
+  const [addItem, setAddItem] = useState({ isLoading2: false });
+  const [numericStepper, setNumericStepper] = useState({
+    quantityNumericStepper: 1,
+  });
+
+  const [showNumeriStepper, setShowNumericStepper] = useState(false);
+  const [showButton, setShowButton] = useState(true);
+  const [label, setLabel] = useState({ labelText: `Item` });
+
+  const [productDetailsItem, setProductDetailsItem] = useState({});
+  console.log("🚀 ~ ButtonAddtoCart ~ productDetailsItem:", productDetailsItem);
+  const selectedItemQuantity = numericStepper.quantityNumericStepper;
+
+  useEffect(() => {
+    if (showNumeriStepper === true) {
+      setAddItem({ isLoading2: false });
+      setShowButton(false);
+    }
+  }, [showNumeriStepper]);
+
+  //   controle de exibição do btn add
+  useEffect(() => {
+    if (numericStepper.quantityNumericStepper === 0) {
+      setShowButton(true);
+      setShowNumericStepper(false);
+      setNumericStepper({ quantityNumericStepper: 1 });
+    }
+  }, [numericStepper.quantityNumericStepper]);
+
+  //   modifica texto do label ao add quantidade de item > 1
+  useEffect(() => {
+    const itemsText = "Items";
+    if (numericStepper.quantityNumericStepper > 1) {
+      setLabel({ labelText: `${itemsText}` });
+    } else if (numericStepper.quantityNumericStepper <= 0) {
+      setLabel({ labelText: `Item` });
+    }
+  }, [numericStepper.quantityNumericStepper]);
+
+  // add item
+  const { addItems } = useOrderItems();
+  const skuItem = [
+    {
+      id: valor[0]?.itemId,
+      seller: "1",
+      quantity: 1,
+    },
+  ];
+  const addToCartItem = async () => {
+    try {
+      await addItems(skuItem);
+    } catch (error) {
+      console.error("erro ao add produti", error);
+    }
+  };
+
+  // remover item
+  const skuItemRemove = [
+    {
+      id: valor[0]?.itemId,
+      seller: "1",
+      quantity: -1,
+    },
+  ];
+  const removerCartItem = async () => {
+    try {
+      await addItems(skuItemRemove);
+    } catch (error) {
+      console.error("erro ao add produti", error);
+    }
+  };
+
+
+  // precisa tratar update quantity
+  const skuItemUpdate = [
+    {
+      id: valor[0]?.itemId,
+      seller: "1",
+      quantity: +1,
+    },
+  ];
+  const updateCartItems = async() => {
+    try{
+      await addItem(skuItemUpdate)
+    }catch (error) {
+      console.error("erro ao add produti", error);
+    }
+  }
+
+  return (
+    <>
+      <div className="col-xs-12 col-sm-6 col-md-8">
+        <div className={styles.content_btnAddToCart_custom}>
+          {showButton && (
+            <div className="mt4">
+              <Button
+                variation="primary"
+                onClick={() => {
+                  setAddItem({ isLoading2: !addItem.isLoading2 });
+                  setShowNumericStepper(true);
+                  setProductDetailsItem({ ...valor, selectedItemQuantity });
+                  addToCartItem();
+                }}
+                isLoading={addItem.isLoading2}
+              >
+                ADICIONAR AO CARRINHO
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+      {showNumeriStepper && (
+        <div className="mb5">
+          <div className={styles.content_btnAddToCart_custom}>
+            <NumericStepper
+              label={`${label.labelText} add ao carrinho ${numericStepper.quantityNumericStepper}`}
+              // minValue={1}
+              defaultValue={0}
+              maxValue={50}
+              lean
+              value={numericStepper.quantityNumericStepper}
+              onChange={(event) =>
+                setNumericStepper({ quantityNumericStepper: event.value })
+              }
+              onClick={numericStepper.quantityNumericStepper < 1 ? removerCartItem() : updateCartItems()}
+            />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+export default ButtonAddtoCart;
diff --git a/react/components/ShelfCustom/ShelfCustom.jsx b/react/components/ShelfCustom/ShelfCustom.jsx
new file mode 100644
index 00000000..fc532d39
--- /dev/null
+++ b/react/components/ShelfCustom/ShelfCustom.jsx
@@ -0,0 +1,230 @@
+// import ProductsDetails from "./products/index";
+import React, { useEffect, useState } from "react";
+import getProducts from "../../graphql/query/getProduct.gql";
+import { useApolloClient } from "react-apollo";
+import SliderLayout from "vtex.slider-layout/SliderLayout";
+import { FormattedCurrency } from "vtex.format-currency";
+import { useDevice } from "vtex.device-detector";
+import { Button } from "vtex.styleguide";
+
+import ButoonAddToCart from "../ButtonAddtoCart/index";
+
+import styles from "../../styles/components/ShelfCustom/styles.css";
+
+
+
+const ShelfCustom = ({ items }) => {
+  const [colectSchemaInfos, setColectSchemaInfos] = useState(items);
+  const client = useApolloClient();
+  const [productId, setProductId] = useState("");
+
+  const { device } = useDevice();
+
+  useEffect(() => {
+    setColectSchemaInfos(items);
+  }, [items]);
+
+  useEffect(() => {
+    const colection_id_schema = colectSchemaInfos?.collectionId;
+    const category_id_schema = colectSchemaInfos?.categoryId;
+
+    if (
+      (colection_id_schema && category_id_schema) ||
+      (colection_id_schema && !category_id_schema)
+    ) {
+      client
+        .query({
+          query: getProducts,
+          variables: { collection: colection_id_schema },
+        })
+        .then(async({ data }) => {
+          const products = await data?.products;
+          setProductId(products);
+        });
+    } else if (category_id_schema && !colection_id_schema) {
+      client
+        .query({
+          query: getProducts,
+          variables: { category: category_id_schema },
+        })
+        .then(async ({ data }) => {
+          const products = await data?.products;
+          setProductId(products);
+        });
+    }
+    if (
+      items?.collectionId === undefined ||
+      items?.collectionId === "" ||
+      (!items?.collectionId && items?.categoryId === undefined || items?.categoryId === '' || !items?.categoryId)
+    ) {
+      client
+        .query({
+          query: getProducts,
+          variables: { collection: "141"  },
+        })
+        .then(async ({ data }) => {
+          const products = await data?.products;
+
+          setProductId(products);
+        });
+    }
+  }, [items]);
+
+
+  return (
+    <>
+      <div className={styles.slyder_custom_contain}>
+        {items !== undefined ? (
+          <div className={styles.title__shelf_custom}>{items.title}</div>
+        ) : (
+          ""
+        )}
+
+        {items !== undefined ? (
+          <div className={styles.sobtitle__shelf_custom}>{items.sobTitle}</div>
+        ) : (
+          ""
+        )}
+
+        <SliderLayout
+          itemsPerPage={{
+            desktop: 4,
+            tablet: 1,
+            phone: 1.04,
+          }}
+          usePagination={device !== "phone" ? true : false}
+          infinite={device !== "phone" ? true : false}
+          fullWidth
+          showPaginationDots="always"
+          showNavigationArrows={
+            device != "phone" ? "desktopOnly" : "mobileOnly"
+          }
+        >
+          {productId &&
+            productId.map((item) => (
+              <li
+                key={item}
+                className={styles.list_shelf}
+                valor={[
+                  {
+                    productName: item.items[0].name,
+                    productId: item.productId,
+                    seller: item.items[0].sellers[0],
+                  },
+                ]}
+              >
+                <div className={styles.slider_custom_content}>
+                  <a href={item.link} className={styles.url_product}>
+                    <div className={styles.image_contain}>
+                      <img
+                        src={item.items[0].images[0].imageUrl}
+                        className={styles.image__product}
+                      />
+                    </div>
+                  </a>
+
+                  <a href={item.link} className={styles.url_product}>
+                    <div className={styles.info_card_content}>
+                      <div>{item.items[0].name}</div>
+                    </div>
+                  </a>
+
+                  {/* start of displaying prices on products with stock */}
+                  {item.items[0]?.sellers[0]?.commertialOffer
+                    ?.AvailableQuantity > 0 && (
+                    <div className={styles.infos_card_prices}>
+                      <div className={styles.contentPricesList}>
+                        <span>De:</span>
+                        <div className={styles.listPrice}>
+                          <FormattedCurrency
+                            value={
+                              item.items[0]?.sellers[0]?.commertialOffer
+                                ?.ListPrice
+                            }
+                          />
+                        </div>
+                      </div>
+
+                      <div className={styles.contentPrices}>
+                        <span>Por:</span>
+                        <div className={styles.sellingPrice}>
+                          <FormattedCurrency
+                            value={
+                              item?.items[0]?.sellers[0]?.commertialOffer?.Price
+                            }
+                          />
+                        </div>
+                        <span className={styles.contentBadgePrice}>
+                          EconomizeR4 xx,xx
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                  {/* end of displaying prices on products with stock */}
+
+                  {/* start available and unavailable button contro*/}
+                  <div className={styles.buttonAddtoCart}>
+                    {item.items[0]?.sellers[0]?.commertialOffer
+                      .AvailableQuantity > 0 ? (
+                      <ButoonAddToCart
+                        valor={[
+                          {
+                            productName: item.items[0].name,
+                            itemId: item.items[0].itemId,
+                            seller: item.items[0].sellers[0],
+                          },
+                        ]}
+                      />
+                    ) : (
+                      <Button
+                        disabled
+                        className={styles.button_unavailable_custom}
+                      >
+                        PRODUTO INDISPONÍVEL
+                      </Button>
+                    )}
+                    {/* end available and unavailable button contro */}
+                  </div>
+                </div>
+              </li>
+            ))}
+        </SliderLayout>
+      </div>
+    </>
+  );
+};
+
+ShelfCustom.schema = {
+  title: "Shelf Custom",
+  type: "object",
+  properties: {
+    items: {
+      properties: {
+        title: {
+          title: "Titulo para Vitrine",
+          type: "string",
+          default: "",
+        },
+        sobTitle: {
+          title: "Sob Title",
+          type: "string",
+          default: "",
+        },
+        categoryId: {
+          title: "CategoryId",
+          type: "string",
+          description: "inserir Id da categoria",
+          default: "",
+        },
+        collectionId: {
+          title: "CollectionId",
+          type: "string",
+          description: "inserir Id da coleção",
+          default: "",
+        },
+      },
+    },
+  },
+};
+
+export default ShelfCustom;
diff --git a/react/components/readme.md b/react/components/readme.md
new file mode 100644
index 00000000..400432e7
--- /dev/null
+++ b/react/components/readme.md
@@ -0,0 +1,38 @@
+*** COMPONENTES CUSTOM ***
+
+- todas as features custom, estão atreladas a branch develop.
+Todas as branchs devem ser criadas partindo da develop.
+As demais branchs devem ser atualizadas com a develop.
+
+***- Testar atualizações.***
+Em caso de teste em todas as ramificações, testar na banch develop.
+Usar ws: https://updateDevelop--corelabiz.myvtex.com
+
+***- Vendor and name:***
+Foi gerado novas configurações para o uso.
+o vendor permanece vinculado a corebizlab.
+
+name: tratado com store-tami e version 0.0.0
+
+*** O uso da ws update reflete no teste, devido a mudança do name.***
+Sempre que usar uma nova ws, será necessário consigurar as páginas
+no /admin para corelabiz.store-tami@0.x:store.custom#nome-da-pagina
+
+Se existir alguma página com erro de carregamento, verificar no admin a configuração
+da pagina que deseja testar.
+ex: corelabiz.store-tami@0.x:store.custom#nome-da-pagina.
+
+ *** COMPONENTS###
+
+*** ShelfCustom ***
+***-componente responsável por renderizar a vitrine custom, localizada acima do footer -***
+** Recursos utilizados para desenvlvimento do componente**
+graphql - query 
+useApolloClient - client react
+SliderLayout - slider vtex";
+FormattedCurrency - format vtex;
+useDevice - detector responsive vtex
+
+*** ButtonAddtoCart ***
+***- componente responsável por add item ao carrinho, em vitrine custom -***
+** Falta tratar as mutations e update no carrinho **
\ No newline at end of file
diff --git a/react/graphql/mutation/mutationAddItem.gql b/react/graphql/mutation/mutationAddItem.gql
new file mode 100644
index 00000000..a64a1ca4
--- /dev/null
+++ b/react/graphql/mutation/mutationAddItem.gql
@@ -0,0 +1,8 @@
+mutation addItem($orderFormId: ID!, $items: [ItemInput]) {
+  addToCart(orderFormId: $orderFormId, items: $items) @context(provider: "vtex.checkout-graphql") {
+    items {
+      skuName
+      productId
+    }
+  }
+}
diff --git a/react/graphql/query/getProduct.gql b/react/graphql/query/getProduct.gql
new file mode 100644
index 00000000..7208fbc9
--- /dev/null
+++ b/react/graphql/query/getProduct.gql
@@ -0,0 +1,39 @@
+query getProduct(
+  $collection: String
+  $category: String
+) {
+  products(
+    collection: $collection
+    category: $category
+  ) {
+    productId
+    categoryId
+    link
+    items {
+      name
+      itemId
+      ean
+      images {
+        imageUrl
+      }
+      sellers {
+        sellerId
+        addToCartLink
+        sellerDefault
+        commertialOffer {
+          AvailableQuantity
+          Price
+          ListPrice
+        }
+      }
+    }
+    priceRange {
+      sellingPrice {
+        highPrice
+      }
+      listPrice {
+        highPrice
+      }
+    }
+  }
+}
diff --git a/react/package.json b/react/package.json
new file mode 100644
index 00000000..bea1afd1
--- /dev/null
+++ b/react/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "react",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT"
+}
diff --git a/react/styles/components/ButtonAddtoCart/styles.css b/react/styles/components/ButtonAddtoCart/styles.css
new file mode 100644
index 00000000..306b1121
--- /dev/null
+++ b/react/styles/components/ButtonAddtoCart/styles.css
@@ -0,0 +1,39 @@
+.content_btnAddToCart_custom Button{
+    background-color: #0F3E99;
+    color: #fff;
+    font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 0;
+    min-height: 2.5rem;
+    box-sizing: border-box;
+    width: 100%;
+    border-radius: 50px;
+    border: solid;
+
+}
+
+:global(.vtex-numeric-stepper__plus-button),
+:global(.vtex-numeric-stepper__minus-button){
+    background-color: #0F3E99;
+    color: #fff;
+    font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 0;
+    min-height: 2.5rem;
+    box-sizing: border-box;
+    width: 100%;
+    border-radius: 50px !important;
+    border: solid;
+}
+:global(.vtex-numeric-stepper-container){
+    display: flex;
+    align-items: center;
+}
+:global(.vtex-numeric-stepper__input){
+    color: #0F3E99;
+    font-weight: 600;
+}
+:global(.vtex-numeric-stepper__label){
+    font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
+    color: #0F3E99;
+}
diff --git a/react/styles/components/ShelfCustom/styles.css b/react/styles/components/ShelfCustom/styles.css
new file mode 100644
index 00000000..f8869444
--- /dev/null
+++ b/react/styles/components/ShelfCustom/styles.css
@@ -0,0 +1,161 @@
+
+
+.slyder_custom_contain{
+    padding: 0 50px;
+    margin: 20px 0;
+}
+.title__shelf_custom{
+    display: flex;
+    justify-content: center;
+    font-size: 50px;
+    font-weight: 500;
+    color: #0F3E99;
+    font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
+
+}
+.sobtitle__shelf_custom{
+    display: flex;
+    justify-content: center;
+    font-size: 35px;
+    font-weight: 500;
+    color: #727273;
+    font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
+   
+}
+.list_shelf{
+    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.432);
+    border-radius: 8px;
+    list-style: none;
+    display: flex;
+    max-width: 300px;
+    max-height: 500px;
+    
+    
+    position: relative;
+    background: #fff;
+    height: 500px;
+}
+.slider_custom_content{
+    padding: 0 2px;
+}
+.image_contain{
+    content: 'contain';
+    aspect-ratio: 1/1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-height: 300px;
+    height: 100%;
+    width: 300px;
+    padding: 15px;
+
+}
+@media(max-width:450px){
+    .image_contain{
+        width: 195px !important;
+    }
+}
+.url_product{
+    text-decoration: none;
+}
+.image__product{
+    height: 100%;
+    width: 100%;
+}
+.info_card_content{
+    padding: 0 5px;
+    font-weight: 600;
+    font-size: 18px;
+    color: #2E2E2E;
+    font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
+    text-transform: none;
+    letter-spacing: 0;
+    height: 60px;
+}
+.info_card_content div{
+    -webkit-line-clamp: 2;
+    text-align: center;
+}
+.infos_card_prices{
+    display: block;
+    justify-content: center;
+    height: 90px;
+    max-height: 90px;
+    text-align: end;
+    padding: 5px;
+    letter-spacing: 1px;
+}
+@media(max-width: 450px){
+    .infos_card_prices{
+        text-align: start;
+    }
+}
+.contentPrices{
+    display: flex;
+    font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
+    align-items: flex-end;
+    font-size: 16px;
+    font-weight: 600;
+    color: #2E2E2E;
+    gap: 5px;
+}
+@media(max-width: 450px){
+    .contentPrices{
+        display: block;
+    }
+}
+.contentPricesList{
+    font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
+    font-size: 15px;
+    display: flex;
+    color: #727273;
+}
+.listPrice{
+    text-decoration: line-through;
+}
+.contentBadgePrice{
+    background-color: #8BC34A;
+    color: #FFFF;
+    border-radius: 10px;
+    align-items: center;
+    display: flex;
+    padding-left: 2px;
+    padding-right: 2px;
+    font-size: 13px;
+    font-weight: 600;
+    vertical-align: baseline;
+    height: 24px;
+
+}
+.buttonAddtoCart{
+    display: flex;
+    justify-content: center;
+    top: -3%;
+    padding: 0 5px;
+    position: relative;
+}
+
+:global(.vtex-button:disabled){
+    color: #0F3E99;
+    border: 1px solid #0F3E99;
+    border-radius: 50px;
+    top: 100px;
+}
+
+/* Ajustes SliderLayout */
+:global(.corelabiz-store-tamii-0-x-sliderTrack){
+    display: flex;
+    gap: 10px;
+}
+:global(.corelabiz-store-tamii-0-x-sliderRightArrow){
+    margin: 0 -40px;
+}
+:global(.corelabiz-store-tamii-0-x-sliderLeftArrow){
+    margin: 0 -40px;
+}
+:global(.corelabiz-store-tamii-0-x-paginationDotsContainer){
+    margin: -15px 0 !important;
+}
+:global(.corelabiz-store-tamii-0-x-paginationDot--isActive){
+    background-color: #0F3E99;
+}
\ No newline at end of file
diff --git a/react/styles/readme.md b/react/styles/readme.md
new file mode 100644
index 00000000..fee85d71
--- /dev/null
+++ b/react/styles/readme.md
@@ -0,0 +1,5 @@
+#### Css COMPONENTS CUSTOM ####
+
+*** shelf custom ***
+**** estilização do componente da vitrine, localizada acima do footer ****
+
diff --git a/react/yarn.lock b/react/yarn.lock
new file mode 100644
index 00000000..fb57ccd1
--- /dev/null
+++ b/react/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
diff --git a/store/blocks/home/deals.json b/store/blocks/home/deals.json
index 2473f98c..e655ead3 100644
--- a/store/blocks/home/deals.json
+++ b/store/blocks/home/deals.json
@@ -61,7 +61,7 @@
   },
   "rich-text#deal3": {
     "props": {
-      "text": "Pick up in store",
+      "text": "Pick up in store tami",
       "blockClass": "deals"
     }
   },
diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc
index 2b6e202a..1ae65c9f 100644
--- a/store/blocks/home/home.jsonc
+++ b/store/blocks/home/home.jsonc
@@ -2,21 +2,23 @@
   "store.home": {
     "blocks": [
       "list-context.image-list#demo",
-      /* You can make references to blocks defined in other files.
-       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
-      "flex-layout.row#deals",
-      "__fold__",
-      "rich-text#shelf-title",
-      "flex-layout.row#shelf",
-      "info-card#home",
+    
+       "flex-layout.row#deals",
+       "__fold__",
+       "rich-text#shelf-title",
+       "flex-layout.row#shelf",
+       "info-card#home",
+       "flex-layout.row#shelfCustom-one",
       "rich-text#question",
       "rich-text#link",
       "newsletter"
     ]
   },
-
+ 
   "list-context.image-list#demo": {
-    "children": ["slider-layout#demo-images"],
+    "children": [
+      "slider-layout#demo-images"
+    ],
     "props": {
       "height": 570,
       "preload": true,
@@ -44,7 +46,6 @@
       "blockClass": "carousel"
     }
   },
-
   "rich-text#shelf-title": {
     "props": {
       "text": "## Summer",
@@ -52,11 +53,17 @@
     }
   },
   "flex-layout.row#shelf": {
-    "children": ["list-context.product-list#demo1"]
+    "children": [
+      "list-context.product-list#demo1"
+    ]
   },
   "list-context.product-list#demo1": {
-    "blocks": ["product-summary.shelf"],
-    "children": ["slider-layout#demo-products"],
+    "blocks": [
+      "product-summary.shelf"
+    ],
+    "children": [
+      "slider-layout#demo-products"
+    ],
     "props": {
       "orderBy": "OrderByTopSaleDESC"
     }
@@ -73,7 +80,6 @@
       "blockClass": "shelf"
     }
   },
-
   "info-card#home": {
     "props": {
       "id": "info-card-home",
@@ -88,17 +94,24 @@
     }
   },
 
+  // shelf custom
+  "flex-layout.row#shelfCustom-one": {
+    "children": [
+      "shelf-custom"
+    ],
+    "title": "Shelf custom one"
+  },
+  
   "rich-text#question": {
     "props": {
       "text": "**This is an example store built using the VTEX platform.\nWant to know more?**",
       "blockClass": "question"
     }
   },
-
   "rich-text#link": {
     "props": {
       "text": "\n**Reach us at**\nwww.vtex.com.br",
       "blockClass": "link"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc
index 5c797c26..4734f4aa 100644
--- a/store/blocks/minicart.jsonc
+++ b/store/blocks/minicart.jsonc
@@ -1,15 +1,188 @@
 {
-  "add-to-cart-button": {
+  "minicart.v2": {
+    "title": "Minicart",
     "props": {
-      "addToCartFeedback": "customEvent",
-      "customPixelEventId": "add-to-cart-button"
+      "MinicartIcon": "icon-cart",
+      "blockClass": "mini-icon",
+      "itemCountMode": "total"
+    },
+    "children": [
+      "minicart-base-content"
+      
+    ]
+  },
+ 
+  "minicart-base-content": {
+    "blocks": [
+      "minicart-empty-state"
+    ],
+    "children": [
+      "minicart-product-list", "flex-layout.row#footer-minicart"
+    ],
+    "props":{
+      "blockClass": "minicart-content"
     }
   },
-
-  "minicart.v2": {
-    "props": {
-      "customPixelEventId": "add-to-cart-button"
+  "flex-layout.row#footer-minicart":{
+    "props":{
+      "blockClass":"minicart-footer"
     },
-    "children": ["minicart-base-content"]
+    "children":["flex-layout.col#minicart-footer"]
+  },
+  "flex-layout.col#minicart-footer":{
+    "children":[
+      "minicart-summary",
+      "minicart-checkout-button"
+    ],
+    "props":{
+      "blockClass": "minicart-footerCol"
+    }
+  },
+ 
+  "minicart-summary":{
+    "blocks":["checkout-summary.compact#minicart-footer"]
+  },
+  "minicart-checkout-button":{
+    "props":{
+      "label":"FINALIZAR PEDIDO",
+      "finishShoppingButtonLink": "/checkout/#/orderform",
+      "blockClass": "button-add-minicart"
+    }
+  },
+  "checkout-summary.compact#minicart-footer":{
+    "children":[
+      "summary-totalizers#minicart",
+      "summary-installments"
+    ],
+    "props":{
+      "totalizersToShow": ["Items", "Discounts"],
+      "total": "visibleTotalizers"
+    }
+  },
+  "summary-installments":{
+    "props": {
+      "message": "Ou Parcelas em até {installmentsNumber}x de {installmentValue} com juros. Por: {installmentsTotalValue}",
+      "markers": [],
+      "hasInterest": true
+    }
+  },
+  "summary-totalizers#minicart":{
+    "props":{
+      "showTotal": true,
+      "showDeliveryTotal": false,
+      "showOriginalTotal": false
+    }
+  },
+  // 
+  "minicart-product-list":{
+    "blocks":[ "product-list#minicart"],
+    "props":{
+      "itemCountMode": "total"
+    }
+  },
+  "product-list#minicart":{
+    "blocks":["product-list-content-desktop"]
+  },
+  "product-list-content-desktop": {
+    "children": [
+      "flex-layout.row#list-row.mobile"
+    ]
+  },
+  "flex-layout.row#list-row.mobile": {
+    "children": [
+      "flex-layout.col#image.mobile",
+      "flex-layout.col#main-container.mobile"
+    ],
+    "props": {
+      "blockClass": [
+        "grid"
+      ]
+    }
+  },
+  "flex-layout.col#image.mobile": {
+    "children": ["product-list-image"],
+    "props": {
+      "marginRight": "4",
+      "blockClass": "product-list-image--mobile"
+    }
+  },
+  "flex-layout.col#main-container.mobile": {
+    "children": [
+      "flex-layout.row#minicar-product-name",
+      
+      "flex-layout.row#brand-and-remove-minicart",
+      "flex-layout.row#top.mobile",
+      "flex-layout.row#bottom.mobile"
+      // "flex-layout.row#message.mobile"
+    ],
+    "props": {
+      "blockClass": [
+        "main-container"
+      ]
+    }
+  },
+  "flex-layout.row#minicar-product-name":{
+    "children":["vtex.product-list:product-name"],
+    "props":{
+      "blockClass": "minicart-productName"
+    }
+  },
+  "flex-layout.row#brand-and-remove-minicart":{
+    "children":[
+      "flex-layout.col#product-brand",
+      "flex-layout.col#remove-button.mobile"
+    ],
+    "props":{
+      "blockClass": "miniCart-row-brand-and-buttonRemove"
+    }
+  },
+  "flex-layout.col#product-brand":{
+    "children":[ "vtex.product-list:product-brand"]
+  },
+ 
+  "flex-layout.row#top.mobile": {
+    "children": [
+      
+      "flex-layout.col#quantity-selector.mobile"
+      // "flex-layout.col#remove-button.desktop"
+    ],
+    "props": {
+      "blockClass": [
+        "top"
+      ]
+    }
+  },
+  "flex-layout.col#quantity-selector.mobile":{
+    "children":["quantity-selector"]
+  },
+  "quantity-selector":{
+    "props":{
+      "mode": "stepper"
+    }
+  },
+  "flex-layout.row#bottom.mobile": {
+    "children": [
+      "flex-layout.col#price-info.mobile"
+    ],
+    "props": {
+      "blockClass": [
+        "bottom"
+      ]
+    }
+  },
+  "flex-layout.col#price-info.mobile": {
+    "children": [
+      "price#mobile"
+    ]
+  },
+  "price#mobile":{
+    "props":{
+      "textAlign": "left"
+    }
   }
-}
+ 
+  
+  
+
+  
+}
\ No newline at end of file
diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc
index afabee36..432abcd7 100644
--- a/store/blocks/product-summary/product-summary.jsonc
+++ b/store/blocks/product-summary/product-summary.jsonc
@@ -9,8 +9,15 @@
       "flex-layout.row#selling-price-savings",
       "product-installments#summary",
       "add-to-cart-button"
+      
+      // "flex-layout.row#buttom-custom"
     ]
   },
+ 
+  // "flex-layout.row#buttom-custom":{
+  //   "children":["button-add-to-cart-custom"]
+   
+  // },
   "flex-layout.col#productRating": {
     "props": {
       "blockClass": "productRating"
diff --git a/store/interfaces.json b/store/interfaces.json
new file mode 100644
index 00000000..cfff6410
--- /dev/null
+++ b/store/interfaces.json
@@ -0,0 +1,8 @@
+{
+    "shelf-custom": {
+        "component": "ShelfCustom"
+    },
+    "button-add-to-cart-custom":{
+        "component": "ButtonAddtoCart"
+    }
+}
\ No newline at end of file
diff --git a/styles/css/_variables/_colors.scss b/styles/css/_variables/_colors.scss
new file mode 100644
index 00000000..bf7a2c72
--- /dev/null
+++ b/styles/css/_variables/_colors.scss
@@ -0,0 +1,18 @@
+$color-brand-primary-00:#0067A0;
+$color-brand-primary-10: #A4DBE8;
+$color-brand-primary-20:#00358E;
+$color-brand-secundary-00: #00AFD7;
+$color-brand-secundary-10: #7C878E;
+$color-brand-secundary-20: #D0D3D4;
+$color-brand-support-00:#514689;
+$color-brand-support-10: #006F44;
+$color-brand-support-20: #FA4616;
+$color-brand-support-30:#DE1B73;
+$color-brand-support-40:#FFB500;
+$color-brand-support-50:#9063CD;
+$color-brand-support-60:#47D7AC;
+$color-brand-support-70:#FF8F1C;
+$color-neutral-white:#FFFFFF;
+$color-neutral-black:#000000;
+$color-neutral-00:#333333;
+$color-badge-00: #47D7AC;
\ No newline at end of file
diff --git a/styles/css/search/vtex.product-summary.css b/styles/css/search/vtex.product-summary.css
index f160ecaa..a2ba9c69 100644
--- a/styles/css/search/vtex.product-summary.css
+++ b/styles/css/search/vtex.product-summary.css
@@ -29,3 +29,4 @@
   min-width: 140px;
   height: inherit !important;
 }
+
diff --git a/styles/css/vtex.checkout-summary.css b/styles/css/vtex.checkout-summary.css
new file mode 100644
index 00000000..2729f9d0
--- /dev/null
+++ b/styles/css/vtex.checkout-summary.css
@@ -0,0 +1,12 @@
+
+.summaryItemContainer  :first-child{
+    color: #0068a0d8;
+    font-weight: 600;
+}
+.summaryItemPrice :last-child{
+    color: #0067A0;
+    font-weight: 700;
+}
+.installments, .summarySmallDisclaimer{
+    color: #7C878E;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index a7c5732a..1cb16135 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -96,3 +96,22 @@
 .flexRow--addToCartRow {
   padding-bottom: 1rem;
 }
+
+/* minicart items */
+.flexRow--grid{
+  border-bottom: 1px solid #a4aaadbe;
+  margin: 2px 0;
+  padding: 5px;
+}
+.flexColChild--main-container{
+  margin: 8px 0;
+}
+.flexRowContent--miniCart-row-brand-and-buttonRemove{
+  display: flex;
+  align-items: baseline;
+}
+.flexRow--minicart-footer{
+  background: rgba(226, 226, 226, 0.562);
+  border-radius: 8px 0;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.904);
+}
diff --git a/styles/css/vtex.minicart.css b/styles/css/vtex.minicart.css
new file mode 100644
index 00000000..29853f01
--- /dev/null
+++ b/styles/css/vtex.minicart.css
@@ -0,0 +1,73 @@
+
+.openIconContainer{
+    display: flex;
+    align-items: baseline;
+    background-color: #0067A0;
+    border-color: #0067A0;
+    border: 1px solid #0067A0;
+}
+@media(max-width: 639px){
+    .openIconContainer{
+        display: flex !important;
+        align-items: baseline;
+    }
+}
+.openIconContainer:hover{
+    background-color: #00358E;
+}
+.openIconContainer--mini-icon :global(.vtex-button):hover{
+    color: #FFF !important;
+    background: #00358E;
+}.openIconContainer--mini-icon::before{
+    content: "Carrinho";
+    color: #FFF !important;
+    font-weight: 500;
+} 
+
+
+.minicartQuantityBadge{
+    background-color:#00AFD7;
+    color: #FFFFFF;
+    font-weight: 600;
+}
+/* close minicart */
+.closeIconButton--mini-icon{
+    color:#7C878E;
+}
+/* title minicart */
+.minicartTitle--minicart-content::before{
+    content: "Meu ";
+    color: #0067A0;
+}
+.minicartTitle--minicart-content{
+    color: #0067A0;
+}
+/* mini cart items */
+.flexRow--grid{
+    border: 1px solid;
+}
+
+
+
+/* botão finalizar pedido */
+.minicartCheckoutButton--button-add-minicart :global(.vtex-button__label){
+    visibility: hidden;
+    width: 100%;
+
+}
+.minicartCheckoutButton--button-add-minicart :global(.vtex-button__label)::after{
+    content: "Finalizar pedido";
+    visibility: visible;
+    align-items: center;
+    display: flex;
+    margin-left: -150px;
+    color: #FFFFFF;
+    font-weight: 600;
+}
+.minicartCheckoutButton--button-add-minicart :global(.vtex-button){
+    background-color: #00AFD7;
+    border-color: #00AFD7;
+}
+
+
+
diff --git a/styles/css/vtex.product-list.css b/styles/css/vtex.product-list.css
new file mode 100644
index 00000000..1067cf1d
--- /dev/null
+++ b/styles/css/vtex.product-list.css
@@ -0,0 +1,87 @@
+/* product name minicart */
+.productName{
+    color: #7C878E;
+    font-weight: 600;
+    font-family: sans-serif;
+    font-size: 14px;
+}
+.productBrandName{
+    color: #7C878E;
+    text-transform: uppercase;
+
+}
+.removeButtonContainer{
+    display: flex;
+    justify-content: end;
+    align-items: baseline;
+}
+.deleteIcon{
+    color: #FA4616;
+}
+.removeButtonContainer::before{
+    content: "Excluir item";
+    visibility: visible;
+    font-size: 9px;
+    color: #7C878E;
+
+}
+
+.inputContainer{
+    width: 5rem;
+    border: none;
+    color: #00AFD7 !important;
+}
+.inputContainer :first-child{
+    color: #7C878E;
+    font-weight: 600;
+}
+.inputContainer :last-child{
+    color: #7C878E;
+}
+.quantitySelectorButton{
+    border-radius: 50%;
+    background-color: #0067A0;
+    color: #D0D3D4;
+}
+.quantitySelectorButton:hover{
+    border-radius: 50%;
+    background-color: #00358E;
+    color: #D0D3D4;
+}
+
+/* prices */
+.productPriceContainer{
+    width: 100%;
+    display: inline-grid;
+}
+.productPriceCurrency{
+    display: flex;
+    justify-content: center;
+    border: 1px solid #D0D3D4;
+    border-radius: 0 8px 0 0;
+    border-bottom: none;
+    background-color: #D0D3D4;
+    color: #7C878E;
+    height: 20px;
+    font-weight: 700;
+    align-items: center;
+}
+.productPrice{
+    display: flex;
+    justify-content: end;
+    border: 1px solid #00AFD7;
+    border-radius: 0 0 0 8px;
+    border-top: none;
+    background-color: #00AFD7;
+    color: #fff;
+    height: 20px;
+    font-weight: 600;
+    align-items: center;
+    margin-top: -5px;
+
+}
+@media(max-width: 639px){
+    .productPrice{
+        justify-content: center;
+    }
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-icons.css b/styles/css/vtex.store-icons.css
index a237d713..30d9af87 100644
--- a/styles/css/vtex.store-icons.css
+++ b/styles/css/vtex.store-icons.css
@@ -1,3 +1,11 @@
 .expandIcon {
   color: #727273;
+}
+.cartIcon{
+  color: #FFF !important;
+  background: #0067A0;
+}
+.cartIcon--minicart-empty-state{
+  color: #727273 !important;
+  background: transparent;
 }
\ No newline at end of file