{% assign widgetNameTranslationLabel = 'recommendation.' | append: widgetId %}{% assign widgetTitle = '' %}{% if widgetDesignSettings.titleAlignment != '' %} {% assign widgetTitle = widgetTitle | append: 'boost-sd__recommendation-title--' | append: widgetDesignSettings.titleAlignment %}{% endif %}

{{ widgetNameTranslationLabel | translate: translations, widgetName }}

{% if widgetDesignSettings.layoutDisplay == 'carousel' %}

{% for product in products %}

{% capture domain %}{{ widgetDesignSettings.tenantId }}{% endcapture %} {% if product.original_images != nil %} {% assign imageArray = product.original_images %}{% else %} {% assign imageArray = product.images_info %}{% endif %}{% assign productId = product.id %}{% if product.variant_id %} {% assign productId = product.variant_id %}{% endif %}{% assign filterOptionIdImageBaseOn = 'pf_opt_color' %} {% capture filterOptionIdImageBaseOn %}pf_opt_color{% endcapture %}{% assign optionName = filterOptionIdImageBaseOn | replace: 'pf_opt_', '' %}{% assign filterValues = request[filterOptionIdImageBaseOn] %}{% assign selectedVariantImageByFilterOption = nil %}{% for item in product.variants %} {% for filterValue in filterValues %} {% assign optionNameValue = optionName | append: ":" | append: filterValue | strip %} {% if item.merged_options contains optionNameValue %} {% if item.image %} {% assign selectedVariantImageByFilterOption = item.image %} {% break %} {% endif %} {% endif %} {% endfor %} {% if selectedVariantImageByFilterOption != nil %} {% break %} {% endif %}{% endfor %}{% assign colorMapping = '' %} {% assign lsImage = '' %} {% assign reviewStar = '' %} {% assign metafields = product.metafields %}{%- for metafield in metafields -%} {%- if metafield.key == 'color_mapping' -%} {%- assign colorMapping = metafield.value -%} {%- endif -%} {%- if metafield.key == 'lifestyle_image' -%} {%- capture lsImg -%}{{product.handle}}-ls.jpg{%- endcapture -%} {%- assign lsImage = '//' | append: domain | append: '/cdn/shop/files/' | append: lsImg -%} {%- endif -%} {%- if metafield.key == 'badge' and metafield.namespace == 'judgeme' -%} {%- capture reviewStar -%}{{metafield.value}}{%- endcapture -%} {%- endif -%}{% endfor %}{% capture productData %} { "handle": "{{ product.handle }}", "type": "{{ product.product_type }}", "variantId": "{{ product.variant_id }}", "splitProduct": "{{ product.split_product }}", "priceMin": "{{ product.price_min }}", "priceMax": "{{ product.price_max }}", "compareAtPriceMin": "{{ product.compare_at_price_min }}", "compareAtPriceMax": "{{ product.compare_at_price_max }}", "images": {{ imageArray | json | escape }}, "options_with_values": {{ product.options_with_values | json | escape }}, "selectedVariantImageByFilterOption": "{{ selectedVariantImageByFilterOption | escape }}", "category": "{{ product.product_type | escape }}", "tags": {{ product.tags | json | escape }}, "mapping": {{ colorMapping | json }}, "lsImage": {{ lsImage | json }} }{% endcapture %}{%- capture borderLayoutSetting %}noBorder{% endcapture -%}{% if borderLayoutSetting == 'noPadding' %} {% assign borderLayoutItem = 'no-padding' %}{% elsif borderLayoutSetting == 'hasPadding' %} {% assign borderLayoutItem = 'border-has-padding' %}{% elsif borderLayoutSetting == 'noPaddingImage' %} {% assign borderLayoutItem = 'border-no-padding-image' %}{% else %} {% assign borderLayoutItem = 'no-border' %}{% endif %}{% assign productLocale = '' %}{% if request.current_locale != "" or request.current_locale != null %} {% assign productLocale = request.current_locale %}{% endif %}{%- assign htoEnable = true -%} {%- if product.available == false -%} {%- assign htoEnable = false -%} {%- endif -%}{%- assign hasSize = false -%} {%- assign htoEnable = true -%} {%- assign sizeTagPrefix = 'Sizes_' -%} {%- assign isPC20B = false -%} {%- assign sizeMappingValue = 'NewSize_Youth 4-7:NewSize_Youth+4-7, NewSize_Youth 8-12:NewSize_Youth+8-12, NewSize_Youth 13-17:NewSize_Youth+13-17, NewSize_Adult Narrow:NewSize_Adult+Narrow, NewSize_Adult Average:NewSize_Adult+Average, NewSize_Adult Wide:NewSize_Adult+Wide' -%} {%- if sizeMappingValue != '' -%} {%- assign sizeMappingArr = sizeMappingValue | split: ', ' -%} {%- assign disable_hto_tag = 'No-HTO' -%} {%- for sizeMapping in sizeMappingArr -%} {%- assign sizeTagVal = sizeMapping | split: ':' | first -%} {%- if product.tags contains sizeTagVal -%} {%- assign hasSize = true -%} {%- assign isPC20B = true -%} {%- endif -%} {%- if hasSize == false -%} {%- for option in product.options_with_values -%} {%- if option.name == 'Size' -%} {%- for value in option.values -%} {%- assign hasSize = true -%} {%- endfor -%} {%- endif -%} {%- endfor -%} {%- endif -%} {%- if product.tags contains settings.disable_hto_tag -%} {%- assign htoEnable = false -%} {%- endif -%} {%- endfor -%} {%- endif -%}

