Cards
Create shoppable widgets that showcase a single image or video on your website.
Cards are single-post widgets that display one specific piece of content on your website. Use them to add a shoppable image or video anywhere on your site.
Navigate to UGC → On-site widgets to manage your cards.
Use Galleries to showcase multiple posts in a single widget.
How cards work
Cards display a single, specific post that you select. Unlike galleries, cards show static content and don't update automatically. When visitors click the card, a popup opens with the full post, creator information, caption, and shoppable product tags.
Key features:
- Static content: Cards display the exact post you select
- Photo or video: Display either images or videos
- Shoppable experience: Product tags link directly to your product pages
- Customizable design: Adjust the look for each card
- Localized: Adjusts language, links, currency, and prices based on the market
- Responsive design: Adapts to different screen sizes and devices
If the card's post is removed or is no longer approved, the card doesn't load on your website, and it shows Invalid post in UGC → On-site widgets. Cards need a UGC plan.
Create a card
From On-site widgets:
- Navigate to UGC → On-site widgets
- Click New widget
- Select Custom card
- Click the Content tab
- Select the post you want to display
- Optional: Click More and rename your card
- Click Save changes
From a post:
- Navigate to UGC → Library
- Open an approved post
- Click Create card. Cevoid creates a card with the post and opens it.
Design and customize cards
Each card can be customized to fit the page it's embedded on. Cards automatically inherit typography and fonts from your website once embedded. The Design tab has two groups: Post design, for the card's size, username, video, and caption, and Interaction, for hotspots, hover, and clicks.
- Navigate to UGC → On-site widgets
- Open your card
- Click the Design tab
- Apply your changes
- Click Save changes
Styling changes apply on the next page view after clicking Save changes.
Card size
The card size controls how the card fills its container.
| Option | Description |
|---|---|
| Fill parent width, dynamic height | Default. Card fills available width and adjusts height automatically. |
| Fixed width, dynamic height | Set a specific width for the card in Fixed width, from 100 to 3,000 px (default 600 px). |
| Fixed aspect ratio | Maintain a specific aspect ratio in Fixed aspect ratio: Landscape 16:9, Landscape 3:2, Landscape 5:4, Square 1:1, Portrait 4:5 (default), Portrait 2:3, or Portrait 9:16. |
| Cover parent element size | Use when placing the card over a server-side hosted image. |
Roundness
Adjust the card's corner radius in Roundness, from 0 to 30 px, to match your site's design.
Username display
Show the creator's username on the card for social proof.
| Setting | Options |
|---|---|
| Visible | Yes or No |
| Position | Top left, Top right, Bottom left, or Bottom right |
| Icon | Icon, @-sign, or None |
Show the username for UGC posts to highlight real customers. Hide it for brand-created content.
Caption
Add a caption below the card in Caption. Under Caption parameters, click Copy next to a value to include it:
{{username}}: The creator's username{{product_1}},{{product_2}}, and so on: Names of tagged products with clickable links. Products with a hotspot are marked (hotspot).- Original caption: The post's original caption
Caption isn't available with the Cover parent element size card size.
Video settings
For a video post, Video settings has Audio (Sound on or Muted) and Autoplay (Yes, the default, or No). A video that autoplays always starts muted.
Product hotspots
Hotspots and the settings below are in the Interaction group. Hotspots highlight tagged products on the card's image. The product name and price display when visitors hover over each hotspot.
| Setting | Options |
|---|---|
| Hotspots | Show (default) or Hide |
| Product focus | Select one product to always display (only available when hotspots are shown and the post has hotspots) |
When you set a product focus, its name and price are always visible without requiring visitors to hover.
Hover effect
Add a hover effect when visitors mouse over the card. The hover effect is only available when Hotspots is set to Hide. The Hover styling settings show with Overlay center and Overlay bottom.
| Setting | Options |
|---|---|
| Hover effect | None, Zoom, Overlay center, or Overlay bottom |
| Background | Color picker |
| Opacity | 0.2 to 0.7 |
| Hover text | Custom text (default: "Shop the look") |
| Text color | Color picker |
Click behavior
Control what happens when visitors click the card in On click.
| Option | Description |
|---|---|
| Open popup | Default. Opens the full post in a popup. |
| Link to product | Links to the tagged product you select in Product. |
| Link to Instagram | Opens the post on Instagram. A post that isn't from Instagram opens the popup. |
| Custom link | Add any URL in Custom link. If the post has a custom link, the card opens it instead, shown as Custom link from post in place of the field. |
| Do nothing | Disables click. Useful when you want visitors to only interact with hotspots. |
With Link to product, Link to Instagram, and Custom link, set Link behavior to Open in same tab (default) or Open in new tab.
Popup settings
With On click set to Open popup, the card's popup settings appear under Interaction → Popup settings. See Customize popup appearance.
Change the post in a card
Cards display static content, but you can change which post is shown at any time.
- Navigate to UGC → On-site widgets and open the card
- Click the Content tab
- Select a new post
- Click Save changes
Unlike galleries, cards don't automatically update. You must manually change the post when you want to display different content.
Embed cards on your website
Developers building a custom storefront or CMS block should use the UGC Widgets developer docs.
Cards use the same script as galleries. A page that already shows a Cevoid gallery has it. To add it on other platforms, see Add the gallery script.
Cevoid has no Shopify block for cards. Add a card with a Custom Liquid section in your theme.
- Navigate to UGC → On-site widgets and open your card
- Click Embed card
- Copy the div code
- In your Shopify theme editor, add a Custom Liquid section where you want the card
- Paste the div code in the section
- Click Save
The page also needs the gallery script. Every Cevoid gallery block loads it.
Embed cards 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 card
- Click Embed card
- Copy the div code
- Paste the div code where you want the card on your website
- Save and publish your changes
If your development team has built a Cevoid card block in your CMS:
- Navigate to UGC → On-site widgets and open your card
- Click Embed card
- Copy the Card ID
- In your CMS, add a Cevoid card block and paste the ID