> For the complete documentation index, see [llms.txt](https://help.spicegems.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.spicegems.com/new-easy-product-addons/layout/group-layout.md).

# Group Layout

###  Group Addon – List Layout

The List Layout allows you to control how product addons are displayed on your product page. You can choose whether to show addon images, display them in a slider, select the addon style, and control where the addon layout appears.

1. **Addon image -** Hide/display the images of addon products on the product page.
2. **Slider -**Displays a slider for addon products on the product page.\
   **Arrow position:**
   * **Inline:** Displays the slider arrows on the sides of the addon.
   * **Bottom Center:** Displays the slider arrows at the bottom-center of the addon.
3.  **Group Style -** 
   * **Accordion:** Displays group addons in dropdown style.
   * **Pills:** Displays group addons in a selectable tab style.
4. **Addon Layout Position -** Defines where the addon is placed on the product page.

   By default, the addon is displayed below the Add to Cart button. You can change its position using Auto Position, CSS Selector, or Add App Block.

### Group Addon – Grid Layout

The Grid Layout displays product addons as cards on the product page. You can choose whether to enable a slider, select the addon style, and control where the addon layout appears on the page.

1. **Slider -**Displays a slider for addon products on the product page.\
   **Arrow position:**
   * **Inline:** Displays the slider arrows on the sides of the addon.
   * **Bottom Center:** Displays the slider arrows at the bottom-center of the addon.
2.  **Group Style -** 
   * **Accordion:** Displays group addons in dropdown style.
   * **Pills:** Displays group addons in a selectable tab style.
3. **Addon Layout Position -** Defines where the addon is placed on the product page.

   By default, the addon is displayed below the Add to Cart button. You can change its position using Auto Position, CSS Selector, or Add App Block

{% hint style="info" %}
**Note: If both  CSS Selector and an App Block are configured, the CSS Selector takes priority.**
{% endhint %}