{%- if htoEnable -%}

{%- capture htoSize -%} {%- if isPC20B -%} {%- for sizeMapping in sizeMappingArr -%} {%- assign sizeTitle = sizeMapping | split: ':' | first -%} {%- assign sizeTag = sizeTitle | replace: 'NewSize_', 'NewSize:' -%} {%- for tag in product.tags -%} {%- if tag contains sizeTag -%} {{ sizeTitle | replace: 'NewSize_', '' }} {%- endif -%} {%- endfor -%} {%- endfor -%} {%- else -%} {%- assign sizeFound = false -%} {%- for option in product.options_with_values -%} {%- if option.name == 'Size' -%} {% for value in option.values %} {%- assign sizeFound = true -%} {%- capture sizeVal %}Average ({{value}}){% endcapture -%} {%- assign sizeVal = sizeVal | split: ' [' | first -%} {%- assign sizeVal = sizeVal | split: ' (' | last | replace: ')', '' -%} {{ value }} {% endfor %} {%- else -%} {%- endif -%} {%- endfor -%} {%- if sizeFound == false -%} Default Size {%- endif -%} {%- endif -%} {%- endcapture -%}

Try at home for free is in your try at home No available option for try at home

Select size to add Home Try-on kit

1 of 4 pairs added to your
Home Try-on cart!

You can see these in your shopping cart at any time

Back to shopping

Your Home Try-on cart is full
(1 of 4 pairs)

Visit your cart to change your selections

This item has been removed
from your Home Try-on cart

{%- endif -%} {{ product.title | escape }} {%- capture aspectRatioSetting %}natural{% endcapture -%}{% capture hoverEffect %}none{% endcapture %}{% assign productImages = product.images_info %}{% if product.split_product %} {% assign productImages = product.original_images %}{% endif %}

{% assign effectClasses = '' %} {% if hoverEffect == 'reveal-second-image-and-zoom-in' %} {% assign effectClasses = effectClasses | append: 'boost-sd__product-image-wrapper--zoom-in' %} {% if productImages.size > 1 %} {% assign effectClasses = effectClasses | append: ' boost-sd__product-image-wrapper--has-second-image' %} {% endif %} {% endif %} {% if hoverEffect == 'reveal-second-image' and productImages.size > 1 %} {% assign effectClasses = effectClasses | append: 'boost-sd__product-image-wrapper--has-second-image' %} {% endif %} {% if hoverEffect == 'zoom-in' %} {% assign effectClasses = effectClasses | append: 'boost-sd__product-image-wrapper--zoom-in' %} {% endif %} {% assign aspectRatio = '' -%} {% if aspectRatioSetting == 'natural' -%} {% assign imageWidth = product.images_info[0].width -%} {% assign imageHeight = product.images_info[0].height -%} {% assign aspectRatio = aspectRatio | append: 'aspect-ratio: ' | append: imageWidth | append: '/' | append: imageHeight -%} {% endif -%}

