# Gallery design

> Set the layout, post style, upload button, and fallback content of each gallery on your website.

Breadcrumb: UGC › Gallery design · Updated: 2026-10-17
Docs index: https://docs.cevoid.com/llms.txt

Every gallery can be customized to match your brand and website. Choose from different layouts, adjust how posts are displayed, and add an upload button, on the gallery's **Design** tab. To choose which posts a gallery shows, see [Galleries](https://docs.cevoid.com/ugc/showcase/galleries.md).

Navigate to [UGC → On-site widgets](https://app.cevoid.com/on-site-widgets) and open a gallery to change its design.

## How gallery design works

The **Design** tab has a menu of settings groups, in this order:

- **Gallery layout:** How posts are arranged. See [Gallery layouts](https://docs.cevoid.com/ugc/showcase/gallery-design#gallery-layouts).
- **Post design:** How each post looks. See [Post styles](https://docs.cevoid.com/ugc/showcase/gallery-design#post-styles).
- **Upload button:** See [Upload button](https://docs.cevoid.com/ugc/showcase/gallery-design#upload-button)
- **Fallback:** Only on the product page gallery. See [Product page gallery fallback](https://docs.cevoid.com/ugc/showcase/gallery-design#product-page-gallery-fallback).
- **Filter labels:** Only on the Grid and Masonry layouts. See [Filter labels](https://docs.cevoid.com/ugc/showcase/galleries.md#filter-labels).
- **Popup:** How the popup looks when a visitor clicks a post. See [UGC popup](https://docs.cevoid.com/ugc/showcase/ugc-popup.md#customize-popup-appearance).
- **Advanced:** See [Advanced settings](https://docs.cevoid.com/ugc/showcase/gallery-design#advanced-settings)
- **Global settings:** Settings for every gallery and card. See [Global settings](https://docs.cevoid.com/ugc/showcase/gallery-design#global-settings).
- **Profile properties:** See [UGC popup](https://docs.cevoid.com/ugc/showcase/ugc-popup.md#profile-properties)

Galleries automatically inherit typography and fonts from your website once embedded, so they match your site. Your [BrandKit](https://docs.cevoid.com/brandkit.md) doesn't style galleries. Every element of a gallery has a class name that starts with `cevoid-`, so a developer can change its styling further in your site's own CSS. Cevoid has no CSS field.

## Change a gallery's design

1. Navigate to [UGC → On-site widgets](https://app.cevoid.com/on-site-widgets)
2. Open your gallery
3. Click the **Design** tab
4. Apply your changes
5. Click **Save changes**

> [!NOTE]
> Styling changes apply on the next page view after clicking **Save changes**.

## Gallery layouts

The gallery layout controls how your posts are arranged. Each layout offers different settings to control the number of posts shown, how they're organized, and how visitors load more content. Set it in _Layout_: **Grid**, **Masonry**, **Collage**, or **Slider**. A new custom gallery starts on **Grid**.

**Grid layout:** Posts display in a clean, uniform grid. This is the most common layout and works well for most use cases.

| Setting | Options |
| --- | --- |
| _Style_ | **Even grid** (default, all posts the same size) or **Variable grid** (highlights one larger post per load) |
| _Desktop_, _Tablet_, _Mobile_ | Rows and columns per device. Rows 1 to 6 (default 4). Columns 2 to 6 on desktop and tablet, 1 to 4 on mobile (default 4, 3, and 2) |
| _Space between posts_ | 0 to 40 px on desktop and mobile (default 15 and 10 px) |
| _Load more_: _Behavior_ | **Load more button** (default), **Infinity scroll**, or **No load more** |
| _Load more_: _Color_, _Roundness_ | Button background color, and corner radius from 0 to 30 px. Only with **Load more button** |

![Grid layout](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/ugc/showcase/gallery-design/0562f7dd7b11/gallery-layout-grid.webp)

**Slider layout:** Posts display in a horizontal carousel that visitors can scroll through. Use it for compact spaces or to encourage browsing.

| Setting | Options |
| --- | --- |
| _Columns_ | Posts visible at once: 3 to 6 on desktop, 2 to 5 on tablet, 1 to 4 on mobile (default 4, 4, and 2) |
| _Space between posts_ | 0 to 40 px on desktop and mobile |
| _Show arrows_ | **Yes** (default) or **No** |
| _Position_ | **Inside** (default), **Outside**, or **Center**. Only with arrows |
| _Color_ | **White** (default), **Black**, or **Grey**. Only with arrows |
| _Icon_ | **Arrow** or **Chevron** (default). Only with arrows |

![Slider layout](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/ugc/showcase/gallery-design/2c6bebe2b85c/gallery-layout-slider.webp)

**Masonry layout:** Posts display in a Pinterest-style layout where images keep their original aspect ratios. This creates a more dynamic, editorial feel.

| Setting | Options |
| --- | --- |
| _Columns_ | 2 to 6 on desktop and tablet, 1 to 4 on mobile |
| _Space between posts_ | 0 to 40 px on desktop and mobile |
| _Load more_: _Behavior_ | **Load more button** (default), **Infinity scroll**, or **No load more** |
| _Load more_: _Color_, _Roundness_ | Button background color, and corner radius from 0 to 30 px. Only with **Load more button** |

![Masonry layout](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/ugc/showcase/gallery-design/ce2ec80ed689/gallery-layout-masonry.webp)

**Collage layout:** Posts display in a fixed artistic arrangement. Use it for hero sections or when you want a more curated, designed look.

| Setting | Options |
| --- | --- |
| _Style_ | **5 posts** (default) or **2 posts** |
| _Animate_ | Animate the first image every 10 seconds (**Yes**, the default, or **No**) |
| _Space between posts_ | 0 to 40 px on desktop and mobile |

![Collage layout](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/ugc/showcase/gallery-design/a0e3364499e4/gallery-layout-collage.webp)

## Post styles

The post style controls how individual posts look within the gallery. Each style emphasizes different information and creates a different feel. Set it in **Design** → **Post design** → _Post style_. The default is **Tags**.

**Tags style:** Shows product tag hotspots directly on the posts, so visitors can see that products are shoppable and exactly where to click.

![Tags post style](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/ugc/showcase/gallery-design/741fc6b2bb36/gallery-post-style-tags.webp)

**Product style:** Displays product information (name, price) below each post. Use it to emphasize shopping and show visitors which products are featured.

![Product post style](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/ugc/showcase/gallery-design/5b30959a7987/gallery-post-style-product.webp)

**Social style:** Gives posts a social media feel by showing the creator's name or handle. Use it to highlight your community and give credit to your creators.

![Social post style](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/ugc/showcase/gallery-design/5ef1ff1c5842/gallery-post-style-social.webp)

**Clean style:** A minimal look with no overlays or information by default, only the images and videos.

![Clean post style](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/ugc/showcase/gallery-design/99dbd5a3c07f/gallery-post-style-clean.webp)

Some settings depend on the style and the layout:

| Setting | Styles | Options |
| --- | --- | --- |
| _Products tags_ | Tags | **Display on hover** (default) or **Always show** |
| _Hide price on posts_, _Hide categories on posts_ | Product | **Yes** or **No** |
| _Hover effect_ | Social, Clean | **None** (default), **Zoom**, **Overlay center**, or **Overlay bottom** |
| _Hover styling_ | Social, Clean | _Background_, _Opacity_ (0.2 to 0.7), and _Text color_ of the overlay. Only with an overlay effect |
| _Roundness_ | All | Corner radius from 0 to 30 px |
| _Post height_ | All | Height ratio from 1 to 1.77. Only on the Grid and Slider layouts |
| _On click_ | All | **Open popup** (default) or **Link to product**, which opens the post's first tagged product. Instagram feed galleries also have **Open social media post** |
| _Username_: _Location_ | Social, Product | **Inside post** (default) or **Outside post**. Not on the Collage layout |
| _Username_: _Alignment_ | Social, Product | **Left** (default), **Center**, or **Right** |
| _Username_: _Icon_ | Social, Product | **Icon** (default), **@-sign**, or **None** |

With **Link to product**, a post with no tagged product opens its custom link, or the popup if it has none. With **Open social media post**, a post that isn't from Instagram opens the popup.

## Upload button

Add an upload button to your gallery so visitors can submit their own content directly from your website. When clicked, the upload button opens a popup version of one of your [upload forms](https://docs.cevoid.com/ugc/collect/upload-forms.md). Visitors see the button as _Upload a post_. The upload button needs upload forms in your plan.

> [!NOTE]
> Content submitted through the upload button goes to your [Inbox](https://docs.cevoid.com/ugc/manage/library-and-inbox.md) for approval before appearing in any galleries.

1. Navigate to [UGC → On-site widgets](https://app.cevoid.com/on-site-widgets) and open the gallery
2. Click **Design** → **Upload button**
3. Set _Visible_ to **Yes**
4. Optional: Select the upload form in _Upload to_
5. Click **Save changes**

| Setting | Options |
| --- | --- |
| _Visible_ | **No** or **Yes**. **Yes** by default, except on Instagram and TikTok feed galleries |
| _Background_ | Button color |
| _Position_ | **Start** (default) or **End** of the gallery |
| _Upload to_ | The upload form the button opens. Default: your _Cevoid upload form_ |

On the Grid layout, the upload button takes the place of one post.

## Product page gallery fallback

The product page gallery shows posts featuring the product the visitor is viewing. When a product has few posts, fallback content fills the gallery, so products with limited UGC still have something to show.

**How content is prioritized:**

1. Posts tagged with the exact product variant the visitor is viewing
2. Posts tagged with other variants that share attributes (like color or size)
3. Posts tagged with the primary product or any variant of the same product
4. Posts featuring similar products based on Cevoid's AI, when _Use AI fallback_ is **Yes**. This includes products you set up separately for each color or size, without variants. See [AI fallback priority](https://docs.cevoid.com/ugc/showcase/gallery-design#ai-fallback-priority).
5. Posts from the fallback gallery, when _Fallback type_ is **Gallery**. The fallback gallery is also used when Cevoid can't find the page's product.

Steps 1 to 3 always apply. Manage the rest in your product page gallery under **Design** → **Fallback**.

| Setting | Options |
| --- | --- |
| _Use AI fallback_ | **Yes** or **No** (default) |
| _Fallback type_ | **None** (default) or **Gallery** |
| _Fallback gallery_ | With **Gallery**: select which gallery to use as fallback. Product, collection, category, and brand page galleries can't be selected |

If no posts match any of these criteria, the gallery shows no posts on that product page. On Shopify, the gallery block's _Hide section if gallery is empty_ hides the block too: see [Embed galleries on your website](https://docs.cevoid.com/ugc/showcase/galleries.md#embed-galleries-on-your-website).

## AI fallback priority

AI fallback finds similar products based on criteria you can prioritize. The same priority applies to the _Fallback posts_ of Post-purchase and Abandon cart [email widgets](https://docs.cevoid.com/ugc/showcase/email-widgets.md).

1. Navigate to [Settings → AI & Agents → Products](https://app.cevoid.com/settings/ai/products)
2. Under _Fallback priority_, drag the criteria into the order you want
3. Enable or disable each criterion with its switch
4. Click **Save changes**

| Criteria | What it matches |
| --- | --- |
| **Names** | Products with similar titles |
| **Visual appearance** | Products that look alike in photos |
| **Categories & Collections** | Products from the same or related categories and collections |
| **Product specs** | Products by size, color, material, and other specs |

By default, **Names**, **Visual appearance**, and **Categories & Collections** are on, in that order. At most 3 criteria can be on at once, and at least 1.

## Advanced settings

Set these in **Design** → **Advanced**.

| Setting | Options |
| --- | --- |
| _On product link click_ | **Open in same window** (default) or **Open in new tab** |
| _Autoplay video_ | **Yes** (default) or **No** |
| _Videos playing_ | With autoplay: **1 video** (default), **2 videos**, **3 videos**, or **All videos** at a time |

Autoplaying videos are muted and have a pause button. They don't autoplay for visitors whose device is set to reduce motion.

## Global settings

Global settings apply to all galleries and cards. Set them in **Design** → **Global settings** of any gallery.

| Setting | Options |
| --- | --- |
| _html-tag_ | **Add overflow hidden** or **Remove overflow hidden**. Remove it if your site has a sticky header or footer |
| _Product variant titles_ | **Show** to show variant titles, such as "Size: Large / Color: Blue", or **Disable** to show only the main product title |
| _Hide product category_ | **Hide** to hide the product category label on product cards, or **Disable** to keep showing it |

_Product variant titles_ and _Hide product category_ are available for Shopify, WooCommerce, and stores connected with a product feed.

## Related articles

- [Galleries](https://docs.cevoid.com/ugc/showcase/galleries.md)
- [UGC popup](https://docs.cevoid.com/ugc/showcase/ugc-popup.md)
- [Upload forms](https://docs.cevoid.com/ugc/collect/upload-forms.md)
- [Cards](https://docs.cevoid.com/ugc/showcase/cards.md)

---

Canonical: https://docs.cevoid.com/ugc/showcase/gallery-design