Steps to embed an HTML5 animations with Squarespace

05. Squarespace

Steps to embed

Step 1. Enter Shop Page

Click “Shop” button


Step 2. Add Product

Select product type


Step 3. Add Additional Info

Click an insert point to add a code block


Step 4. Select Code Block

Scroll to “MORE” area and select “Code”


Step 5. Input <iframe> Tag

Write <iframe> tag, assign animation url and size


<!-- input your animation link into src attribute -->
<iframe frameborder="0" width="800" height="800" src="https://dl.dropboxusercontent.com/u/65891609/DEMO/guide.page/mario/mario.html">
</iframe>


Step 6. The Result of Product Page

When product is added successfully, the page will look like:

    • Related Articles

    • 12. Website for ImageCreator

      Single Embedded Animation By embedding a standalone animation into the website you give customers multiple views in one window. There is no need to click through different thumbnails to try to find the image or angle of the product you are looking ...

    • 04. Magento 2

      PackshotCreator - OrteryCapture Step 1. Install the extension Open Magento root directory, and create app/code/ directory. Then unarchive module .zip file. Open “Terminal”, and go to Magento root directory. Input “php -f bin/magento module:enable -c ...

    • 02. eBay

      Steps to embed Step 1. Create a HTML animation using a PackshotCreator solution Step 2. Upload the entire animation folder to an online hosting server Step 3. In the folder on your server, look for the ‘*.html’ file Step 4. Cut and paste this link ...

    • 04. Shopify

      Embed SAAS Photo animation Step 1. Install Shopify App to Store Enter App page, then input your shopify domain to install Step 2. Confirm Installation Click install app button Step 3. Link SAAS Photo Animation Input SAAS Photo share link into image ...

    • 01. Bigcommerce

      Steps to embed Step 1. Enter “Add a Product” Page Click “Products” in the left side, and select “Add” Step 2. Open “HTML Source Editor” Click “HTML” button on the right top corner of description form Step 3. Input <iframe> Tag Write <iframe> tag, ...