> 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/product-layout.md).

# Product Layout

###  Product Addon – List Layout

The List Layout allows you to control how your product addons are displayed on your product page. You can choose whether to show addon images, display a slider, 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:**
   * **Top Right:** Displays the slider arrows at the top-right of the addon.
   * **Inline:** Displays the slider arrows on the sides of the addon.
   * **Bottom Center:** Displays the slider arrows at the bottom-center of the addon.<br>
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.

### Product Addon – Grid Layout

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

1. **Slider -**&#x44;isplays a slider for addon products on the product page.\
   **Arrow position:**
   * **Top Right:** Displays the slider arrows at the top-right of the addon.
   * **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. **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 %}