📖
Sizebay
  • Initial page
  • Virtual Fitting Room
    • Introduction
    • Implementation directly on your code
    • Implementation via Tag Manager
    • Implementation (via API)
    • Implementation on Vtex IO
    • Implementation on Shopify
    • Checking the Installation
    • Custom Implantation Events
    • Configuration Profiles
    • Understanding Responsivity
  • Data Integration
    • XML Feed Product Integration
    • API Product Integration
    • Onpage Product Integration
    • Return Data Integration
    • Product Variants Integration
      • V1
    • Categories accepted by the Integration
    • Size Tailor
  • Shopping tracker
    • Introduction
    • Sizebay Tracker Script (Client Implementation)
    • Sizebay Tracker Script (Sizebay Implementation)
    • Sizebay Tracker via API (Easy Setup)
    • Sizebay Tracker - Supported Countries and Currencies
    • Platforms
      • Shopify
        • Technical Note
      • Prestashop
      • Magento
      • WooCommerce
  • FASHION HUB
    • Introduction
    • XML Feed Product Integration
    • API Product Integration
    • Implementation directly on your code
Powered by GitBook
On this page
  • 1. Creating the Necessary HTML Elements
  • 2. Script Injection

Was this helpful?

  1. FASHION HUB

Implementation directly on your code

1. Creating the Necessary HTML Elements

Add the HTML elements below to your pages, depending on which Fashion Hub modules your store will support:

Element Purpose
Element Type
HTML Snippet

Container for Fashion Hint – Similar

<div>

<div id="fashion-hint-similar"></div>

Container for Fashion Hint – Complementary

<div>

<div id="fashion-hint-complementary"></div>

Open Image Search button

<button>

<button id="openSearchModalButton">Search by Image</button>

Modal for Image Search

<div>

<div class="modal" id="imageSearchModal"><br>&nbsp;&nbsp;<div class="modal-content small"><br>&nbsp;&nbsp;&nbsp;&nbsp;<button class="close-button" id="closeSearchModalButton">&times;</button><br>&nbsp;&nbsp;</div><br></div>

Modal for Image Search Results

<div>

<div class="modal" id="imageSearchResultsModal"><br>&nbsp;&nbsp;<div class="modal-content large"><br>&nbsp;&nbsp;&nbsp;&nbsp;<button class="close-button" id="closeResultsModalButton">&times;</button><br>&nbsp;&nbsp;&nbsp;&nbsp;<!-- The iframe will be dynamically injected here --><br>&nbsp;&nbsp;</div><br></div>

2. Script Injection

To enable Sizebay's features on your store, you must include the following script in the <head> of your HTML:

<script defer id="sizebay-vfr-v4" src="https://static.sizebay.technology/TENANT_ID/fh_prescript.js"></script>

Replace TENANT_ID with your actual tenant ID. If you don't have it, please contact our team. This script is required for the initialization of all Fashion Hub modules.

Last updated 4 days ago

Was this helpful?