> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas/5.2/canvas-library/blocks/add-to-cart-group.md).

# Add to Cart Group

## Overview

![](/files/4ltpfi8Sjvdm2wyRVTZq)

This is a fully-responsive block that includes an image slider and a content group with descriptions, dropdowns, and an add to cart button. This UI is ideal for e-commerce websites and products pages.

## Structure

* When this block is added to a page, it is placed within a group called **Blocks container 860 (do not rename)** on the page. This group contains the responsive settings for all blocks.
* This block **Group addToCartGroup** contains three main groups:
  * **Group Main product images** includes a main image (**Group Inner main image**) and a list of thumbnail images (**RepeatingGroup images**). Clicking on a thumbnail image \
    (**Button Select thumbnail**) will change the main image to that thumbnail's image.
  * **Group Main product details** includes a title, star rating display, description text, two dropdowns, and a button. 
  * **Group PLACEHOLDER** - This is a placeholder group in the block. If you add more elements to the block, please resize this group and ensure it is not overlapping with any other elements.

## How to set up

* Update **Group Inner main image** and **RepeatingGroup images's** data sources
* Add workflow and conditional statement to **Group Inner favorite**. Hide or remove this component if not needed
* Update **star-rating-display's** data source (enter a number between 1 to 5)
* Update the data source of all other elements in **Group Inner product content**. Remove or hide any elements that are not used. If removing or adding elements, please resize **Group Responsive** and make sure it is not overlapping with any other elements.