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
HTML Snippet
Mandatory

Container for Fashion Hint – Similar

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

Yes (if Fashion Hint is contracted)

Container for Fashion Hint – Complementary

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

Yes (if Fashion Hint is contracted)

Open Image Search button

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

Yes (if Image Search is contracted)

Modal for Image Search

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

Yes (if Image Search is contracted)

Modal for Image Search Results

<div class="modal" id="imageSearchResultsModal">
  <div class="modal-content large">
    <button class="close-button" id="closeResultsModalButton">&times;</button>
  </div>
</div>

Yes (if Image Search is contracted)

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

Was this helpful?