# Spritefy Viewer
**Source:** https://beyondspace.studio/spritefy-viewer
**Language:** French (France)

---

# Spritefy Viewer

#### BRING YOUR PRODUCTS TO LIFE WITH 360° VIEWER FOR SQUARESPACE

Elevate your online store by showcasing products in full 360-degree views, giving customers an immersive and interactive experience. With the 360-degree viewer plugin, your product imagery will stand out from the competition while maintaining high-quality performance.

Coming soon

### Sample models

### ELEVATE PRODUCT DISPLAY

Bring your products to life with a 360-degree viewer that allows customers to interact with your items from every angle  
This plugin seamlessly integrates with Squarespace's image CDN and requires coding.

##### Unlimited Storage & Bandwidth

Since images are stored on Squarespace's CDN, there's need to worry about bandwidth limitations or storage issues. This ensures seamless performance for unlimited 360° models.

##### High-Resolution Imagery

Compared to GIF animations, the 360-degree viewer allows you to display high-resolution images without sacrificing quality or file size. Enjoy crisp, clear visuals that load faster and retain their detail.

##### Optimized for Any Device

The 360-degree viewer is fully responsive, making it mobile-optimized for smooth interactions, matter what device your customers use. This ensures a consistent experience across devices.

*Disclaimer: We do not provide 360-degree photography services. To create your 360-degree images, please consult a local photographer with experience in this type of product photography.*

## Configuration facile

The 360-degree viewer plugin is designed to work right out of the box  
With just a few steps, you can enable smooth, interactive 360-degree images on your site, enhancing user experience effortlessly.

*10 STEPS*

1. Edit your page and insert an Image block

![Step 1 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=1&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

2. Cliquez sur **Image**

![Step 2 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=2&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

3. Click **Add an Image**

![Step 3 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=3&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

4. Click **Upload File**

![Step 4 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=4&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

5. Click **Attach Link**

![Step 5 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=5&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

6. Paste the **Spriteify URL**

![Step 6 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=6&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

7. Save the Image changes

![Step 7 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=7&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

8. Click **Enregistrer**

![Step 8 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=8&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

9. Click **Exit**

![Step 9 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=9&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

10. That's it. You're done.

![Step 10 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2404373&step_number=10&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

### Here's an interactive tutorial

*\*\* Best experienced in Full Screen (click the icon in the top right corner before you begin) \*\**

**Next step**

**For Image blocks**

1. Create Sprites: Prepare the individual images for your animation and combine them into a single spritesheet.
2. Insert Image: Use the Image block to add the viewer to your page.
3. Attach Spriteify URLs: Attach link to Image block in order to activate the view

Detail instruction of URL params can be found on this tutorial

## Foire aux questions

*FAQs coming soon.*