Skip to main content
Galleries are multi-post widgets that display your approved content in customizable layouts on your website. They automatically update with your latest posts and provide interactive shopping experiences through shoppable product tags. Galleries are available under **UGC -> On-site widgets **. Gallery On Product Page Pn
Related articles

​
How galleries work

Galleries dynamically display content based on your content source settings. When visitors click on posts, they see detailed popups with the full version of the post, creator information, captions, and shoppable product tags. Key features:
  • Automatic updates: Galleries refresh with new approved content that matches their filters
  • Shoppable experience: Product tags link directly to your product pages
  • Easy to design: The layout and design can be adjusted for each gallery
  • Localized: Adjusts language, links, currency, and prices based on what market they are displayed on (learn more about Markets here)
  • Responsive design: Adapts to different screen sizes and devices
  • Performance optimized: Images are lazy-loaded and cached for fast loading

​
Available galleries

Cevoid provides pre-configured galleries that cover popular use cases, additionally you can create custom galleries for other use cases.

​
Default galleries

Gallery nameDeescription
UGC GalleryDisplays all approved user-generated content from your profiles, meaning that all approved posts except for brand-created content will be displayed.
Product page galleryDynamic gallery that changes content based on the product page it’s displayed on, with intelligent fallback options to ensure relevant content is always shown.
Instagram Feed GalleryDisplays approved feed posts from your brand’s connected Instagram accounts.
TikTok Feed GalleryDisplays approved feed posts from your brand’s connected TikTok accounts.
All Posts GalleryDisplays all approved content regardless of source - combines UGC and brand content in one gallery.

​
Product Page Gallery

This is a dynamic gallery that changes content based on the product page it’s displayed on, with intelligent fallback options to ensure relevant content is always shown. Content priority order:
  1. Posts tagged with the exact variant
  2. Posts tagged with other variants of the same product
  3. Posts tagged with products from the same category (optional fallback)
  4. Posts from another gallery (optional fallback)
Posts will be presented in the following order for each product page:
  1. Posts tagged with the exact variant
  2. Posts tagged with other variants of the same product
  3. Posts tagged with products from the same category (optional fallback)
  4. Posts from another gallery (optional fallback) Pdp Gallery Fallback Pn
The whole widget will be collapsed/hidden on product pages when there are no posts tagged with the product and no fallback posts available.

​
Custom galleries

Create galleries tailored to specific campaigns and pages.
Creating a Post label for a specific use case and using it as a content source for a gallery allows you to handpick content for the gallery.
Available content sources for custom galleries:
Content sourceDescriptionExample use cases
Post labelsIncludes all posts that have the selected post labels added to them.
Learn more about Post labels here		- Gallery for a topic related to your brand (e.g. outdoor, skincare etc.)

- Handpick content for a gallery where you want to curate specific posts (e.g. for the home page)
SourceIncludes all posts from one or multiple methods of collecting content (upload forms, Instagram tags, hashtags, challenges, etc.)- Gallery dedicated for an Upload form or Challenge

- Hashtag specific gallery
ProfilesIncludes all posts created by the selected profile(s)- Gallery for ambassador-specific landing page with all of their posts
ProductsIncludes all posts tagged with selected products- Gallery with all posts related to a product drop
CategoriesIncludes all posts with product tags related to the selected categories- Category-specific galleries
BrandsIncludes all posts with product tags related to the selected brands- Brand-specific galleries
Follow these steps to create a custom gallery:
  1. Navigate to **UGC -> On-site widgets **
  2. Click New widget in the upper right corner
  3. Select Custom gallery
  4. Click the Content tab in the left menu
  5. Click Add content
  6. Select your content sources
  7. Optional: Click More in the upper right corner and rename your gallery
  8. Click Save Changes

​
Design and customize galleries

Styling changes will apply to the embedded gallery on the next page view when you click Save changes
Galleries automatically inherit the typography and fonts from your website once embedded
  1. Navigate to **UGC -> On-site widgets **
  2. Select your gallery
  3. Click the Design tab to access styling options
  4. Apply your changes
  5. Click Save changes

​
Available styling options

Layout options
  1. Click Gallery layout
  2. Select Grid
  3. Click Grid style to adjust the grid further
Grid specific layout options:
  • Even Grid (all posts are the same size) or Variable grid (one larger post per load)
  • Number of rows per device (desktop/tablet/mobile)
  • Number of columns per device (desktop/tablet/mobile)
  • Load more behavior
    • “Load more” button - Visitors can fetch more posts by clicking load more
      • Load more button color and corner roundness can be adjusted as well
    • No Load more - visitors cannot fetch more posts
    • Infinite scroll - More posts will automatically load as the visitor scrolls Gallery Layout Grid Jpe
  1. Click Gallery layout
  2. Select Slider
  3. Click Slider style to adjust the slider further
Slider specific layout options:
  • Number of posts per scroll (desktop/tablet/mobile)
  • Navigation arrow options
    • Displayed inside, outside, or centered on the slider’s edges
    • Color of the navigation arrows
    • Icon of the navigation arrows Gallery Layout Slider Pn
  1. Click Gallery layout
  2. Select Masonry
  3. Click Masonry style to adjust the masonry further
