Skip to content

Instantly share code, notes, and snippets.

@shopifypartners
Created January 4, 2023 14:30
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shopifypartners/c0b126f6c5ee36c190fc481c8585fd43 to your computer and use it in GitHub Desktop.
Save shopifypartners/c0b126f6c5ee36c190fc481c8585fd43 to your computer and use it in GitHub Desktop.
Example of a Shopify theme section that displays both externally hosted videos and videos uploaded via the store admin
<div class='video-section'>
<h2>{{ section.settings.heading }}</h2>
{% for block in section.blocks %}
{% case block.type %}
{% when 'video-stored' %}
<div class="stored-video" {{ block.shopify_attributes }}>
{{ block.settings.video | media_tag }}
</div>
{% when 'external-video' %}
<div class ="external-video"{{ block.shopify_attributes }}>
{%- if block.settings.video_url.type == 'youtube' -%}
<iframe src="https://www.youtube.com/embed/{{ block.settings.video_url.id }}" class="youtube" title="{{ block.settings.description | escape }}" allow="autoplay; encrypted-media"></iframe>
{%- else -%}
<iframe src="https://player.vimeo.com/video/{{ block.settings.video_url.id }}" class="vimeo" title="{{ block.settings.description | escape }}" allow="autoplay; encrypted-media"></iframe>
{%- endif -%}
</div>
{% endcase %}
{% endfor %}
</div>
{% schema %}
{
"name": "Videos",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Custom content heading",
"default": "Title"
}
],
"max_blocks": 1,
"blocks": [
{
"name": "Shopify Hosted Video",
"type": "video-stored",
"settings": [
{
"type": "video",
"id": "video",
"label": "A Shopify-hosted video"
}
]
},
{
"name": "External Video",
"type": "external-video",
"settings": [
{
"type": "video_url",
"id": "video_url",
"accept": [
"youtube",
"vimeo"
],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"label": "URL",
"info": "Video plays in the page."
},
{
"type": "text",
"id": "description",
"label": "Video alt text",
"info": "Describe the video for customers using screen readers."
}
]
}
],
"presets": [
{
"name": "Videos"
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment