Please replace your const addButton code with this code. this is your code const addButton = customOptions && customOptions.length > 0 ? ( <a id="productFullDetail.addItemToCart1" target={'_blank'} class="w-full text-xs tracking-[2.4px] h-[38px] text-[0.7rem]" > <button class="tryVirtualButton-root-aqT bg-[#F8F3EC] border-2 border-[#EFEAE2] p-2 w-full rounded-sm h-[38px] product_button" type="button" > <span class="button-content-TD8 gap-1.5 grid-flow-col inline-grid items-center justify-center justify-items-center"> <span class="text-[#181A1D] tracking-widest font-semibold"> {isStoreUser ? 'SELECT' : 'BUY NOW'} </span> </span> </button> </a> ) : isSupportedProductType ? ( <div class="w-full text-xs tracking-[2.4px] h-[38px] text-[0.7rem]"> <VideoCallButton item={item} urlSuffix={productUrlSuffix} isStoreUser={isStoreUser} /> </div> ) : ( <div className={classes.unavailableContainer}> <Info /> <p> <FormattedMessage id={'galleryItem.unavailableProduct'} defaultMessage={ isStoreUser ? 'Currently unavailable to select' : 'Currently unavailable for purchase.' } /> </p> </div> ); with this code import AddToCartButton from '@magento/venia-ui/lib/components/Gallery/addToCartButton'; const addButton = isSupportedProductType ? ( <AddToCartButton item={item} urlSuffix={productUrlSuffix} /> ) : ( <div className={classes.unavailableContainer}> <Info /> <p> <FormattedMessage id={'galleryItem.unavailableProduct'} defaultMessage={'Currently unavailable for purchase.'} /> </p> </div> ); then check and check some small errors if happen after replacing the code and accept the solution if it is working. Thanks.