{% assign firstImageSrc = '' -%} {% if selectedVariantImageByFilterOption != nil -%} {% assign firstImageSrc = selectedVariantImageByFilterOption -%} {% else -%} {% assign firstImageSrc = product.images_info[0].src -%} {% endif -%} {% assign widthParam = "&width=" -%} {% assign widths = "200,300,400,500,700,800" | split: "," -%} {% if request.device contains 'mobile' -%} {% assign maxWidth = 400 -%} {% else -%} {% assign maxWidth = 700 -%} {% endif -%} {% if request.productImageWidth != blank -%} {% assign imageWidth = request.productImageWidth | plus: 0 -%} {% if imageWidth > maxWidth -%} {% assign maxWidth = imageWidth -%} {% endif -%} {% endif -%} {% if product.images_info[0] -%} {% capture srcset -%} {% for width in widths -%} {% assign widthNo = width | plus: 0 %} {% if widthNo < maxWidth -%} {{ firstImageSrc }}{{ widthParam }}{{ width }} {{ width }}w, {% else -%} {{ firstImageSrc }}{{ widthParam }}{{ maxWidth }} {{ maxWidth }}w {% break -%} {% endif -%} {% endfor -%} {% endcapture -%} {% assign productPerRow = 4 -%} {% if request.productPerRow != blank -%} {% assign productPerRow = request.productPerRow | plus: 0 -%} {% endif -%}{%- assign imgSizesVal = '1367:352, 1281:279, 991:257, 751:272, 641:318, 481:263, 361:418, 298' -%}{%- assign imgSrc = product.images_info[0].src -%}{%- assign imgSizesArray = imgSizesVal | split: ', ' -%}{%- assign srcset = '' -%}{%- assign sizes = '' -%}{%- for size in imgSizesArray -%} {%- assign parts = size | split: ':' -%} {%- if parts.size == 2 -%} {%- assign maxWidth = parts[0] -%} {%- assign imgWidth = parts[1] -%} {%- else -%} {%- assign maxWidth = parts[0] -%} {%- assign imgWidth = parts[0] -%} {%- endif -%} {%- assign imgUrl = imgSrc | image_url: width: imgWidth -%} {% capture imgUrl -%}{{imgSrc}}&width={{imgWidth}}{% endcapture -%} {%- if srcset != '' -%} {%- assign srcset = srcset | append: ', ' -%} {%- assign sizes = sizes | append: ', ' -%} {%- endif -%} {%- if parts.size == 2 -%} {%- assign srcset = srcset | append: imgUrl | append: ' ' | append: imgWidth | append: 'w' -%} {%- assign sizes = sizes | append: '(min-width: ' | append: maxWidth | append: 'px) ' | append: imgWidth | append: 'px' -%} {%- else -%} {%- assign srcset = srcset | append: imgUrl | append: ' ' | append: imgWidth | append: 'w' -%} {%- assign sizes = sizes | append: imgWidth | append: 'px' -%} {%- endif -%}{%- endfor -%} {{ product.title | escape }}

{% if productImages.size > 1 and hoverEffect == 'reveal-second-image-and-zoom-in' or hoverEffect == 'reveal-second-image' %} {% for image in productImages %} {% if image.src contains product.images_info[0].src %} {% assign secondImage = productImages[image.position] %} {% endif %} {% endfor %} {% if secondImage -%} {% assign secondImageSrc = secondImage.src -%} {% capture secondImageSrcset -%} {% for width in widths -%} {% assign widthNo = width | plus: 0 -%} {% if widthNo < maxWidth -%} {{ secondImageSrc }}{{ widthParam }}{{ width }} {{ width }}w, {% else -%} {{ secondImageSrc }}{{ widthParam }}{{ maxWidth }} {{ maxWidth }}w {% break -%} {% endif -%} {% endfor -%} {% endcapture -%} {{ product.title | escape }}

{% endif -%} {% endif %} {% else -%} {{ product.title | escape }}

{% endif -%}

{% assign hideOtherLabelsWhenSoldOut = true -%}{% assign moneyFormat = request.money_format | strip_html -%}{% assign removePriceDecimal = false -%}{% assign showCentAsSuperscript = false -%}{% assign decimalDelimiter = '' -%}{% assign withoutTrailingZeros = true -%}{% if hideOtherLabelsWhenSoldOut != true -%} {% assign compareAtPriceMin = product.compare_at_price_min | default: 0 -%} {% if compareAtPriceMin > product.price_min -%} {% assign percent = compareAtPriceMin | minus: product.price_min | times: 100 | divided_by: compareAtPriceMin | round -%} {% assign salePercent = percent | append: '%' -%} {% assign saleAmount = compareAtPriceMin | minus: product.price_min | format_currency: moneyFormat, showCentAsSuperscript, removePriceDecimal, decimalDelimiter, withoutTrailingZeros -%} {% assign productItemSaleTranslated = "productItem.productItemSale" | translate: translations, "Sale" | replace: '{{salePercent}}', salePercent | replace: '{{saleAmount}}', saleAmount -%}

