The below information will provide some additional guidance for using Otto in your theme.

Snippet & Output

Snippet: We'll provide you with the below snippet once you create a new image. This snippet needs to be placed in your theme files wherever you want the image to appear.

{% render 'otto', image: 'image-name' %}

Output: The following code will be rendered in your template once a page is loaded. If no link is entered for an image then the image tag won't be wrapped in 'a' tags.

<a href=""><img src="" alt="" /></a>

Components

If you ever want to eject from using the default code that's rendered then you can access each individual component that has been scheduled. Components are individual pieces of the scheduled image. See below for a complete list.

{% render 'otto', image: 'image-name', component: 'component-name' %}
Component
Description
default
If no component is specified then the default image code will render in the page.
alt
The active image alt text.
link
The url where the image links to.
extension
The extension/format of the active image. jpg, gif, or png.
header_text
The header text of the active image.
subheader_text
The subheader text of the active image.
body_text
The body text of the active image.
button_text
The button text of the active image.
file_name
The name of the active image file in Shopify files system. You can use this name in combination with Shopify's file_url filter to render the file in different sizes.
file_src
The src url of the file.

Testing the App

We offer free app testing in Shopify Partner development stores. This is so partners can test and use the app before installing it on a client site. Partners are limited to using 2 Otto images. Install the app through the app store and we'll automatically know if you are installing it in a partner store.