All Collections
Showcase content
UGC widgets for your website
Using gallery data-tags to display specific content
Using gallery data-tags to display specific content

How to use gallery data-tags to narrow down what content should be displayed in galleries

Erik Droh avatar
Written by Erik Droh
Updated over a week ago

When implementing galleries on your website you might want to add a gallery specific rules for what content should be displayed programatically. This is possible for some attributes with examples below.

Product

Used to only display content tagged with a specific product.

Add the data-product attribute to the div code and enter the product ID used in your integration and the gallery will only display content that is tagged with that product and it's variants. If you want to display content from a variant of a product, use the products variant ID.

Detailed guide can be found here.

Code example

<div id="cevoid-container" data-gallery="{ENTER_GALLERY_ID}" 
data-product="{ENTER UNIQUE PRODUCT ID}"></div>


Category

Only display content tagged with products from a specific category.

Add the data-category attribute to the div code and enter the product category name that you want to display. This name should be identical to the data in your integration option.

If you have a category called "Garden & Tools" or "Hockey" the value you enter in data-category should be identical to to that. Don't use a slugified version or a category id.

data-category="Garden & Tools" 

or

data-category="Hockey"

Note: If you're store uses multiple languages you need to use the category name of your default market.

Code example

<div id="cevoid-container" data-gallery="{ENTER_GALLERY_ID}"
data-category="{ENTER CATEGORY NAME}"
></div>


Brand

Only display content tagged with products from a specific brand.

Add the data-brand attribute to the div code and enter the products brand name that you want to display. This name should be identical to the data in your integration option.

If you have a brand called "New Balance" or "Nike" the value you enter in data-brand should be identical to to that. Don't use a slugified version or a brand id.

data-brand="New Balance" 

or

data-brand="Nike"

Code example

<div id="cevoid-container" data-gallery="{ENTER_GALLERY_ID}"
data-brand="{ENTER BRAND NAME}"
></div>


Members

Only display content that has been posted by a specific member.

To do this you need to copy the Member ID for a user which you can find on their member page in the Cevoid admin panel.

  1. Navigate to the Community panel

  2. Search to find the member you want to display and click the user

  3. Press the "More" dropdown and press "Copy Member ID"

  4. Paste it into the div code as in the code example below

Code example

<div id="cevoid-container" data-gallery="{ENTER_GALLERY_ID}"
data-member="{ENTER MEMBER ID}"
></div>

Note that data-member accepts multiple member ids. Simply comma separate them to fetch content from multiple members!


Note that these data-tags can NOT be combined to limit the content, only the last data tag will be used.

Other data-tags

We have also implemented a number of data-tags to modify which language and price is displayed in the galleries and widgets, these include:

Read more about how to use those here: Set language and currencies programmatically

Did this answer your question?