Table Format

body{font-family:Arial,Helvetica,sans-serif;font-size:16px;} .smartsearchdemo__container {margin: 0 auto;min-width: 340px;max-width: 1280px;} .smartsearchdemo__container .search-field__container,.smartsearchdemo__container .conceptsearch-field__container {display: flex;justify-content: space-around;gap: 12px;} .smartsearchdemo__container .search-field__bar{display: flex;justify-content: space-around;background-color: #f5f7fa;padding: 0px 16px;align-items: center;flex: 1 0 0;border-radius: 100px;border: 1px solid #e6e9ed;transition: all .25s ease-in-out;} .smartsearchdemo__container .search-field__bar:focus,.smartsearchdemo__container .search-field__bar:hover,.smartsearchdemo__container .search-field__bar:focus-within,.smartsearchdemo__container .search-field__bar:target,.smartsearchdemo__container .search-field__bar:focus-visible, .smartsearchdemo__container .search-field__actions .search-field__actions__button:focus,.smartsearchdemo__container .search-field__actions .search-field__actions__button:hover,.smartsearchdemo__container .search-field__actions .search-field__actions-button:focus-within, .smartsearchdemo__container .search-field__actions .search-field__actions__button:target,.smartsearchdemo__container .search-field__actions .search-field__actions__button:focus-visible {border: 1px solid #119FF7;background: #FFF;} .smartsearchdemo__container .search-field__bar .search-field__bar__icon {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;margin: 0;max-width: 7.5rem;vertical-align: top;} .smartsearchdemo__container .search-field__bar .search-field__bar__link {color: #656D78;padding: 16px 24px;cursor: pointer;} .smartsearchdemo__container .search-field__bar .search-field__bar__divider{display: flex;border-left: 1px solid #e6e9ed;height: 100%;} .smartsearchdemo__container .search-field__actions .search-field__actions__button {display: flex;padding: 16px;align-items: center;align-self: stretch;border-radius: 100px;border: 1px solid #e6e9ed;background: #f5f7fa;transition: all .25s ease-in-out;cursor: pointer;} .smartsearchdemo__container .search-field__actions .search-field__actions__icon {width: 20px;height: 20px;} .smartsearchdemo__container .imagesearch-field__dialog {display: flex;position: relative;box-sizing: border-box;width: 1280px;padding: 32px;flex-direction: column;justify-content: center;align-items: flex-start;gap: 32px;border-radius: 25px;border: 1px solid #119ff7;background: #fff;} .smartsearchdemo__container .imagesearch-field__dialog .imagesearch-field__dialog__title {display: flex;justify-content: space-between;width: 100%;} .smartsearchdemo__container .imagesearch-field__dialog .imagesearch-field__dialog__title > h2 {display: block;margin: 0;color: #353b48 !important;font-size: 18px;font-style: normal;font-weight: 700;line-height: 100%;letter-spacing: .2px;} .smartsearchdemo__container .imagesearch-field__dialog .imagesearch-field__dialog__body {display: flex;width: 100%;flex-direction: column;} .smartsearchdemo__container .imagesearch-field__close {display: flex;align-items: center;justify-content: center;width: 56px;height: 56px;margin: 0;position: absolute;top: 1px;right: 1px;box-sizing: border-box;vertical-align: top;border: none;background: #fff;border-radius: 50%;cursor: pointer;} .smartsearchdemo__container .imagesearch-field__close:hover {background-color: #F5F7FA } function getRequestTypeIndex(e){const t=e.get(“requestType”);return t?”ConceptSearch”===t?1:”ImageSearch”===t?2:0:0}document.addEventListener(“DOMContentLoaded”,(function(){let e=getRequestTypeIndex(new URL(document.location).searchParams)||0;function t(t){if(t.preventDefault(),”keypress”===t.type&&13===t.which||”click”===t.type){let t=parseInt(this.dataset.tabIndex);t!==e&&document.querySelectorAll(“.smartsearchdemo__container .tab-container”).forEach((function(n){if(parseInt(n.dataset.tabIndex)===t)return document.querySelectorAll(“.tab-container”).forEach((function(e){e.style.display=”none”})),n.style.display=”block”,void(e=parseInt(n.dataset.tabIndex))}))}}document.querySelectorAll(“.tab-container”).forEach((function(t){parseInt(t.dataset.tabIndex)===e?t.style.display=”block”:t.style.display=”none”})),document.querySelectorAll(“.tab-switcher”).forEach((function(e){e.addEventListener(“click”,t),e.addEventListener(“keypress”,t)}))}));
input[type=”text”]:not(.facet__search) {border: none;background-color: transparent;} input[type=”text”]:not(.facet__search):focus, input[type=”text”]:not(.facet__search):hover, input[type=”text”]:not(.facet__search):focus-within, input[type=”text”]:not(.facet__search):target, input[type=”text”]:not(.facet__search):focus-visible {outline: none;border: none;background-color: transparent;} .imagesearch-field__drop-area {display:flex;padding:40px 24px;flex-direction:column;align-items:center;gap: 24px;align-self:stretch;border-radius:8px;border:1px solid #e6e9ed;} .imagesearch-field__drop-area.dragging-state {border: 1px dashed #119ff7;background: #f2faff;} .imagesearch-field__drop-area__icon {width: 100px;height:100px;} .imagesearch-field__drop-area.dragging-state > .imagesearch-field__drop-area__prompt-msg, .imagesearch-field__drop-area.dragging-state > .imagesearch-field__drop-area__upload-button, .imagesearch-field__drop-area.dragging-state > .imagesearch-field__drop-area__icon {pointer-events: none;visibility: hidden;} .imagesearch-field__drop-area__upload-button {display:flex;padding:12px 40px 12px 32px;align-items:center;gap:10px;color:#fff !important;background-color:#000;cursor:pointer;} .imagesearch-field__drop-area__prompt-msg {color:#000;text-align:center;font-size:18px;font-style:normal;font-weight:700;line-height:100%;letter-spacing:.2px;} .imagesearch-field__drop-area__drop-msg {pointer-events: none;color: #119ff7 !important;text-align:center;font-size:18px;font-style:normal;font-weight:700;line-height:100%;letter-spacing:.2px;} <!– CUSTOM TEMPLATE TO MODIFY THE VISUALS OF COMPONENT –>
Drop image

{{strings.dragImageMessage}}

{{strings.dropImageMessage}}

{{title}} {{currency price}} {{attributes.brand}} {{attributes.category}} {{attributes.color}}
<!– CUSTOM TEMPLATE TO MODIFY THE VISUALS OF COMPONENT –>
{{#if pinned}} {{/if}} {{#if (lt salePrice price)}} {{strings.sale}} {{/if}} {{#if rating}} {{/if}} {{#unless (eq price undefined)}}
{{#if (lt salePrice price)}} {{currency price}} {{currency salePrice}} {{else}} {{currency price}} {{/if}}
{{/unless}}
var HawkSearch = HawkSearch || {}; HawkSearch.config = { clientId: “3953cf87e0aa4a4eb9496a24d5a0fa84”, components: { ‘search-field’: { strings: { placeholder: ‘Search by Keyword’ } }, ‘conceptsearch-field’: { strings: { placeholder: ‘Search by a Concept’ } }, ‘imagefinder-field’: { strings: { placeholder: ‘Describe an image’ } }, ‘imagesearch-field’: { template: ‘imagesearch-field__template’, strings: { dragImageMessage: ‘Search By Image’, dropImageMessage: ‘Drop an image here’ } }, ‘search-results-item’: { template: ‘search-results-item__template’ } }, search: { url: window.location.pathname, endpointUrl: ‘https://essearchapi-na.hawksearch.com’ }, urlPrefixes: { assets: “https://dashboard-na.hawksearch.com”, content: “https://preview.hawksearch.net/outdoordemo” }, css: { customStyles: ‘custom-styles__template’ }, debug: true };
Close

Image Search

search