# Add to Cart Group

## Overview

![](https://content.gitbook.com/content/SSunCeiuKbDNt2RTgRa6/blobs/GYNOEIfp5iO4nlWISNCA/about.png)

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.