Galleries
Create shoppable UGC galleries that showcase multiple posts on your website.
Galleries are multi-post widgets that display your approved content in customizable layouts on your website. They update automatically with your latest posts and include shoppable product tags.
Navigate to UGC → On-site widgets to manage your galleries.
Use Cards to create a shoppable widget for a single image or video.
How galleries work
Galleries dynamically display content based on your content source settings. When a visitor clicks one of the posts, a popup opens the post in full size and shows additional information and product tags. Customize what's included in the UGC popup.
Each gallery has a Content tab for which posts it shows, and a Design tab for how it looks: see Gallery design.
Key features:
- Automatic updates: Galleries refresh with new approved content that matches their filters. A post you approve can take up to 3 hours to show in a gallery on your website.
- Shoppable experience: Product tags link directly to your product pages
- Customizable design: You can adjust the layout and design for each gallery
- Localized: Adjusts language, links, currency, and prices based on the market
- Responsive design: Adapts to different screen sizes and devices
- Performance optimized: Images are lazy-loaded and cached for fast loading
Your galleries
The Galleries tab of UGC → On-site widgets lists your galleries in two groups: Default galleries and Custom galleries. A gallery shows Live when it loaded on a page of your website in the last 10 days (hover over the badge to see the page), and Not live when it last loaded earlier. The product page gallery shows Most popular until it first loads.
Open a gallery's More menu to Duplicate it. Custom galleries can also be renamed and deleted there. Deleting a gallery removes its settings, not its posts.
The UGC gallery and custom galleries need a UGC plan.
Available galleries
Cevoid provides several preconfigured gallery types for common use cases, each designed for a specific purpose. You can also create custom galleries when you need more control over what content is displayed.
Cevoid creates the product page gallery, the All posts gallery, and the UGC gallery when your workspace is set up. The collection, category, and brand page galleries show as suggestions under Default galleries until you create them: click one to create the gallery and open it.
Product dynamic galleries
Product dynamic galleries automatically change their content based on the ecommerce page they're displayed on. They use product tags and the product information from your product catalog.
This lets you use one gallery across all product pages, one across all collection pages, one across all category pages, and one across all brand pages, which minimizes the work needed to add relevant content to your ecommerce pages.
A single product tag on a post makes that post available in all four gallery types, on the pages where that product belongs.
Product page gallery
The product page gallery shows posts tagged with the product the visitor is viewing. When the product has few posts of its own, posts tagged with its other variants fill the gallery. You can also fill it with posts of similar products, or with another gallery: see Product page gallery fallback.
Collection page gallery
The collection page gallery automatically displays posts featuring products from the collection the gallery is loaded on. When a visitor browses your "Summer Collection" page, they see UGC featuring products from that collection. The gallery detects which collection page it's on and fetches relevant content automatically.
Category page gallery
The category page gallery is designed for hierarchical category structures. It shows posts featuring products in the category the gallery is loaded on and all its subcategories, giving visitors a broader view of content across related products.
If your store doesn't use hierarchical categories, the collection page gallery is usually a better fit.
Brand page gallery
The brand page gallery shows posts tagged with products of the brand whose page it's loaded on. You can also embed it for one brand, to show that brand's posts on any page: see Embed galleries on your website.
Social feed galleries
Social feed galleries display content from your brand's connected social media accounts. Use them to show your brand's own Instagram aesthetic or TikTok presence on your website.
| Gallery | Description |
|---|---|
| Instagram feed gallery | Shows approved posts from your brand's connected Instagram accounts. Use it to bring your Instagram aesthetic to your website. |
| TikTok feed gallery | Shows approved posts from your brand's connected TikTok accounts. Use it to feature your brand's video content. |
Each social feed gallery is created when you connect the account.
General galleries
General galleries display all of your posts or all of your UGC posts.
| Gallery | Description |
|---|---|
| UGC gallery | Shows approved posts that belong to a creator's profile. |
| All posts gallery | Shows every approved post, from creators and from your brand. Use it to combine customer content with your own branded visuals. |
Custom galleries
Custom galleries let you build galleries for specific pages and sections. Choose from multiple content sources and combine them to create galleries for specific campaigns, pages, or purposes. A post shows in the gallery when it matches any one of the gallery's sources.
| Content source | What it does | Example use cases |
|---|---|---|
| Label | Shows posts that have specific labels applied | Create a "Summer Vibes" label to curate a seasonal homepage gallery, or label your best content "Featured" to handpick what appears. |
| Source | Shows posts from specific collection methods | Create a gallery only for your #BrandHashtag campaign, or showcase all uploads from a specific upload form or challenge. |
| Profile | Shows all posts from selected profiles | Build an ambassador landing page featuring all content from your top creators. |
| Product | Shows posts tagged with specific products | Create a gallery for a new product launch featuring all UGC of that product. |
| Product category | Shows posts with product tags in selected categories | Build a "Skincare" gallery that pulls in all posts featuring skincare products. |
| Product collection | Shows posts with product tags in selected collections. Available for Shopify, WooCommerce, and stores connected with a product feed | Build a gallery for a collection you promote on your homepage. |
| Product brand | Shows posts featuring products from selected brands | If you carry multiple brands, create brand-specific galleries for each. |
Create a post label for a specific use case and use it as a content source. This lets you handpick which posts appear in the gallery.
Create a custom gallery
- Navigate to UGC → On-site widgets
- Click New widget
- Select Custom gallery. The gallery opens on the Content tab.
- Click Add content
- Select your content sources. You can combine multiple sources.
- Optional: Click More and rename your gallery
- Click Save changes
From a profile: Open the profile in Profiles and click More → Create gallery. Cevoid creates a custom gallery with the profile as its content source, named after the profile, and opens it.
Exclude posts from a gallery
To show certain posts in some galleries but not others, use post labels.
Create a label such as "Exclude from homepage" or "Exclude from PDPs" and apply it to any posts you want to hide from specific galleries. Then set the gallery to exclude posts with that label.
- Navigate to UGC → On-site widgets and open the gallery
- Click the Content tab
- Click Exclude labels
- Select the labels applied to the posts you want to exclude
- Click Save changes
Pin posts to the top
By default, galleries show your newest posts first. Pinning locks specific posts to the beginning of the gallery, regardless of when they were posted.
On product, collection, category, and brand page galleries, each product, collection, category, or brand has its own pinned posts.
- Navigate to UGC → On-site widgets and open the gallery
- Click the Content tab
- On a product, collection, category, or brand page gallery, select which one to pin posts for
- Hover over a post in the preview or content list
- Click the pin icon
- Click Save changes
Pinned posts stay at the top even as new content is added to the gallery. New posts appear after your pinned posts.
You can pin up to 20 posts, or on the Grid layout as many as the gallery shows in its first load. To remove pins, select Unpin all posts in the menu next to Content, or click Unpin N posts on a product, collection, category, or brand page gallery.
Filter labels
Filter labels let visitors filter the gallery by topic using clickable filter buttons. Filters are based on post labels. Create labels for topics relevant to your customers and apply them to posts, then enable those labels as filters in the gallery. Filter labels are available on the Grid and Masonry layouts.
- Navigate to UGC → On-site widgets and open the gallery
- Click Design → Filter labels
- Set Filter labels to Enable
- Select which labels should appear as filters, and drag them into the order you want
- Optional: Set "All" button to Hide. By default, an All button lets visitors see all posts again after filtering.
- Click Save changes
| Setting | What it controls |
|---|---|
| Count | Show or Hide how many posts each filter contains |
| Label icon | Show or Hide any icons you've added to your post labels |
| Alignment | Position the filters Left, Center (default), or Right |
| Roundness | Round the corners of the filter buttons, 0 to 30 px |
| Active labels | Text color and Background for the currently selected filter |
| Inactive labels | Text color and Background for unselected filters |
Embed galleries on your website
Once your gallery is designed and configured, add it to your website. The method depends on your platform. The gallery script also loads cards.
Developers building a custom storefront or CMS block should use the UGC Widgets developer docs.
If you use the Cevoid: Shoppable UGC app on Shopify, you can add galleries with prebuilt theme blocks, with no code required.
If you have a headless Shopify setup, use the general implementation instructions instead.
Open the theme editor:
- Navigate to UGC → On-site widgets and open your gallery
- Click Embed gallery
- Click Open Shopify editor. Cevoid copies the Gallery ID and opens your theme editor, on the product template for a product page gallery.
On a vintage Shopify theme, the button isn't there: copy the Gallery ID and open the theme editor yourself.
Add the gallery block:
- Open the page where you want the gallery
- Add the Cevoid block for your gallery:
- Cevoid gallery: For any gallery on any page. Enable Display as product page gallery to show posts for the product on the page.
- Product-page gallery: For the product page gallery, on product pages
- Collection-page gallery: For the collection page gallery, on collection pages
- Paste the Gallery ID in Gallery ID
- Optional: Change the block's title and paragraph, or enable Hide section if gallery is empty to hide the block when the gallery has no posts to show
- Click Save
You can also add galleries with custom Liquid or HTML sections in your theme. Category and brand page galleries have no block, so paste their div code from the Embed gallery dialog in a Custom Liquid section. The page also needs the gallery script, which every Cevoid gallery block loads.
You can embed galleries on any HTML-based website with a div element. The page also needs Cevoid's gallery script, which the embed dialog doesn't show: see Add the gallery script.
This setup needs access to your site's code. If you don't edit it yourself, share these steps with your developer.
- Navigate to UGC → On-site widgets and open your gallery
- Click Embed gallery
- Copy the div code
- Paste the div code wherever you want the gallery to appear on your page
- Save and publish your changes
The div code depends on the gallery type:
<!-- All posts, UGC, social feed, and custom galleries -->
<div id="cevoid-container" data-gallery="GALLERY_ID"></div>
<!-- Product page gallery -->
<div id="cevoid-container" data-gallery="GALLERY_ID" data-product="auto"></div>
<!-- Collection page gallery -->
<div id="cevoid-container" data-gallery="GALLERY_ID" data-collection="auto"></div>
<!-- Category page gallery -->
<div id="cevoid-container" data-gallery="GALLERY_ID" data-category="auto"></div>
<!-- Brand page gallery -->
<div id="cevoid-container" data-gallery="GALLERY_ID" data-brand="auto"></div>To show one brand's posts on any page, replace auto with the brand in the brand page gallery's code, written as in the example the dialog shows under Embed for a specific brand.
If your site changes content without a full page reload, refresh the galleries with the script's helpers: see Runtime helpers in the developer docs.
If your development team has built a Cevoid gallery block in your CMS, you only need the Gallery ID.
- Navigate to UGC → On-site widgets and open your gallery
- Click Embed gallery
- Copy the Gallery ID
- In your CMS, add a Cevoid gallery block and paste the ID
Localization
Built-in gallery text, such as Load more and Upload a post, is edited in Settings → Translations under On-site widgets (Galleries and cards): see Translations. Captions, prices, and product links follow the market the gallery loads on: see Products and markets. With two or more languages, the gallery editor's header has a dropdown to preview each one.