FAQs with Autoplay Videos & Images

Demo Page

---

Install FAQs addon

Step 1: Click “Add-ons” tab and “Add addons” to open addon library.

Step 2: Under the “built-in” tab, type keyword “faq” to find FAQ addon easily > Click “Add”

Step 3: Hit “Pick live position” to put the FAQ addon into any position

Step 4: There are many positions you can insert the addon. Remember to hit “Save changes”.

Step 5: Click any item to open its settings

Insert Images & Autoplay Videos into FAQs

Create Metafield

Log into your Shopify admin, click “Settings” > “Custom data” > “Products” > “Add definition”

Give the metafield any name and select the metafield type “Multi-line text”. Don’t forget to hit button “Save”

📝 You can create as many metafields as you want. Remember to give each metafield a different name.

Upload videos and images on Shopify

Go to Content > Files > Click “Upload files” button > Upload images or videos you want to insert into FAQs.

Copy the link of the image/video you’ve just uploaded

Update content of metafields to your product

Navigate to “Products”, find and click the product you want to update content of metafields.

Scroll down to the bottom to find the “Metafield” area, you can find the metafield you already created. Click on the right box to fill content.

Case 1: You want to insert videos to FAQs

Here’s the code for you to copy and paste

<video muted="" loop="loop" autoplay="autoplay" playsinline="" src="video-link" style="width: 100%; max-width: 400px; border-radius: 20px;"></video><br>

Case 2: You want to insert images to FAQs

Here’s the code for you to copy and paste

<img alt="Product Image" src="image-link" style="width: 100%; max-width: 400px; border-radius: 20px;"><br>

Case 3: You want to insert both images & videos to FAQs

Here’s the code for you to copy and paste

<video muted="" loop="loop" autoplay="autoplay" playsinline="" src="video-link" style="width: 100%; max-width: 400px; border-radius: 20px;"></video><br>

<img alt="Product Image" src="image-link" style="width: 100%; max-width: 400px; border-radius: 20px;"><br>

In which,

• video-link is the video link copied before.
• image-link is the image link copied before.
• border-radius: 20px is the degree to round the corners of the images and videos (if you don’t want rounded images and videos, you can replace 20px with 0px).
• <br> is used for paragraph breaks and line breaks.

📝 You can insert multiple videos and images into the same text editor by copying the code snippet above multiple times.

Insert metafields in FAQs via Veda Builder

Click on the answer you want to add video or image to open its settings. Click the “bread” icon to pull up metafields.

Choose the right metafield you want to insert. If you can’t find the metafield you’ve just created, click on the circular icon to update the latest data.

It will auto-generate the code and you have to replace the part | metafield_tag by .value

When you’re done customizing, don’t forget to hit “Publish Page”.

You can see the result live on your store.

Tutorial Video