model_
media | model_viewer_tag
returns string
Generates a Google model viewer component for a given 3D model.
{% for media in product.media %}
{% if media.media_type == 'model' %}
{{ media | model_viewer_tag }}
{% endif %}
{% endfor %}
Code
{% for media in product.media %}
{% if media.media_type == 'model' %}
{{ media | model_viewer_tag }}
{% endif %}
{% endfor %}Data
{
"product": {
"media": [
{
"media_type": "model"
}
]
}
}Output
<model-viewer src="//polinas-potent-potions.myshopify.com/cdn/shop/3d/models/o/eb9388299ce0557c/WaterBottle.glb?v=0" camera-controls="true" style="--poster-color: transparent;" data-shopify-feature="1.12" alt="Potion bottle" poster="//polinas-potent-potions.myshopify.com/cdn/shop/products/WaterBottle_small.jpg?v=1655189057"></model-viewer>
Output
<model-viewer src="//polinas-potent-potions.myshopify.com/cdn/shop/3d/models/o/eb9388299ce0557c/WaterBottle.glb?v=0" camera-controls="true" style="--poster-color: transparent;" data-shopify-feature="1.12" alt="Potion bottle" poster="//polinas-potent-potions.myshopify.com/cdn/shop/products/WaterBottle_small.jpg?v=1655189057"></model-viewer>Anchor to Model viewer attributes
Model viewer attributes
media | model_viewer_tag: attribute: string
By default, the model viewer component has the following attributes:
| Attribute | Value |
|---|---|
alt | [alt-text] - The media's alt text. |
poster | [preview-image-url] - The media's preview image URL. |
camera-controls | N/A - Allows for controls via mouse/touch. |
You can override these attributes, or any supported model viewer component attributes by adding a parameter that matches the attribute name, and the desired value.
{% for media in product.media %}
{% if media.media_type == 'model' %}
{{ media | model_viewer_tag: interaction-policy: 'allow-when-focused' }}
{% endif %}
{% endfor %}
Code
{% for media in product.media %}
{% if media.media_type == 'model' %}
{{ media | model_viewer_tag: interaction-policy: 'allow-when-focused' }}
{% endif %}
{% endfor %}Data
{
"product": {
"media": [
{
"media_type": "model"
}
]
}
}Output
<model-viewer interaction-policy="allow-when-focused" src="//polinas-potent-potions.myshopify.com/cdn/shop/3d/models/o/eb9388299ce0557c/WaterBottle.glb?v=0" camera-controls="true" style="--poster-color: transparent;" data-shopify-feature="1.12" alt="Potion bottle" poster="//polinas-potent-potions.myshopify.com/cdn/shop/products/WaterBottle_small.jpg?v=1655189057"></model-viewer>
Output
<model-viewer interaction-policy="allow-when-focused" src="//polinas-potent-potions.myshopify.com/cdn/shop/3d/models/o/eb9388299ce0557c/WaterBottle.glb?v=0" camera-controls="true" style="--poster-color: transparent;" data-shopify-feature="1.12" alt="Potion bottle" poster="//polinas-potent-potions.myshopify.com/cdn/shop/products/WaterBottle_small.jpg?v=1655189057"></model-viewer>Anchor to image_size
image_size
media | model_viewer_tag: image_size: string
Specify the dimensions of the model's poster image in pixels.
{% for media in product.media %}
{% if media.media_type == 'model' %}
{{ media | model_viewer_tag: image_size: '400x' }}
{% endif %}
{% endfor %}
Code
{% for media in product.media %}
{% if media.media_type == 'model' %}
{{ media | model_viewer_tag: image_size: '400x' }}
{% endif %}
{% endfor %}Data
{
"product": {
"media": [
{
"media_type": "model"
}
]
}
}Output
<model-viewer src="//polinas-potent-potions.myshopify.com/cdn/shop/3d/models/o/eb9388299ce0557c/WaterBottle.glb?v=0" camera-controls="true" style="--poster-color: transparent;" data-shopify-feature="1.12" alt="Potion bottle" poster="//polinas-potent-potions.myshopify.com/cdn/shop/products/WaterBottle_400x.jpg?v=1655189057"></model-viewer>
Output
<model-viewer src="//polinas-potent-potions.myshopify.com/cdn/shop/3d/models/o/eb9388299ce0557c/WaterBottle.glb?v=0" camera-controls="true" style="--poster-color: transparent;" data-shopify-feature="1.12" alt="Potion bottle" poster="//polinas-potent-potions.myshopify.com/cdn/shop/products/WaterBottle_400x.jpg?v=1655189057"></model-viewer>Was this page helpful?