▶️ Insert media with Liquid

The Liquid snippets shown in the video are written out in the steps below, so you can copy them directly. The reference pages for each object and filter used are listed under related articles.

1. Access the Article or Product Page

• Log in to the backend of StoreConnect.

• Navigate via the menu: Custom Content > Articles > All Articles (or Products if editing a product page).

• Select the specific article or product you want to edit.

---

2. Open the Content Area for Editing

• Locate the Post Content section (for articles) or Product Features / Specifications / Warranty sections (for product pages).

• Click Edit to modify the text content.

• Select with your cursor where you’d like to insert the media.

---

3. Insert Image Using Liquid

• Use this Liquid snippet in the text area:

```liquid

{% assign image = all_media['spin-bike-home-hero'] %}
<img src="{{ image.url }}" alt="{{ image.alt_text }}" />
```

• To find the image identifier:

  • Go to the Media section.

  • Open the desired image.

  • Copy the identifier.

• Paste the identifier into the Liquid snippet.

• Save changes and refresh your live page — the image should now appear.

---

4. Insert Video Using Liquid

• Replace the previous snippet with this for a video:

```liquid

<video controls="controls" loop="loop" muted="muted" src="{{ all_media['sample-video'].url }}" width="100%" height="auto"></video>
```

• Get the identifier the same way as for images (via Media).

• Save and refresh to see the video embedded.

---

5. Embed a YouTube or Vimeo Video

• To embed an external video:

```liquid

{{ "MdAKrzOLQTg" | youtube }}
```

```liquid

{{ "65107797" | vimeo }}
```

• Replace the ID with the one from the video’s URL. For https://www.youtube.com/watch?v=MdAKrzOLQTg the ID is MdAKrzOLQTg; for https://vimeo.com/65107797 it is 65107797.

• Save and refresh the page — the embedded video will now be visible.

---

6. Insert a Content Block into Text

• To insert an existing content block from another page:

```liquid

{{ all_content_blocks["main-image-overlay-block"].render }}
```

• Get and include the identifier for the content block.

• Save and refresh — the content block will be displayed inside your article or product section.

---

7. Repeat for Product Pages

• The same steps apply for product pages:

  • Go to Products > Select a Product > Content.

  • Insert the Liquid code into sections like Product Features, Specifications, or Warranty.

  • Save and refresh to preview the media.