Otto - Developers

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'
            %}
        

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.