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
Avilable galleries
Cevoid provides pre-configured galleries that cover popular use cases, additionally you can create custom galleries for other use cases. Default galleries| Gallery name | Deescription |
|---|---|
| UGC Gallery | Displays all approved user-generated content from your profiles, meaning that all approved posts except for brand-created content will be displayed. |
| Product page gallery | 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. |
| Instagram Feed Gallery | Displays approved feed posts from your brand’s connected Instagram accounts. |
| TikTok Feed Gallery | Displays approved feed posts from your brand’s connected TikTok accounts. |
| All Posts Gallery | Displays 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:- Posts tagged with the exact variant
- Posts tagged with other variants of the same product
- Posts tagged with products from the same category (optional fallback)
- Posts from another gallery (optional fallback)
How the product page gallery fallback behavior works
How the product page gallery fallback behavior works
Posts will be presented in the following order for each product page:
- Posts tagged with the exact variant
- Posts tagged with other variants of the same product
- Posts tagged with products from the same category (optional fallback)
-
Posts from another gallery (optional fallback)
What happens when there are no posts for a product
What happens when there are no posts for a product
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.
| Content source | Description | Example use cases |
|---|---|---|
| Post labels | Includes 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) |
| Source | Includes 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 |
| Profiles | Includes all posts created by the selected profile(s) | - Gallery for ambassador-specific landing page with all of their posts |
| Products | Includes all posts tagged with selected products | - Gallery with all posts related to a product drop |
| Categories | Includes all posts with product tags related to the selected categories | - Category-specific galleries |
| Brands | Includes all posts with product tags related to the selected brands | - Brand-specific galleries |
- Navigate to UGC -> On-site widgets
- Click New widget in the upper right corner
- Select Custom gallery
- Click the Content tab in the left menu
- Click Add content
- Select your content sources
- Optional: Click More in the upper right corner and rename your gallery
- 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
- Navigate to UGC -> On-site widgets
- Select your gallery
- Click the Design tab to access styling options
- Apply your changes
- Click Save changes
Available styling options
Layout optionsGrid layout
Grid layout
- Click Gallery layout
- Select Grid
- Click Grid style to adjust the grid further
- 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
-
“Load more” button - Visitors can fetch more posts by clicking load more
Slider layout
Slider layout
- Click Gallery layout
- Select Slider
- Click Slider style to adjust the slider further
- 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
Masonry layout
Masonry layout
- Click Gallery layout
- Select Masonry
- Click Masonry style to adjust the masonry further
- 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
Collage layout
Collage layout
- Click Gallery layout
- Select Collage
- Click Collage style to adjust the collage further
- Collage style (5 or 2 posts)
-
Animate first image every 10 seconds (Yes/No)
Post style: Tags
Post style: Tags
- Click Post style
- Select Tags
-
Option for how product tag hotspots should be displayed (always or on-hover)
Post style: Product
Post style: Product
- Click Post style
- Select Product
-
Option to hide the price and currency
Post style: Social
Post style: Social
- Click Post style
- Select Social
-
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)
Post style: Clean
Post style: Clean
- Click Post style
- Select Clean
- Hover effect - shows “Shop the look” text
- Hover effect (None/Zoom/Overlay center/ Overlay bottom)
- Hover background opacity
-
Hover text color
Post height, corner roundness and spacing between posts
Post height, corner roundness and spacing between posts
Under Post style, you are also able to adjust:
- Spacing between posts
- The height of posts
- Corner roundness of posts
Post click behavior - What should happen when a visitor clicks a post
Post click behavior - What should happen when a visitor clicks a post
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
How the post popup looks on desktop
How the post popup looks on desktop
How the post popup looks on mobile
How the post popup looks on mobile
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.
- Navigate to UGC -> On-site widgets and select the gallery
- Click Design -> Upload form
- Toggle on/off the Disable upload button setting (off by default)
- 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)
Add filters to the gallery
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:- Navigate to UGC -> On-site widgets and select the gallery
- Click Design -> Filter labels
- Toggle on Show filter labels
- Select the labels you want to include as filters
- Activate the Show “All” button to ensure that there is an option to see all of the gallery’s posts
- 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
Additional gallery settings
- 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:- Navigate to UGC -> On-site widgets and select the gallery
- Click the Content tab
- Hover on the posts you want to pin (either in the preview, or in the content list to the left)
- 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.Using Cevoid’s UGC Shopify app allows you to add galleries with prebuilt sections.Follow these steps to add a gallery to your Shopify storefront:
Refer to the general implementation instructions if you use a headless setup on Shopify.
- Navigate to UGC -> On-site widgets and select your gallery
- Click Embed gallery in the upper right corner
- Copy the Gallery ID
- Navigate to your theme editor in Shopify
- Open the page you want to add the gallery to
- Search for and add the “Cevoid gallery” section
- Use the “Product page gallery” when adding the product page gallery to ensure that the content is changed dynamically for each product page
- Paste in the gallery ID
- Adjust the section copy (optional) and layout settings
- Click Save