{% endif -%} {% if product.available == false -%}

{{ "productItem.productItemSoldOut" | translate: translations, "Sold out" }}

{% endif -%} {% assign filteredTags = "" -%} {% assign allTags = product.tags -%} {% if product.original_tags != nill %} {% assign allTags = allTags | concat: product.original_tags | uniq -%} {% endif %} {% for tag in allTags -%} {% if tag contains 'pfs:label' -%} {% assign tagWithoutLabel = tag | remove: 'pfs:label-' -%} {% assign filteredTags = filteredTags | append: tagWithoutLabel | append: ',' -%} {% endif -%} {% endfor -%} {% assign filteredTags = filteredTags | split: ',' -%} {% for tag in filteredTags -%} {% unless tag == blank %}

{% endunless %} {% endfor -%} {% else -%} {% if product.available == false -%}

{{ "productItem.productItemSoldOut" | translate: translations, "Sold out" }}

{% else -%} {% assign compareAtPriceMin = product.compare_at_price_min | default: 0 -%} {% if compareAtPriceMin > product.price_min -%} {% assign percent = compareAtPriceMin | minus: product.price_min | times: 100 | divided_by: compareAtPriceMin | round -%} {% assign salePercent = percent | append: '%' -%} {% assign saleAmount = compareAtPriceMin | minus: product.price_min | format_currency: moneyFormat, showCentAsSuperscript, removePriceDecimal, decimalDelimiter, withoutTrailingZeros -%} {% assign translatedText = "productItem.productItemSale" | translate: translations, "Sale" | replace: '{{salePercent}}', salePercent | replace: '{{saleAmount}}', saleAmount %}

{% endunless %} {% endfor -%} {% endif -%}{% endif -%}

{%- comment -%}

{%- endcomment -%}

{% assign swatches = '' %} {% assign swatches = 'swatch item 1' %} {% capture swatchType %}color{% endcapture %}{% capture swatchBy %}image{% endcapture %}{% capture swatchShape %}circle{% endcapture %}{% assign swatchShapeClasses = '' %}{% if swatchShape == 'box' %} {% assign swatchShapeClasses = swatchShapeClasses | append: 'boost-sd__radio-label--non-radius' %}{% endif %}{% if swatchShape == 'circle' %} {% assign swatchShapeClasses = swatchShapeClasses | append: 'boost-sd__radio-label--circle' %}{% endif %}{% assign hideTextClasses = '' %}{% if swatchBy != '' and swatchBy != 'text' %} {% assign hideTextClasses = hideTextClasses | append: 'boost-sd__radio-label--hide-text' %}{% endif %}{% for swatch in product.options_with_values %} {% assign maxItem = 100 %} {% assign optionsLength = swatch.values | size %} {% if swatch.name %} {% if swatch.name == swatchType %}

