Integration Methods

By default, SpinStudio attempts to integrate itself into your theme by relying on the HTML markup of your product page. However, this is not always the best solution and may not even work for a custom-made store theme. Should you want to gain a better control over the integration process of SpinStudio, fine-tuning is available to you via numerous configuration options.

Getting a SpinStudio animated image into your store basically involves editing three parts of the store theme:

  1. HTML source code
  2. Stylesheet (CSS) code
  3. JavaScript source code
You can use the following HTML snippet to define a placeholder within the web page (SpinStudio places it into product.liquid template of the store theme:
<div id="-spin-studio-active-wrapper">
  <img id="-spin-studio-large-thumb" />

Then, you can optionally edit the style properties for the animated image. SpinStudio creates a dedicated file for its style settings, spin-studio.css.liquid, which is included into the main layout file theme.liquid. Keep in mind, however, that the width and height you specify for the <img> element are processed by SpinStudio to proportionally scale the original image (the one that you upload in SpinStudio app).

Finally, you need to add a reference to JavaScript code of SpinStudio:

<script type="text/javascript" src="">
It is automatically placed by SpinStudio to theme.liquid. Make sure this code is added after SpinStudio placeholder. Replace "NNN" in the URL above with the Id number of your product.

If you changed your store theme (replaced the old theme with a new one), you will need to enable SpinStudio for the new theme. Choose "Reapply" in your store's menu in the top bar of SpinStudio.


If SpinStudio fails to identify your new theme, it may not add the necessary code to the theme templates. In that case, you can either adjust the templates as described above, or contact us . We'll be happy to assist you in setting up and configuring SpinStudio for your store.