> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas-pages-and-modules/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-pages-and-modules/2.0.0/modules/add-to-cart-group.md).

# Add to Cart Group

## Overview

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'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.