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>


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' %}
If no component is specified then the default image code will render in the page.
The active image alt text.
The url where the image links to.
The extension/format of the active image. jpg, gif, or png.
The header text of the active image.
The subheader text of the active image.
The body text of the active image.
The button text of the active image.
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.
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.