FAQs with Images & Autoplay Videos

Estimated reading: 3 minutes 306 views

Install FAQs sections

Click “Add section” to open section library, type keyword “faq” to find FAQ section easily.

“Install” FAQ section template you want to add to the page.

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.