{% for value in swatch.values limit: maxItem %}{%- assign swatchImg = '' -%}{%- assign variantID = '' -%}{%- assign prodHandle = product.handle -%}{% assign swatchName = value.title %}{% for variant in product.variants %} {%- if variant.title contains swatchName -%} {%- assign swatchImg = variant.image -%} {%- if variant.available -%} {%- assign variantID = variant.id -%} {%- endif -%} {%- endif -%}{% endfor %}{%- if variantID == '' -%} {% for variant in product.variants %} {%- if variant.title contains swatchName -%} {%- assign variantID = variant.id -%} {{break}} {%- endif -%} {% endfor %}{%- endif -%}{%- assign imgSizesVal = '1367:352, 1281:279, 991:257, 751:272, 641:318, 481:263, 361:418, 298' -%}{%- assign imgSrc = swatchImg -%}{%- assign imgSizesArray = imgSizesVal | split: ', ' -%}{%- assign srcset = '' -%}{%- assign sizes = '' -%}{%- for size in imgSizesArray -%} {%- assign parts = size | split: ':' -%} {%- if parts.size == 2 -%} {%- assign maxWidth = parts[0] -%} {%- assign imgWidth = parts[1] -%} {%- else -%} {%- assign maxWidth = parts[0] -%} {%- assign imgWidth = parts[0] -%} {%- endif -%} {%- assign imgUrl = imgSrc | image_url: width: imgWidth -%} {% capture imgUrl -%}{{imgSrc}}&width={{imgWidth}}{% endcapture -%} {%- if srcset != '' -%} {%- assign srcset = srcset | append: ', ' -%} {%- assign sizes = sizes | append: ', ' -%} {%- endif -%} {%- if parts.size == 2 -%} {%- assign srcset = srcset | append: imgUrl | append: ' ' | append: imgWidth | append: 'w' -%} {%- assign sizes = sizes | append: '(min-width: ' | append: maxWidth | append: 'px) ' | append: imgWidth | append: 'px' -%} {%- else -%} {%- assign srcset = srcset | append: imgUrl | append: ' ' | append: imgWidth | append: 'w' -%} {%- assign sizes = sizes | append: imgWidth | append: 'px' -%} {%- endif -%}{%- endfor -%}

{% endfor %} {% if optionsLength > maxItem %} {% assign count = optionsLength | minus: maxItem %} {% endif %}

{% endif %} {% endif %}{% endfor %}

{%- if lsImage contains 'jpg' -%}

{%- endif -%}

{% capture productVariants %} [{%- for variant in product.variants -%} {%- assign parts = variant.title | split: ' / ' -%} { "id": {{ variant.id | json }}, "title": {{ variant.title | json }}, "sku": {{ variant.sku | json }}, "titlehandle": {{ variant.title | default: '' | downcase | replace: ' ', '-' | replace: '/', '-' | replace: '(', '' | replace: ')', '' | json }}, "available": {{ variant.available | json }}, "option1": {{ parts[0] | json }}, "option2": {{ parts[1] | default: "" | json }}, "option3": {{ parts[2] | default: "" | json }} }{%- unless forloop.last -%},{%- endunless -%}{%- endfor -%} ]{% endcapture %}

{% endfor %} {% assign numberOfProductPerRow = widgetDesignSettings.numberOfProductPerRow %} {% assign numberOfRecommendProduct = widgetDesignSettings.numberOfRecommendProduct %} {% if numberOfRecommendProduct < numberOfProductPerRow %} {% assign sliderPages = 1 %} {% assign disable = "disabled" %} {% else %} {% assign sliderPages = numberOfRecommendProduct | divided_by: numberOfProductPerRow | ceil %} {% assign disable = "" %} {% endif %}

{% else %} {% assign bundleStyle = widgetDesignSettings.bundleStyle %}

{% for product in products %}

{% if product.checked %} {% endif %}

{% if product.images_info[0] %} {{ product.title | escape }}

{% else %} {{ product.title | escape }}

{% endif %}

{% if product.checked %} {% endif %} {% if bundleStyle == 'style2' %}

{% if forloop.index0 == 0 %} This item: {{ product.title | escape }} {% elsif product.checked %} {{ product.title | escape }} {% else %} {{ product.title | escape }} {% endif %}

{%- if product.selectedOption.title != 'Default Title' -%} {% endif %}

{% endif %}

{% unless forloop.last %}

{% endunless %} {% endfor %}

{% if bundleStyle == 'style1' %} {% for product in products %}

{% if forloop.index0 == 0 %} This item: {{ product.title | escape }} {% elsif product.checked %} {{ product.title | escape }} {% else %} {{ product.title | escape }} {% endif %}

{%- if product.selectedOption.title != 'Default Title' -%} {% endif %} {{ product.selectedOption.price }}

{% endfor %} {% endif %}

{% if hasSelectedProduct == true %}

Total price: {{ totalPrice }}

{% endif %}

1 of 4 pairs added to your Home Try-on cart!

Your Home Try-on cart is full (1 of 4 pairs)

1 of 4 pairs added to your
Home Try-on cart!

Your Home Try-on cart is full
(1 of 4 pairs)

Country/region

All Frames

What age are you shopping for?

What’s your face width?

Choose One or More

🔥 TOP SPORTS

Other Sports

Here are the best 4 frames for you!

Error loading result!