Shopify Implementation guide for UGC widgets

How to add Cevoid's UGC widgets across your Shopify website

Totte Jönsson avatar
Written by Totte Jönsson
Updated over a week ago

This tutorial covers how you can add galleries and cards to your website.

To learn how to change the design and layout of galleries, read this guide.

To learn how to change the design of cards, head over to this guide.

Get the embed code or ID for a Gallery or a card

Before you embed a UGC widget to your website, copy the gallery ID.

  1. From the showcase tab, select the gallery you want to embed

  2. Press Embed gallery

  3. Copy the Gallery ID

Use the Gallery ID for Cevoid’s sections in the Shopify theme editor and the <div> code for all other interfaces.

Add a gallery with sections

In the Shopify theme editor,

  1. Select the Interface, page, or blog post you want to add a gallery to

  2. Press Add section

  3. Under apps, click Cevoid gallery

  4. Paste the Gallery ID in the Gallery ID field to the right

  5. Press Save

  6. Optional: Change, style, or remove the title and paragraph

  7. Click Save

Check the Display as product page gallery checkbox when you add the product page gallery to your product pages.

To add a gallery to a new page like a community wall, navigate to your Shopify Admin > Online Store > Pages and then click Add Page. Then navigate back to the Theme editor and execute the Add a gallery with sections steps.

Add Cevoid’s script

This step is not needed when working with sections

Before you add Cevoid’s widgets outside of sections, you must add the following Cevoid script to your theme.

<script type="module" src="" defer></script>

In the Shopify admin panel,

  1. Press Online Store

  2. Click the three dots symbol (...) on the theme you want to edit

  3. Press Edit code

  4. Navigate to the theme.liquid file

  5. Paste the script code before the </head> tag

  6. Click Save

Add a card or gallery with a custom Liquid section

In the Shopify theme editor,

  1. Click Add section

  2. Press Custom Liquid

  3. Paste the card/gallery <div> code in the custom liquid field to the right

  4. Optional: add custom CSS to limit the width of the card

  5. Click Save

Make sure you’ve added the Cevoid script before doing this. Otherwise, the card won’t be displayed correctly.

Did this answer your question?