> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/product/vertical-product-showcase.md). # Vertical Product Showcase The Vertical Product Showcase section (Image with products) pairs a large image on one side with a slider of product cards on the other. You choose the image and add the products manually as blocks, so you can highlight a specific campaign image and hand-pick which products to show (e.g. new arrivals, a curated set, or products that match the image). The image area can include an optional heading and button, and the products appear in a swipeable slider on desktop and mobile. This section works on any page (homepage, collection, etc.).
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Open **Sections** > **Vertical Product Showcase**. 3. Make your changes, preview live, then click **Save**. {% endhint %} {% hint style="info" %} {% endhint %} ### Settings #### Media Desktop * **Image**: The main image shown on desktop. It appears in a column beside the product cards. * **Full height image**: When enabled, the image column uses the full height of the section on desktop only. * **Width**: How much space the image column uses on desktop: **Small** or **Large**. * **Image placement**: **Left** (image first) or **Right** (products first). * **Image behavior**: **None**, **Ambient movement**, or **Zoom in on scroll** for a subtle animation effect. #### Media content * **Media content** (paragraph): Explains that the “Heading text” and “Button” blocks appear over the image; leave them empty to hide. * **Group the title and button**: When enabled, the heading and button are placed together in one corner. When disabled, you can set their positions separately. * **Heading position**: Where the heading block sits on the image (Top Left, Top Right, Bottom Left, Bottom Right). Only visible when “Group the title and button” is off. * **Button position**: Where the button block sits on the image (Top Left, Top Right, Bottom Left, Bottom Right). Only visible when “Group the title and button” is off. * **Position**: When “Group the title and button” is on, this single control sets where the grouped title and button sit (Top Left, Top Right, Bottom Left, Bottom Right). #### Layout * **Full width**: When enabled, the section stretches to the full width of the screen. * **Remove space between image and content**: When enabled, there is no gap between the image and the product cards area. * **Enable custom border settings**: When enabled, you can set borders and radius for the image and the content area separately. * **Horizontal space**: Space between the image and content when custom borders are on and “Remove space” is off. * **Image border width** / **Image border radius**: Border and corner radius for the image area (when custom borders are on). * **Content border width** / **Content border radius**: Border and corner radius for the product cards area (when custom borders are on). #### Colors * **Color scheme**: Section background color scheme. * **Container color scheme**: Color scheme for the product cards container (can differ from the section). #### Cards settings * **Card size (desktop)**: Size of each product card on desktop: **S**, **M**, or **L**. * **Image ratio**: Product card image shape: **Square**, **Portrait**, **Landscape**, or **Tall**. * **Vendor**: When enabled, the vendor name is shown on each card. * **Quick add**: When enabled, customers can add the product to cart from the card. * **Quick view**: When enabled, a quick view option is available on the card. * **Show swatches**: When enabled, color (or other) swatches are shown on the card. * **Product rating**: When enabled, product ratings appear (requires a ratings app). * **Show availability**: When enabled, “In stock” / “Sold out” (or similar) is shown. * **Show variants**: When enabled, variant options can be shown on the card; use **Custom product variants** to limit which names appear. * **Custom product variants**: Optional. Comma-separated variant names (e.g. “Color, Size”). Leave blank to use default behavior. * **Metafields to show**: Optional. Comma-separated metafield keys to show on the card. * **Card color scheme**: Color scheme for the product cards. #### Media Mobile * **Mobile image**: Optional image for mobile. If set, it is used on small screens instead of the desktop image. #### Mobile layout * **Columns**: Number of product columns on mobile: **1** or **2**. Extra products are in a swipeable slider. * **Show progress bar**: When enabled, a progress bar indicates position in the mobile slider. #### Padding * **Top**: Space above the section (0–400 px). * **Bottom**: Space below the section (0–400 px). #### Blocks * **Heading text**: Block that can display a heading (and optional text) over the image. Add it from the block list; leave content empty to hide. * **Button**: Block that can display a button over the image. Add it from the block list; leave empty to hide. * **Product card** (e.g. “Product”): Each block is one product in the slider. Add blocks and select a product for each. *** ### Tips * Use a strong image that matches the products (e.g. lifestyle or campaign) so the section tells a clear story. * You control exactly which products appear by adding and configuring product card blocks; order blocks to set the display order. * “Group the title and button” keeps the heading and CTA in one corner; turn it off if you want the heading in one corner and the button in another. * Full height image works best when the products column has enough content so both columns feel balanced on desktop. * On mobile, the layout stacks: image (or mobile image) first, then the product slider.