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:
- HTML source code
- Stylesheet (CSS) code
product.liquidtemplate of the store theme:
<div id="-spin-studio-active-wrapper"> <img id="-spin-studio-large-thumb" /> </div>
Then, you can optionally edit the style properties for the animated image.
SpinStudio creates a dedicated file for its style settings,
which is included into the main layout file
Keep in mind, however, that the width and height you specify for the
element are processed by SpinStudio to proportionally scale the original
image (the one that you upload in SpinStudio app).
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.