Masonry specific layout options:
  • Posts per row (desktop/tablet/mobile)
  • Load more behavior
    • Infinite scroll - More posts will automatically load as the visitor scrolls
    • “Load more” button - Visitors can fetch more posts by clicking load more
      • Load more button color and corner roundness can be adjusted as well
    • No Load more - visitors cannot fetch more posts Gallery Layout Masonry Jpe
  1. Click Gallery layout
  2. Select Collage
  3. Click Collage style to adjust the collage further
Collage specific layout options:
  • Collage style (5 or 2 posts)
  • Animate first image every 10 seconds (Yes/No) Gallery Layout Collage Jpe
Visual customization options
  1. Click Post style
  2. Select Tags
Tag style specific post design options:
  • Option for how product tag hotspots should be displayed (always or on-hover) Gallery Post Style Tags Jp
  1. Click Post style
  2. Select Product
Product style specific post design options:
  • Option to hide the price and currency Gallery Post Style Product Jp
  1. Click Post style
  2. Select Social
Social style specific post design options:
  • Hover effect - shows “Shop the look” text
    • Hover effect (None/Zoom/Overlay center/ Overlay bottom)
    • Hover background opacity
    • Hover text color
  • Placement of creator’s social handle/name (Inside post or below)
  • Alignment of creator’s social handle/name (left/center/right)
  • Icon before social media handles (social media’s icon/@ symbol / none) Gallery Post Style Social Jp
  1. Click Post style
  2. Select Clean
Clean style specific post design options:
  • Hover effect - shows “Shop the look” text
    • Hover effect (None/Zoom/Overlay center/ Overlay bottom)
    • Hover background opacity
    • Hover text color Gallery Post Style Clean Jp
Under Post style, you are also able to adjust:
  • Spacing between posts
  • The height of posts
  • Corner roundness of posts
Under Post style, you are also able to adjust what should happen when visitors click a post:
  • Open post popup (default)
  • Link to first tagged product

​
Adjust the look of the post popup

Navigate to Design -> Popup on a gallery to adjust the look of your post popup. The following adjustments can be made:
  • Display/hide claps/applause
  • Display/hide product hotspots in popup mode
  • Swap product image to secondary product image on product tag hover (on/off, on by default)
  • Mute video by default (on/off, off by default)
  • Popup background color and opacity
Ugc Popup Desktop Pn
Ugc Popup Mobile Pn

​
Activate/deactivate upload button

Galleries can include an upload CTA, clicking it will open a popup version of one of your upload forms. This allows your visitors to upload content to you directly from your website.
Uploaded posts will need to be approved from your Inbox before they appear in any of your widgets.
Follow these steps to activate/deactivate the upload button in a gallery:
  1. Navigate to **UGC -> On-site widgets ** and select the gallery
  2. Click Design -> Upload form
  3. Toggle on/off the Disable upload button setting (off by default)
The following upload button settings can be adjusted in the same view:
  • Upload posts to - Which one of your upload forms uploads should be routed to
  • Background color of the upload button
  • Position of the upload button (start/end)
You can include filters in the gallery to help visitors find inspiring posts more easily. The filters are based on Post labels and clicking one will display all posts that have that post label. Follow these steps to activate filters on a gallery:
  1. Navigate to **UGC -> On-site widgets ** and select the gallery
  2. Click Design -> Filter labels
  3. Toggle on Show filter labels
  4. Select the labels you want to include as filters
  5. Activate the Show “All” button to ensure that there is an option to see all of the gallery’s posts
The following styling and adjustment options are available for filters:
  • Alignment - Position of the filter relative to the gallery (Left/Center/Right)
  • Show count - Display number of posts available on each filter
  • Show label icons - Display any added post label icons before the label’s name
  • Corner roundness of each filter
  • Background color and text color for the active filter
  • Background color and text color for the inactive filters
  • Product link behavior (available under the Advanced section)
  • Available options: Open in same window (default) or Open in new tab
  • Option to autoplay the first video or not (available under the Advanced section)
  • We allow autoplaying max one video to minimize the gallery’s effect on your site performance
  • Overflow on html-tag (available under Global settings) and will apply to all galleries and cards
  • Yes by default
  • Disable this option if you have a sticky header or footer on your site to prevent the gallery from overflowing the html-tag

​
Pin posts in galleries

Posts are by default date sorted, displaying the latest post first, but you can always pin posts if you want to highlight specific posts before any new posts. Follow these steps to pin posts in a gallery:
  1. Navigate to **UGC -> On-site widgets ** and select the gallery
  2. Click the Content tab
  3. Hover on the posts you want to pin (either in the preview, or in the content list to the left)
  4. Click the icon
Pinned posts remain in their positions even as new content is added to the gallery

​
Embed galleries on your website

All galleries can be embedded easily by copying + pasting an ID or a div-code.
  • Shopify
  • General implementation
  • CMS block
Using Cevoid’s UGC Shopify app allows you to add galleries with prebuilt sections.
Refer to the general implementation instructions if you use a headless setup on Shopify.
Follow these steps to add a gallery to your Shopify storefront:
  1. Navigate to **UGC -> On-site widgets ** and select your gallery
  2. Click Embed gallery in the upper right corner
  3. Copy the Gallery ID
  4. Navigate to your theme editor in Shopify
  5. Open the page you want to add the gallery to
  6. Search for and add the “Cevoid gallery” section
    1. Use the “Product page gallery” when adding the product page gallery to ensure that the content is changed dynamically for each product page
  7. Paste in the gallery ID
  8. Adjust the section copy (optional) and layout settings
  9. Click Save