Service Implementation (Script)

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)

Open Image Search using the currently viewed product as the context

<div class="resultsButtonsWrapper">
  <button class="openResultsModalButton" data-tab="similar">Similar</button>
  <button class="openResultsModalButton" data-tab="complementary">Complementary</button>
</div>

Yes (if Image Search is contracted and you intend to display the additional CTAs)

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-fashion-hub" 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 9 months ago