Skip to main content
Related articles: Galleries, Posts, UGC popup, Labels
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.
Card

​
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 on 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

​
Create a card

  1. Navigate to UGC -> On-site widgets
  2. Click New widget
  3. Select Card
  4. Click the Content tab
  5. Choose the post you want to display
  6. Optional: Click More and rename your card
  7. Click Save changes
You can also create a card directly from the Library by opening a post and clicking Create Card.

​
Design and customize cards

Each card can be customized to fit the page it’s embedded on.
Styling changes apply on the next page view after clicking Save changes.
Cards automatically inherit typography and fonts from your website once embedded.
  1. Navigate to UGC -> On-site widgets
  2. Select your card
  3. Click the Design tab
  4. Apply your changes
  5. Click Save changes

​
Card size

Control how the card fills its container.

​
Corner roundness

Adjust the corner radius in pixels to match your site’s design.

​
Username display

Show the creator’s username on the card for social proof. Card with username
Show the username for UGC posts to highlight real customers. Hide it for brand-created content.

​
Caption

Add text below the card. You can include dynamic values:
  • Username: The creator’s username
  • Product: Names of tagged products with clickable links
  • Original caption: The post’s original caption
Card with caption

​
Product hotspots

Hotspots highlight tagged products on the image. The product name and price display when visitors hover over each hotspot. Card with hotspots When you highlight a product, its name and price are always visible without requiring visitors to hover. Card with highlighted product

​
Hover effect

Add a hover effect when visitors mouse over the card. Only available when hotspots are disabled.

​
Click behavior

Control what happens when visitors click the card.
Customize how the popup appears when visitors click the card. See UGC popup for all popup settings.

​
Change the post in a card

Cards display static content, but you can change which post is shown at any time.
  1. Navigate to UGC -> On-site widgets and select the card
  2. Click the Content tab
  3. Select a new post
  4. 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.
Embed cards on any HTML-based website using Cevoid’s script and a div element.
  1. Add Cevoid’s script to your website’s <head> or <footer> (you only need to do this once):
  2. Navigate to UGC -> On-site widgets and select your card
  3. Click Embed card
  4. Copy the div code
  5. Paste where you want the card on your website
  6. Save and publish your changes