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

# Upsell Layout

### Upsell Addon – List Layout

The List Layout allow 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.
3. **Addon Layout Position -** Defines where the addon is placed on the product page. You can change its position using CSS Selector, or Add App Block.

### Upsell 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 -**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.
2. **Addon Layout Position -** Defines where the addon list is placed on the product page. You can change its position using 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 %}