09. Yahoo Small Business
Steps to embed
Step 1. Download Theme
Click “Design” in navigator menu
Click “Themes” button
Click “Download” button
Step 2. Modify Theme for Desktop
Uncompress Theme Zip File
Rename Theme In ‘meta/meta.json’
Rename theme so that we can distinguish from other themes.
Find “ysb-mod-product” Module In “pages/product.duct”
Set _view attribue “layout2”
Animation will be placed in description section, only “layout2” both show description section in desktop and mobile.
Modify ‘modules/ysb-mod-product/templates/layout2.dust’
Turn off automatic HTML encoding for description content.
Add Script At The End Of layout2.dust
Parse description text as HTML.
Step 2. Modify Theme for Desktop
Uncompress Theme Zip File
Rename Theme In ‘meta/meta.json’
Rename theme so that we can distinguish from other themes.
Find “ysb-mod-product” Module In “pages/product.duct”
Set _view attribue “layout2”
Animation will be placed in description section, only “layout2” both show description section in desktop and mobile.
Modify ‘modules/ysb-mod-product/templates/layout2.dust’
Turn off automatic HTML encoding for description content.
Add Script At The End Of layout2.dust
Parse description text as HTML.
<script>
(function () {
var description;
description = document.getElementById('pdv-detailed-description');
if (description) {
description.innerHTML = description.textContent;
} else {
console.warn('detailed description section does not exist');
}
})();
</script>
Step 3. Modify Theme for Mobile
Find “ysb-mod-product” Module In “pages/product.mobile.duct”
Set _view attribue “layout2”
Modify ‘modules/ysb-mod-product/templates/layout2.mobile.dust’
Add class=”active” and change “+” to “-“
Change display state.
Add style=”display:block;” for element which id is “pdv-detailed-description”
Display description section at the beginning.
Add “|s” after description
Turn off automatic HTML encoding for description content.
</div>
Add Script At The End Of layout2.mobile.dust
Parse description text as HTML.
<script>
(function () {
var description;
description = document.getElementById('pdv-detailed-description');
if (description) {
description.innerHTML = description.textContent;
$(description).off('touchstart');
} else {
console.warn('detailed description section does not exist');
}
})();
</script>
Step 4. Upload Theme
Click “Upload theme”
Zip The Modified Theme And Upload
Publish The Modified Theme And Back To Dashboard
Step 5. Add Product
Click “Add Product”
Input <iframe> Tag In Long Description
<!-- input your animation link into src attribute -->
<iframe frameborder="0" width="100%" height="800" src="https://truview.ortery.com/360HTMLJavaScript/360Finals/wine-bottle-spin-photo/wine-bottle-spin-photo.html">
</iframe>
Step 6. Save Product
After all product information is finished, click “Save” button
Step 7. 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, ...