Otto Code Reference

otto-code-reference.liquid

{%- comment -%} 
Otto Metafield Data
---
Reference for integrating Otto into a theme.
{%- endcomment -%}

{% comment %}
Placement Name
---
The placement name is the name provided in the app. Given a placement name, you can reference all of it's data in metafields. 
The placement name can be hardcoded or referenced from a section schema.
{% endcomment %}

{% assign otto_placement_name = section.settings.otto_image_name | handle %}

{% comment %}
Metafield
---
The metafield stores all of the placements active data (visibility, header, button, etc). The data updates based on your scheduled content.
{% endcomment %}

{% assign otto_image_metafield = shop.metafields.otto-components[otto_placement_name].value %}

{% comment %}
Metafield Properties
---
Given the metafield you'll have access to the following properties.
{% endcomment %}

{{ otto_image_metafield.link }}
{{ otto_image_metafield.alt }}
{{ otto_image_metafield.extension }}
{{ otto_image_metafield.body_text }}
{{ otto_image_metafield.button_text }}
{{ otto_image_metafield.header_text }}
{{ otto_image_metafield.subheader_text }}
{{ otto_image_metafield.has_mobile_image }}
{{ otto_image_metafield.secondary_button_text }}
{{ otto_image_metafield.secondary_button_link }}
{{ otto_image_metafield.visible }}

{% comment %}
File Metafields
---
The image and mobile image files are stored in their own metafield file references.
{% endcomment %}

{% assign otto_image_file = shop.metafields.otto-files[otto_placement_name].value %}
{% assign otto_mobile_image_file_name = otto_placement_name | append: "-mobile" %}
{% if otto_image_metafield.has_mobile_image %}
  {% assign otto_mobile_image_file = shop.metafields.otto-files[otto_mobile_image_file_name].value %}
{% endif %}

{% comment %}
Example Image Markup
{% endcomment %}
<img src="{{ otto_image_file | image_url }}" alt="{{ otto_image_metafield.alt }}" />