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