diff --git a/components/product/BuyTogether/AddToCartButton/common.tsx b/components/product/BuyTogether/AddToCartButton/common.tsx
new file mode 100644
index 0000000..f9fd65b
--- /dev/null
+++ b/components/product/BuyTogether/AddToCartButton/common.tsx
@@ -0,0 +1,51 @@
+import Button from "$store/components/ui/Button.tsx";
+import { sendEvent } from "$store/sdk/analytics.tsx";
+import { useUI } from "$store/sdk/useUI.ts";
+import { AddToCartParams } from "apps/commerce/types.ts";
+import { useState } from "preact/hooks";
+
+export interface Props {
+  /** @description: sku name */
+  eventParams: AddToCartParams;
+  onAddItem: () => Promise<void>;
+}
+
+const useAddToCart = ({ eventParams, onAddItem }: Props) => {
+  const [loading, setLoading] = useState(false);
+  const { displayCart } = useUI();
+
+  const onClick = async (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    try {
+      setLoading(true);
+
+      await onAddItem();
+
+      sendEvent({
+        name: "add_to_cart",
+        params: eventParams,
+      });
+
+      displayCart.value = true;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { onClick, loading, "data-deco": "add-to-cart" };
+};
+
+export default function AddToCartButton(props: Props) {
+  const btnProps = useAddToCart(props);
+
+  return (
+    <Button
+      {...btnProps}
+      class="max-w-[250px] h-[60px] rounded bg-green hover:bg-green/90 border border-green drop-shadow transition-all duration-150 text-white-normal font-bold text-lg leading-5"
+    >
+      Comprar Junto
+    </Button>
+  );
+}
diff --git a/components/product/BuyTogether/AddToCartButton/vtex.tsx b/components/product/BuyTogether/AddToCartButton/vtex.tsx
new file mode 100644
index 0000000..2755115
--- /dev/null
+++ b/components/product/BuyTogether/AddToCartButton/vtex.tsx
@@ -0,0 +1,18 @@
+import { useCart } from "apps/vtex/hooks/useCart.ts";
+import Button, { Props as BtnProps } from "./common.tsx";
+
+export interface Props extends Omit<BtnProps, "onAddItem"> {
+  products: Array<{ seller: string; id: string; quantity: number }>;
+}
+
+function AddToCartButton({ products, eventParams }: Props) {
+  const { addItems } = useCart();
+  const onAddItem = () =>
+    addItems({
+      orderItems: products,
+    });
+
+  return <Button onAddItem={onAddItem} eventParams={eventParams} />;
+}
+
+export default AddToCartButton;
diff --git a/components/product/BuyTogether/BuyTogether.tsx b/components/product/BuyTogether/BuyTogether.tsx
new file mode 100644
index 0000000..73dbb5d
--- /dev/null
+++ b/components/product/BuyTogether/BuyTogether.tsx
@@ -0,0 +1,110 @@
+import { useMemo } from "preact/hooks";
+import Icon from "deco-sites/maconequiio/components/ui/Icon.tsx";
+import Card from "./Card.tsx";
+import AddToCartButtonVTEX from "$store/islands/AddToCartButton/BuyTogether/vtex.tsx";
+
+import { useOffer } from "$store/sdk/useOffer.ts";
+import { formatPrice } from "deco-sites/maconequiio/sdk/format.ts";
+
+import type { Product } from "apps/commerce/types.ts";
+
+export interface Props {
+  products: Product[] | null;
+}
+
+export default function BuyTogether({ products }: Props) {
+  if (!products || products.length === 0) return null;
+
+  const othersProducts = useMemo(
+    () => products.filter((_, index) => index !== 0),
+    [products],
+  );
+
+  if (!othersProducts || othersProducts.length === 0) return null;
+
+  const productsOffers = useMemo(
+    () => products.map((item) => item.offers?.lowPrice ?? 0),
+    [products],
+  );
+  const totalPrice = useMemo(
+    () => productsOffers.reduce((acc, price) => acc + price, 0),
+    [productsOffers],
+  );
+
+  const cartProducts = useMemo(() =>
+    products.map((product) => {
+      const { seller = "1" } = useOffer(product.offers);
+      return {
+        id: product.productID,
+        seller,
+        quantity: 1,
+      };
+    }), [products]);
+
+  const eventParams = useMemo(() =>
+    products.map((item) => ({
+      item_id: item.productID,
+      item_name: item.isVariantOf?.name || item.name,
+      quantity: 1,
+    })), [products]);
+
+  return (
+    <div class="flex items-center justify-center my-12 py-6 px-4 xl:px-0 bg-white-ice">
+      <div class="flex items-center gap-7 xl:max-w-full xl:mx-auto">
+        <div class="flex flex-col gap-2.5">
+          <h2 class="text-black-neutral font-bold text-xl leading-6">
+            Você está vendo
+          </h2>
+          <Card product={products[0]} />
+        </div>
+        <Icon
+          id="PlusNew"
+          width={24}
+          height={23}
+          strokeWidth={2}
+          class="text-green"
+        />
+        <div class="flex flex-col gap-2.5">
+          <h2 class="text-black-neutral font-bold text-xl leading-6">
+            Compre junto
+          </h2>
+          <div class="flex items-center justify-between gap-7">
+            {othersProducts.map((product, index) => (
+              <>
+                <Card product={product} hasViewProductLink={true} />
+                {index !== othersProducts.length - 1 && (
+                  <Icon
+                    id="PlusNew"
+                    width={24}
+                    height={23}
+                    strokeWidth={2}
+                    class="text-green"
+                  />
+                )}
+              </>
+            ))}
+            <Icon
+              id="Equals"
+              width={20}
+              height={17}
+              strokeWidth={2}
+              class="text-green"
+            />
+          </div>
+        </div>
+        <div class="flex flex-col gap-4 items-center justify-center text-center">
+          <div class="flex flex-col gap-0">
+            <h2 class="text-lg text-black-neutral">Compre estes produtos</h2>
+            <span class="text-lg text-black-neutral font-bold">
+              por {formatPrice(totalPrice)}
+            </span>
+          </div>
+          <AddToCartButtonVTEX
+            products={cartProducts}
+            eventParams={{ items: eventParams }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/product/BuyTogether/Card.tsx b/components/product/BuyTogether/Card.tsx
new file mode 100644
index 0000000..de81282
--- /dev/null
+++ b/components/product/BuyTogether/Card.tsx
@@ -0,0 +1,88 @@
+import Image from "apps/website/components/Image.tsx";
+
+import { useOffer } from "$store/sdk/useOffer.ts";
+import { relative } from "$store/sdk/url.ts";
+import { formatPrice } from "$store/sdk/format.ts";
+
+import type { Product } from "apps/commerce/types.ts";
+
+export interface Props {
+  product: Product;
+  hasViewProductLink?: boolean;
+}
+
+const WIDTH = 183;
+const HEIGHT = 183;
+
+export default function BuyTogetherCard(
+  { product, hasViewProductLink = false }: Props,
+) {
+  const { url, name, image: images, offers } = product;
+  const [front] = images ?? [];
+  const { listPrice, price } = useOffer(offers);
+
+  const discount = Math.round(
+    (((listPrice ?? 0) - (price ?? 0)) / (listPrice ?? 0)) * 100,
+  );
+
+  return (
+    <div class="flex flex-col rounded w-[218px] h-[344px] bg-white-normal border border-[#BEBEBE] p-3">
+      <figure
+        class="relative"
+        style={{ aspectRatio: `${WIDTH} / ${HEIGHT}` }}
+      >
+        <div class="absolute top-2 z-10 flex items-center left-1/2">
+          <div class=""></div>
+        </div>
+
+        {/* Product Images */}
+        <div class="grid grid-cols-1 grid-rows-1 w-full">
+          <Image
+            src={front.url!}
+            alt={front.alternateName}
+            width={WIDTH}
+            height={HEIGHT}
+            class="col-span-full row-span-full rounded w-full"
+            sizes="(max-width: 640px) 50vw, 20vw"
+            loading="lazy"
+            decoding="async"
+          />
+        </div>
+      </figure>
+
+      <div class="flex flex-col gap-1 pt-3 border-t border-t-white-base h-full justify-between">
+        <h2
+          class="line-clamp-3 text-sm text-black-neutral uppercase font-medium leading-4"
+          dangerouslySetInnerHTML={{ __html: name ?? "" }}
+        />
+
+        {hasViewProductLink && (
+          <a
+            href={url && relative(url)}
+            class="underline text-red text-sm font-medium"
+          >
+            {"Ver produto >"}
+          </a>
+        )}
+
+        <div class="flex w-full items-center justify-between gap-2">
+          <div class="flex flex-col gap-0.5">
+            <div class="line-through text-gray-base text-xs leading-3">
+              de: {formatPrice(listPrice, offers?.priceCurrency)}
+            </div>
+
+            <div class="text-black-neutral text-sm font-bold leading-4">
+              por: {formatPrice(price, offers?.priceCurrency)}
+            </div>
+          </div>
+
+          {discount > 0 && (
+            <div class="flex items-center justify-center text-xs leading-3 font-bold bg-red-light text-white-normal w-10 h-8 p-0.5 rounded-tl-2xl rounded-br-2xl">
+              -{discount}%
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/product/ProductCard.tsx b/components/product/ProductCard.tsx
index be30557..837ab09 100644
--- a/components/product/ProductCard.tsx
+++ b/components/product/ProductCard.tsx
@@ -166,7 +166,7 @@ function ProductCard({
             ""
           )
           : (
-            <div class="flex w-full justify-between gap-2">
+            <div class="flex w-full items-center justify-between gap-2">
               <div class="flex flex-col gap-0.5">
                 <div class="line-through text-gray-base text-xs leading-3">
                   de: {formatPrice(listPrice, offers?.priceCurrency)}
diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx
index 3e11dc6..2a1d6ce 100644
--- a/components/ui/Icon.tsx
+++ b/components/ui/Icon.tsx
@@ -22,6 +22,7 @@ export type AvailableIcons =
   | "Instagram"
   | "Linkedin"
   | "Minus"
+  | "Equals"
   | "MapPin"
   | "MagnifyingGlass"
   | "Mastercard"
@@ -29,6 +30,7 @@ export type AvailableIcons =
   | "Phone"
   | "Pix"
   | "Plus"
+  | "PlusNew"
   | "QuestionMarkCircle"
   | "Return"
   | "Ruler"
diff --git a/fresh.gen.ts b/fresh.gen.ts
index 051637b..a8a81d6 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -3,6 +3,7 @@
 // This file is automatically updated during development when running `dev.ts`.
 
 import * as $_app from "./routes/_app.tsx";
+import * as $AddToCartButton_BuyTogether_vtex from "./islands/AddToCartButton/BuyTogether/vtex.tsx";
 import * as $AddToCartButton_linx from "./islands/AddToCartButton/linx.tsx";
 import * as $AddToCartButton_nuvemshop from "./islands/AddToCartButton/nuvemshop.tsx";
 import * as $AddToCartButton_shopify from "./islands/AddToCartButton/shopify.tsx";
@@ -34,6 +35,8 @@ const manifest = {
     "./routes/_app.tsx": $_app,
   },
   islands: {
+    "./islands/AddToCartButton/BuyTogether/vtex.tsx":
+      $AddToCartButton_BuyTogether_vtex,
     "./islands/AddToCartButton/linx.tsx": $AddToCartButton_linx,
     "./islands/AddToCartButton/nuvemshop.tsx": $AddToCartButton_nuvemshop,
     "./islands/AddToCartButton/shopify.tsx": $AddToCartButton_shopify,
diff --git a/islands/AddToCartButton/BuyTogether/vtex.tsx b/islands/AddToCartButton/BuyTogether/vtex.tsx
new file mode 100644
index 0000000..37c6b7c
--- /dev/null
+++ b/islands/AddToCartButton/BuyTogether/vtex.tsx
@@ -0,0 +1,8 @@
+import Component from "$store/components/product/BuyTogether/AddToCartButton/vtex.tsx";
+import type { Props } from "$store/components/product/BuyTogether/AddToCartButton/vtex.tsx";
+
+function Island(props: Props) {
+  return <Component {...props} />;
+}
+
+export default Island;
diff --git a/manifest.gen.ts b/manifest.gen.ts
index 255c994..9d0c04d 100644
--- a/manifest.gen.ts
+++ b/manifest.gen.ts
@@ -50,19 +50,20 @@ import * as $$$$$$40 from "./sections/Miscellaneous/CampaignTimer.tsx";
 import * as $$$$$$41 from "./sections/Miscellaneous/CookieConsent.tsx";
 import * as $$$$$$42 from "./sections/Miscellaneous/Slide.tsx";
 import * as $$$$$$43 from "./sections/Newsletter/Newsletter.tsx";
-import * as $$$$$$44 from "./sections/Product/ImageGalleryFrontBack.tsx";
-import * as $$$$$$45 from "./sections/Product/ImageGallerySlider.tsx";
-import * as $$$$$$46 from "./sections/Product/NotFound.tsx";
-import * as $$$$$$47 from "./sections/Product/NotFoundChallenge.tsx";
-import * as $$$$$$48 from "./sections/Product/ProductInfo.tsx";
-import * as $$$$$$49 from "./sections/Product/ProductShelf.tsx";
-import * as $$$$$$50 from "./sections/Product/ProductShelfTabbed.tsx";
-import * as $$$$$$51 from "./sections/Product/SearchResult.tsx";
-import * as $$$$$$52 from "./sections/Product/ShelfWithImage.tsx";
-import * as $$$$$$53 from "./sections/Product/Wishlist.tsx";
-import * as $$$$$$54 from "./sections/Social/InstagramPosts.tsx";
-import * as $$$$$$55 from "./sections/Social/WhatsApp.tsx";
-import * as $$$$$$56 from "./sections/Theme/Theme.tsx";
+import * as $$$$$$44 from "./sections/Product/BuyTogether.tsx";
+import * as $$$$$$45 from "./sections/Product/ImageGalleryFrontBack.tsx";
+import * as $$$$$$46 from "./sections/Product/ImageGallerySlider.tsx";
+import * as $$$$$$47 from "./sections/Product/NotFound.tsx";
+import * as $$$$$$48 from "./sections/Product/NotFoundChallenge.tsx";
+import * as $$$$$$49 from "./sections/Product/ProductInfo.tsx";
+import * as $$$$$$50 from "./sections/Product/ProductShelf.tsx";
+import * as $$$$$$51 from "./sections/Product/ProductShelfTabbed.tsx";
+import * as $$$$$$52 from "./sections/Product/SearchResult.tsx";
+import * as $$$$$$53 from "./sections/Product/ShelfWithImage.tsx";
+import * as $$$$$$54 from "./sections/Product/Wishlist.tsx";
+import * as $$$$$$55 from "./sections/Social/InstagramPosts.tsx";
+import * as $$$$$$56 from "./sections/Social/WhatsApp.tsx";
+import * as $$$$$$57 from "./sections/Theme/Theme.tsx";
 
 const manifest = {
   "loaders": {
@@ -117,20 +118,21 @@ const manifest = {
     "deco-sites/maconequiio/sections/Miscellaneous/CookieConsent.tsx": $$$$$$41,
     "deco-sites/maconequiio/sections/Miscellaneous/Slide.tsx": $$$$$$42,
     "deco-sites/maconequiio/sections/Newsletter/Newsletter.tsx": $$$$$$43,
+    "deco-sites/maconequiio/sections/Product/BuyTogether.tsx": $$$$$$44,
     "deco-sites/maconequiio/sections/Product/ImageGalleryFrontBack.tsx":
-      $$$$$$44,
-    "deco-sites/maconequiio/sections/Product/ImageGallerySlider.tsx": $$$$$$45,
-    "deco-sites/maconequiio/sections/Product/NotFound.tsx": $$$$$$46,
-    "deco-sites/maconequiio/sections/Product/NotFoundChallenge.tsx": $$$$$$47,
-    "deco-sites/maconequiio/sections/Product/ProductInfo.tsx": $$$$$$48,
-    "deco-sites/maconequiio/sections/Product/ProductShelf.tsx": $$$$$$49,
-    "deco-sites/maconequiio/sections/Product/ProductShelfTabbed.tsx": $$$$$$50,
-    "deco-sites/maconequiio/sections/Product/SearchResult.tsx": $$$$$$51,
-    "deco-sites/maconequiio/sections/Product/ShelfWithImage.tsx": $$$$$$52,
-    "deco-sites/maconequiio/sections/Product/Wishlist.tsx": $$$$$$53,
-    "deco-sites/maconequiio/sections/Social/InstagramPosts.tsx": $$$$$$54,
-    "deco-sites/maconequiio/sections/Social/WhatsApp.tsx": $$$$$$55,
-    "deco-sites/maconequiio/sections/Theme/Theme.tsx": $$$$$$56,
+      $$$$$$45,
+    "deco-sites/maconequiio/sections/Product/ImageGallerySlider.tsx": $$$$$$46,
+    "deco-sites/maconequiio/sections/Product/NotFound.tsx": $$$$$$47,
+    "deco-sites/maconequiio/sections/Product/NotFoundChallenge.tsx": $$$$$$48,
+    "deco-sites/maconequiio/sections/Product/ProductInfo.tsx": $$$$$$49,
+    "deco-sites/maconequiio/sections/Product/ProductShelf.tsx": $$$$$$50,
+    "deco-sites/maconequiio/sections/Product/ProductShelfTabbed.tsx": $$$$$$51,
+    "deco-sites/maconequiio/sections/Product/SearchResult.tsx": $$$$$$52,
+    "deco-sites/maconequiio/sections/Product/ShelfWithImage.tsx": $$$$$$53,
+    "deco-sites/maconequiio/sections/Product/Wishlist.tsx": $$$$$$54,
+    "deco-sites/maconequiio/sections/Social/InstagramPosts.tsx": $$$$$$55,
+    "deco-sites/maconequiio/sections/Social/WhatsApp.tsx": $$$$$$56,
+    "deco-sites/maconequiio/sections/Theme/Theme.tsx": $$$$$$57,
   },
   "apps": {
     "deco-sites/maconequiio/apps/decohub.ts": $$$$$$$$$$$0,
diff --git a/sections/Product/BuyTogether.tsx b/sections/Product/BuyTogether.tsx
new file mode 100644
index 0000000..be50411
--- /dev/null
+++ b/sections/Product/BuyTogether.tsx
@@ -0,0 +1,12 @@
+export { default } from "../../components/product/BuyTogether/BuyTogether.tsx";
+
+export function LoadingFallback() {
+  return (
+    <div
+      style={{ height: "436px" }}
+      class="w-full flex justify-center items-center"
+    >
+      <span class="loading loading-spinner" />
+    </div>
+  );
+}
diff --git a/sections/Product/ImageGallerySlider.tsx b/sections/Product/ImageGallerySlider.tsx
index c036128..8d310bf 100644
--- a/sections/Product/ImageGallerySlider.tsx
+++ b/sections/Product/ImageGallerySlider.tsx
@@ -1,10 +1,12 @@
 export { default } from "../../components/product/Gallery/ImageSlider.tsx";
 
-// export function LoadingFallback() {
-//   return (
-//     <div
-//       style={{ height: "710px" }}
-//       class="w-full flex justify-center items-center box"
-//     />
-//   );
-// }
+export function LoadingFallback() {
+  return (
+    <div
+      style={{ height: "710px" }}
+      class="w-full flex justify-center items-center"
+    >
+      <span class="loading loading-spinner" />
+    </div>
+  );
+}
diff --git a/static/sprites.svg b/static/sprites.svg
index 9af162d..68df289 100644
--- a/static/sprites.svg
+++ b/static/sprites.svg
@@ -58,6 +58,14 @@
 		<path d="M7.21716 14.9166C7.21716 14.9166 13.0603 12.2499 13.0603 8.24992V3.58325L7.21716 1.58325L1.37402 3.58325V8.24992C1.37402 12.2499 7.21716 14.9166 7.21716 14.9166Z" stroke="#108658" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 	</symbol>
 
+	<symbol id="Equals" width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M1.612 5.838C1.332 5.838 1.08 5.74 0.856 5.544C0.66 5.32 0.562 5.068 0.562 4.788V1.512C0.562 1.204 0.66 0.951999 0.856 0.755999C1.08 0.559999 1.332 0.461999 1.612 0.461999H18.16C18.468 0.461999 18.72 0.559999 18.916 0.755999C19.112 0.951999 19.21 1.204 19.21 1.512V4.788C19.21 5.068 19.112 5.32 18.916 5.544C18.72 5.74 18.468 5.838 18.16 5.838H1.612ZM1.612 16.338C1.332 16.338 1.08 16.24 0.856 16.044C0.66 15.82 0.562 15.568 0.562 15.288V12.012C0.562 11.704 0.66 11.452 0.856 11.256C1.08 11.06 1.332 10.962 1.612 10.962H18.16C18.468 10.962 18.72 11.06 18.916 11.256C19.112 11.452 19.21 11.704 19.21 12.012V15.288C19.21 15.568 19.112 15.82 18.916 16.044C18.72 16.24 18.468 16.338 18.16 16.338H1.612Z" fill="#108658"/>
+	</symbol>
+
+	<symbol id="PlusNew" width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M10.046 22.614C9.766 22.614 9.514 22.516 9.29 22.32C9.094 22.096 8.996 21.844 8.996 21.564V13.878H1.52C1.212 13.878 0.946 13.78 0.722 13.584C0.526 13.388 0.428 13.136 0.428 12.828V9.762C0.428 9.454 0.526 9.202 0.722 9.006C0.946 8.782 1.212 8.67 1.52 8.67H8.996V1.236C8.996 0.927998 9.094 0.675999 9.29 0.48C9.514 0.283999 9.766 0.185999 10.046 0.185999H13.49C13.798 0.185999 14.05 0.283999 14.246 0.48C14.442 0.675999 14.54 0.927998 14.54 1.236V8.67H21.974C22.282 8.67 22.534 8.782 22.73 9.006C22.926 9.202 23.024 9.454 23.024 9.762V12.828C23.024 13.136 22.926 13.388 22.73 13.584C22.534 13.78 22.282 13.878 21.974 13.878H14.54V21.564C14.54 21.844 14.442 22.096 14.246 22.32C14.05 22.516 13.798 22.614 13.49 22.614H10.046Z" fill="#108658"/>
+	</symbol>
+
 	<symbol id="Elo" width="48" height="32" viewBox="0 0 48 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 		<path d="M10.5988 12.1154C11.02 11.9773 11.4706 11.9024 11.9395 11.9024C13.9856 11.9024 15.6923 13.3282 16.0839 15.2222L18.9834 14.6423C18.3181 11.4232 15.4175 9 11.9395 9C11.1431 9 10.3766 9.12726 9.66113 9.36168L10.5988 12.1154Z"/>
 		<path d="M7.14818 21.4445L8.88427 19.2029C8.10933 18.419 7.62022 17.2747 7.62022 15.9991C7.62022 14.7246 8.10887 13.5802 8.88359 12.797L7.14659 10.5556C5.8298 11.8873 5 13.8326 5 15.9991C5 18.1669 5.83102 20.1128 7.14818 21.4445"/>