Solved

Hiding SOLD prices on Boost 6.2 theme

StanSavellis
Tourist
21 0 0

Hello,

 

I have moved to the new Boost 6.2 theme and need to customise some code - I previously had this in place with the old theme, however it was not carried across in the code.

 

I would like to hide the prices of items from both the Collections pages and Products pages when the product sells.

 

I have tried a number of solutions posted on other pages, but as these seem to be for other themes they don't work.

 

Would really appreciate any guidance, please! Thank you in advance.

Accepted Solutions (2)
Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

@StanSavellis code for second one. replace it. EDITED

 

 

<div class="product-block {{ grid_class | default: 'grid-flex__item one-quarter small-down--one-half' }}{% if quickbuy %} js-contains-quickbuy{% endif %}"
{% if animate %} data-cc-animate="{{ animate_style }}"{% if animate > 0 %} data-cc-animate-delay="{{ animate | times: 0.07 }}s"{% endif %}{% endif %}>
<div class="product-block__image-container">
<div class="global-border-radius {% if product.media.size > 1 or settings.product_grid_image_shape == 'natural' or settings.prod_thumb_crop %}hover-images{% endif %} {% if settings.hover_image_enabled == true and product.media.size > 1 %} hover-images--two {% if product.featured_media.preview_image.aspect_ratio == product.media[1].preview_image.aspect_ratio %}same-aspect-ratio{% endif %}{% endif %} relative">
<a class="product-block__image product-block__image--shape-{{ settings.product_grid_image_shape }} product-block__image--crop-{{ settings.prod_thumb_crop }} product-block__image--valign-{{ settings.prod_thumb_crop_align }}" href="{{ product.url | within: collection }}">
{%- if product.featured_media != blank -%}
<div class="image-one">
{% liquid
if settings.product_grid_image_shape == 'natural'
assign aspect_ratio = false
elsif settings.product_grid_image_shape == 'square'
assign aspect_ratio = 1.0
elsif settings.product_grid_image_shape == 'landscape-32'
assign aspect_ratio = 1.5
elsif settings.product_grid_image_shape == 'landscape-54'
assign aspect_ratio = 1.25
elsif settings.product_grid_image_shape == 'portrait-45'
assign aspect_ratio = 0.8
elsif settings.product_grid_image_shape == 'portrait-23'
assign aspect_ratio = 0.67
endif
%}
{% render 'responsive-image', image: product.featured_media.preview_image, aspect_ratio: aspect_ratio %}
</div>
{%- if settings.hover_image_enabled == true and product.media.size > 1 -%}
<div class="image-two">
<div class="rimage-background fade-in lazyload global-border-radius"
data-bgset="{% render 'bgset', image: product.media[1].preview_image %}"
data-sizes="auto"
data-parent-fit="cover">
<noscript>
<img src="{{ product.media[1].preview_image | img_url: '1024x1024' }}" alt="{{ product.media[1].preview_image.alt | escape }}" class="rimage-background__image">
</noscript>
</div>
</div>
{%- endif -%}
{%- else -%}
{{- product.featured_media.preview_image | img_url: '600x600' | img_tag -}}
{%- endif -%}
</a>

{%- if quickbuy -%}
<div class="product-block__quicklook-btn-container md-down-hidden">
<a class="product-block__quicklook-btn btn--quicklook btn btn--primary js-quickbuy-button" href="{{ product.url }}">{{ 'products.quickbuy.quick_buy' | t }}</a>
{% render 'quick-buy-placeholder', product: product %}
</div>
{%- endif -%}
</div>
</div>

<div class="product-block__title">
<a href="{{ product.url | within: collection }}" class="product-block__title-link">{{ product.title }}</a>
</div>
{% capture the_snippet_review_avg %}{% render 'ssw-widget-avg-rate-listing', product: product %}{% endcapture %}
{% unless the_snippet_review_avg contains 'Liquid error' %}
{{ the_snippet_review_avg }}
{% endunless %}

{%- if show_vendor -%}
<div class="product-block__vendor">
{{- product.vendor -}}
</div>
{%- endif -%}

<div class="product-price">
{%- assign cheapest_variant = product.variants | sort: 'price' | first -%}
{% render 'unit-price', variant: cheapest_variant %}

{% if product.available %}
{% if product.price_varies %}
<span class="product-price__from">{{ 'products.product.from_text' | t }}</span>
{% endif %}


<span class="theme_money{% if cheapest_variant.compare_at_price > cheapest_variant.price %} product-price__reduced{% endif %}">
{%- if settings.product_currency_code_enabled -%}
{{- cheapest_variant.price | money_with_currency -}}
{%- else -%}
{{- cheapest_variant.price | money -}}
{%- endif -%}
</span>
{% if cheapest_variant.compare_at_price > cheapest_variant.price %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span class="product-price__compare theme-money">{{ cheapest_variant.compare_at_price | money }}</span>
{% endif %}
{% endif %}


{% if product.available %}
{% if cheapest_variant.compare_at_price > cheapest_variant.price and settings.sale_label_enabled %}
<span class="product-label product-label--on-sale global-border-radius">{{ 'products.product.on_sale' | t }}</span>
{% endif %}
{% elsif settings.sold_label_enabled %}
<span class="product-label product-label--sold-out global-border-radius">{{ 'products.product.sold_out' | t }}</span>
{% endif %}


</div>

{%- if settings.swatch_enabled_grid -%}
{%- liquid
assign swatch_count = 0
assign swatch_mobile_limit = 3
-%}
<div class="product-block__swatches">
{%- for product_option in product.options_with_values -%}
{%- liquid
if settings.swatch_enabled_productpage and settings.swatch_option_name contains product_option.name
assign is_swatch = true
else
assign is_swatch = false
endif
-%}
{%- if is_swatch == true -%}
{%- assign product_option_position_0index = product_option.position | minus: 1 -%}
{%- for product_option_value in product_option.values -%}

{%- liquid
assign option_value_variant = false
for variant in product.variants
if variant.options[product_option_position_0index] == product_option_value
assign option_value_variant = variant
break
endif
endfor

if is_swatch and settings.swatch_method == 'image' and option_value_variant.featured_media == blank
continue
endif

assign swatch_count = swatch_count | plus: 1
-%}

<span class="{% if settings.swatch_method == 'image' %}product-swatch-inline__image {% else %}product-swatch-inline__dot {% endif %}rimage-background fade-in lazyload"
data-option-item="{{ product_option_value | downcase | escape }}"
{%- if settings.swatch_method == 'standard' -%}
data-swatch="{{ product_option_value | downcase | replace: '"', '' }}"
{%- elsif settings.swatch_method == 'image' and option_value_variant.featured_media -%}
data-bgset="{{ option_value_variant.featured_media.preview_image | img_url: '80x80', crop: settings.swatch_crop_align }}" data-parent-fit="cover"
{%- endif -%}></span>

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

{%- if settings.swatch_method == 'image' and swatch_count > swatch_mobile_limit -%}
{%- assign remaining = swatch_count | minus: swatch_mobile_limit -%}
<span class="product-block__swatches-more-label tiny-text">{{ 'collections.general.more_swatches' | t: count: remaining }}</span>
{%- endif -%}
</div>
{%- endif -%}

{%- if settings.enable_product_reviews_collection and product.metafields.reviews.rating_count != blank -%}
{%- assign rating_count = product.metafields.reviews.rating_count | plus: 0 -%}
{%- if rating_count > 0 -%}
<div class="theme-product-reviews-summary product-block__rating">
{% render 'rating', rating_value: product.metafields.reviews.rating.value %}
<span class="cc-rating-custom-caption">
{{ rating_count }} {{ 'products.product.reviews_link' | t: count: rating_count }}
</span>
</div>
{%- endif -%}
{%- endif -%}
</div>

 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

View solution in original post

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

Hey @StanSavellis here is the code for "main-product.liquid file". please replace this.

 

{%- liquid
assign current_variant = product.selected_or_first_available_variant
assign featured_media = current_variant.featured_media | default: product.featured_media
assign show_size_chart = false

assign product_form_id = 'product-form-' | append: section.id | append: product.id
assign installments_form_id = product_form_id | append: '-installments'

assign form_class = 'row'
if settings.on_add_to_cart != 'go_to_cart'
assign form_class = form_class | append: ' ajax-product-form'
endif
unless current_variant.available
assign form_class = form_class | append: ' variant--unavailable'
endunless
-%}

<div data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" data-components="accordion,custom-select">
<div class="container product-detail very-large-row-under" data-product-id="{{ product.id }}">
<div class="page-width">
<div class="product-layout-grid product-layout-grid--{{ section.settings.media_size }}">
<div class="product-layout-grid__images layout--{{ section.settings.media_layout }}{% if product.media.size > 1 %} has-multiple-images{% endif %}" data-product-image-layout="{{ section.settings.media_layout | split: '-' | first }}">
<div class="product-layout-grid__images-and-thumbs {% if section.settings.enable_sticky_media %} sticky-element{% endif %}">
<div class="product-detail__images-container">
{% if product.media.size > 0 %}
<div class="product-detail__images" data-featured-media-id="{{ featured_media.id }}">
{% for media in product.media %}
<div class="product-detail__image">
{%- if media.media_type == 'image' -%}
<a href="{{ media.preview_image.src | img_url: 'master' }}"
data-product-image
data-product-media
data-media-id="{{ media.id }}"
data-image-w="{{ media.preview_image.width }}"
data-image-h="{{ media.preview_image.height }}"
class="global-border-radius">
{%- else -%}
<div class="global-border-radius" data-product-media data-media-id="{{ media.id }}">
{%- endif -%}

{%- render 'media', media: media -%}

{%- unless media.media_type == 'image' -%}
</div>
{%- else -%}
</a>
{%- endunless -%}
</div>
{% endfor %}
</div>
{% else %}
{% render 'media' with featured_media %}
{% endif %}

{%- assign models = product.media | where: 'media_type', 'model' -%}
{% if models.size > 0 %}
<script type="application/json" class="model-json">
{{- product.media | where: 'media_type', 'model' | json -}}
</script>
<button
class="view-in-space"
data-shopify-xr
data-shopify-model3d-id="{{ models.first.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden>
{%- render 'icon-3d-badge-full-color' -%}
<span class="view-in-space__text">{{ 'products.product.view_in_space' | t }}</span>
</button>
{% endif %}

<div class="slick-external-controls">
<div class="slick-arrows"></div>
<div class="slick-dots"></div>
</div>
</div>

{% if section.settings.media_layout contains 'thumbnails' and product.media.size > 1 %}
<div class="product-detail__thumbnails">
{% for media in product.media %}
<a href="{{ media.preview_image | img_url: 'master' }}"
class="product-detail__thumbnail global-border-radius-medium media-thumbnail media-thumbnail--media-{{ media.media_type }} {% if featured_media.id == media.id %}thumb-active{% endif %}"
data-media-id="{{ media.id }}"
data-product-media-thumbnail>
{% render 'responsive-image', image: media.preview_image %}

{%- if media.media_type == 'video' or media.media_type =='external_video' -%}
<div class="media-thumbnail__badge">
{%- render 'icon-video-badge-full-color' -%}
</div>
{%- elsif media.media_type == 'model' -%}
<div class="media-thumbnail__badge">
{%- render 'icon-3d-badge-full-color' -%}
</div>
{%- endif -%}
</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>

<div class="product-layout-grid__detail">
<div class="product-detail__detail sticky-element" {% if product.template_suffix contains 'preorder' %} data-preorder{% endif %}>
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when '@app' -%}
{%- render block -%}

{%- when 'title_and_price' -%}
<div class="product-detail__title-area row" {{ block.shopify_attributes }}>
<h1 class="product-detail__title small-title">{{ product.title }}</h1>

{% if product.available %}
<div class="product-detail__price product-price" data-price-wrapper>
<span class="{% if current_variant.compare_at_price > current_variant.price %}product-price__reduced{% endif %}" data-product-price data-product-detail-price>
<span class="theme-money large-title">
{%- if settings.product_currency_code_enabled -%}
{{- current_variant.price | money_with_currency -}}
{%- else -%}
{{- current_variant.price | money -}}
{%- endif -%}
</span>
</span>

{%- if product.compare_at_price_max > product.price -%}
<span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>
<span class="tiny-title" data-compare-price>
{%- if current_variant.compare_at_price > current_variant.price -%}
<span class="product-price__compare theme-money">{{ current_variant.compare_at_price | money }}</span>
{%- endif -%}
</span>
{%- endif -%}

{% render 'unit-price', variant: current_variant %}
</div>
{% endif %}

{%- form 'product', product, id: installments_form_id, class: form_class -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" data-product-secondary-select>
{{ form | payment_terms }}
{%- endform -%}

{%- if block.settings.show_tax_and_shipping -%}
{%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product-policies small-text">
{%- if cart.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
{%- endif -%}
</div>

{%- when 'reviews_summary' -%}
{%- if product.metafields.reviews.rating_count != blank -%}
{%- assign rating_count = product.metafields.reviews.rating_count | plus: 0 -%}
{%- if rating_count > 0 -%}
<div class="theme-product-reviews-summary" {{ block.shopify_attributes }}>
{% render 'rating', rating_value: product.metafields.reviews.rating.value %}
<span class="cc-rating-custom-caption">
{{ rating_count }} {{ 'products.product.reviews_link' | t: count: rating_count }}
</span>
</div>
{%- endif -%}
{%- endif -%}

{%- when 'vendor' -%}
{% comment %}
Do we have a collection that has the same name as our product vendor name?
If we do, let's have the vendor link point to it.
If not, we will point to the automatic vendor collection.
{% endcomment %}
{%- assign product_vendor_handle = product.vendor | handle -%}
{%- if collections[product_vendor_handle].handle == product_vendor_handle -%}
{%- assign vendor_url = collections[product_vendor_handle].url -%}
{%- else -%}
{%- assign vendor_url = product.vendor | url_for_vendor -%}
{%- endif -%}
{%- capture vendor_link -%}<a href="{{ vendor_url }}">{{ product.vendor }}</a>{%- endcapture -%}
<div class="product-detail__vendor" {{ block.shopify_attributes }}>
{{ 'products.product.vendor_html' | t: vendor: vendor_link }}
</div>

{%- when 'type' -%}
{%- if product.type != blank -%}
{%- assign product_type_handle = product.type | handle -%}
{%- if collections[product_type_handle].handle == product_type_handle -%}
{%- assign type_url = collections[product_type_handle].url -%}
{%- else -%}
{%- assign type_url = product.type | url_for_type -%}
{%- endif -%}

<div class="product-detail__type type-wrapper" {{ block.shopify_attributes }}>
{{ 'products.product.type' | t }}
<a class="type-wrapper__type" href="{{ type_url }}">{{ product.type }}</a>
</div>
{%- endif -%}

{%- when 'sku' -%}
<div class="product-detail__sku sku-wrapper {% if product.selected_or_first_available_variant.sku == blank %}visually-hidden{% endif %}" {{ block.shopify_attributes }}>
{{ 'products.product.sku' | t }}
<span class="sku-wrapper__sku">{{ product.selected_or_first_available_variant.sku }}</span>
</div>

{%- when 'variant_picker' -%}
{%- unless product.has_only_default_variant -%}
<div class="product-detail__options row" {{ block.shopify_attributes }}>
{%- assign show_size_chart = false -%}
{% for option in product.options_with_values %}
{%- if block.settings.size_chart_enabled and option.name == block.settings.size_chart_option_name -%}
{%- assign show_size_chart = true -%}
{%- assign size_chart_page = pages[block.settings.size_chart_page_id] -%}
{%- break -%}
{%- endif -%}
{% endfor %}
{% render 'variant-picker', section: section, product: product, block: block, show_size_chart: show_size_chart, size_chart_page: size_chart_page %}

</div>
{%- endunless -%}

{%- when 'buy_buttons' -%}
{%- form 'product', product, id: product_form_id, class: form_class -%}
{%- liquid
assign inventory_class = ''
assign inventory_threshold = block.settings.inventory_notice_threshold
assign inventory_qty = current_variant.inventory_quantity

if inventory_qty > 0
if inventory_qty <= inventory_threshold
assign inventory_class = ' product-inventory--low'
assign inventory_status = 'products.labels.low_stock' | t
else
if block.settings.show_inventory_notice == 'low'
assign inventory_class = ' product-inventory--none'
else
assign inventory_status = 'products.labels.in_stock' | t
endif
endif
else
assign inventory_class = ' product-inventory--none'
endif

assign gift_card_recipient_feature_active = false
if block.settings.show_gift_card_recipient and product.gift_card?
assign gift_card_recipient_feature_active = true
endif

assign enable_dynamic_payment_button = false
if block.settings.enable_payment_button and product.selling_plan_groups == empty and gift_card_recipient_feature_active == false
unless product.template_suffix contains 'preorder'
assign enable_dynamic_payment_button = true
endunless
endif

if gift_card_recipient_feature_active
render 'gift-card-recipient', product: product, form: form, section: section, use_label: true
endif
-%}

<select name="id" class="no-js" data-product-select aria-label="{{ 'products.product.selector_label' | t | escape }}">
{%- for variant in product.variants -%}
{%- liquid
assign show_inventory_qty = false

unless variant.inventory_quantity > inventory_threshold and block.settings.show_inventory_count != 'always'
assign show_inventory_qty = true
endunless

if variant.inventory_quantity < 10 and settings.hide_unavailable_quantity_opts
assign show_inventory_qty = true
endif
-%}
<option value="{{ variant.id }}"
{% if variant == current_variant %}selected{% endif %}
{% unless variant.available %}disabled{% endunless %}
{% if variant.inventory_management != blank %}
data-stock="{% if variant.inventory_quantity > 0 %}in{% else %}out{% endif %}"
{% if show_inventory_qty %}data-inventory="{{ variant.inventory_quantity }}"{% endif %}
{% endif %}>
{{- variant.title -}}
</option>
{%- endfor -%}
</select>

<div class="large-row{% if enable_dynamic_payment_button == true %} with-payment-buttons{% endif %}" {{ block.shopify_attributes }}>

{%- if current_variant.inventory_management != blank and block.settings.show_inventory_notice != 'never' -%}
<div class="product-inventory{{ inventory_class }}" data-threshold="{{ inventory_threshold }}" data-show-notice="{{ block.settings.show_inventory_notice }}" data-show-count="{{ block.settings.show_inventory_count }}">
{% if inventory_qty > 0 %}
{%- unless block.settings.show_inventory_notice == 'low' and inventory_qty > inventory_threshold -%}
<span class="product-inventory__status">{{ inventory_status }}</span>
{% unless block.settings.show_inventory_count == 'never' %}
{% unless block.settings.show_inventory_count == 'low' and inventory_qty > inventory_threshold %}
{% if inventory_qty == 1 %}
- {{ 'products.labels.single_unit_available' | t }}
{% else %}
- {{ 'products.labels.x_units_available' | t: quantity: inventory_qty }}
{% endif %}
{% endunless %}
{% endunless %}
{% endunless %}
{% endif %}
</div>
{%- endif -%}

{%- if block.settings.show_quantity_selector -%}
{% render 'quantity-selector', variant: current_variant %}
{%- endif -%}

<div class="payment-buttons">
{%- capture add_to_cart_text -%}
{%- if product.template_suffix contains 'preorder' -%}
{{- 'products.product.preorder' | t -}}
{%- else -%}
{{- 'products.product.add_to_cart' | t -}}
{%- endif -%}
{%- endcapture -%}
<button
class="btn {% if enable_dynamic_payment_button == true %}btn--secondary{% endif %}"
type="submit"
name="add"
data-add-to-cart
{% unless current_variant.available %}disabled{% endunless %}>
<span data-add-to-cart-text>
{%- if current_variant.available -%}
{{ add_to_cart_text }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
</button>

{% if enable_dynamic_payment_button == true %}
{{ form | payment_button }}
{% endif %}
</div>
</div>

{%- if block.settings.show_pickup_availability -%}
{% render 'store-availability', product: product, current_variant: current_variant %}
{%- endif -%}

{% if product.available and block.settings.show_backorder_text == true %}
{% render 'backorder', product: product, variant: current_variant %}
{% endif %}
{%- endform -%}

{%- when 'description' -%}
{%- capture product_description -%}
{% if block.settings.show_tabs %}
{%- liquid
assign tab_1_title = block.settings.tab_1_title

assign tab_2_title = block.settings.tab_2_title
assign tab_2_content = block.settings.tab_2_content
if block.settings.tab_2_page != blank
assign tab_2_title = tab_2_title | default: pages[block.settings.tab_2_page].title
assign tab_2_content = pages[block.settings.tab_2_page].content
endif

assign tab_3_title = block.settings.tab_3_title
assign tab_3_content = block.settings.tab_3_content
if block.settings.tab_3_page != blank
assign tab_3_title = tab_3_title | default: pages[block.settings.tab_3_page].title
assign tab_3_content = pages[block.settings.tab_3_page].content
endif
-%}
{% if block.settings.tab_direction == 'horizontal' %}
<div class="large-row large-row-under {% if block.settings.full_width == false %} product-description__no-expand{% endif %}" {{ block.shopify_attributes }}>
<ul class="tabs">
<li class="rte--expanded-images">
<a href="#tab1">{{ tab_1_title }}</a>
</li>
{% if tab_2_content != blank %}
<li>
<a href="#tab2">{{ tab_2_title }}</a>
</li>
{% endif %}
{% if tab_3_content != blank %}
<li>
<a href="#tab3">{{ tab_3_title }}</a>
</li>
{% endif %}
</ul>

<div id="tab1" class="rte rte--expanded-images clearfix row tab-content tab-content--active {% if block.settings.full_width == false %} product-description__no-expand{% endif %}">
{{ product.description }}
</div>

{% if tab_2_content != blank %}
<div id="tab2" class="rte row tab-content">
{{ tab_2_content }}
</div>
{% endif %}

{% if tab_3_content != blank %}
<div id="tab3" class="rte row tab-content">
{{ tab_3_content }}
</div>
{% endif %}
</div>

{% else %}

<div class="product-detail-accordion" {{ block.shopify_attributes }}>
{%- capture accordion_title_1 -%}
{%- if block.settings.icon_1 == blank -%}
{{- tab_1_title -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon_1, size: 'small' %}
<span class="content-with-icon__beside">{{ tab_1_title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}

{%- capture accordion_title_2 -%}
{%- if block.settings.icon_2 == blank -%}
{{- tab_2_title -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon_2, size: 'small' %}
<span class="content-with-icon__beside">{{ tab_2_title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}

{%- capture accordion_title_3 -%}
{%- if block.settings.icon_3 == blank -%}
{{- tab_3_title -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon_3, size: 'small' %}
<span class="content-with-icon__beside">{{ tab_3_title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}

{% render 'accordion',
allow_multi_open: true,
add_content_class: 'rte cf',
first_item_open: block.settings.open,
item1_title: accordion_title_1,
item1_content: product.description,
item2_title: accordion_title_2,
item2_content: tab_2_content,
item3_title: accordion_title_3,
item3_content: tab_3_content
%}
</div>
{% endif %}

{%- else -%}
<div class="rte rte--expanded-images clearfix row {% if block.settings.full_width == false %} product-description__no-expand{% endif %}">
{{ product.description }}
</div>
{%- endif -%}
{%- endcapture -%}

{%- if block.settings.full_width -%}
{%- capture full_width_content -%}{{ full_width_content }}{{ product_description }}{%- endcapture -%}
{%- else -%}
{{ product_description }}
{%- endif -%}

{% when 'custom_option' %}
{%- if block.settings.label != blank -%}
{%- liquid
assign custom_option_input_id = product_form_id | append: '-custom-' | append: forloop.index
assign custom_input_name = block.settings.label | escape | prepend: 'properties[' | append: ']'
-%}
<div class="custom-option" {{ block.shopify_attributes}}>
{% case block.settings.type %}
{% when 'text' %}
<div class="input-wrapper form-row">
<label class="label" for="{{ custom_option_input_id }}">{{ block.settings.label | escape }}</label>
<input class="custom-option__text-input" type="text" id="{{ custom_option_input_id }}" form="{{ product_form_id }}" name="{{ custom_input_name }}" {% if block.settings.text_required %}required{% endif %}>
</div>

{% when 'textarea' %}
<div class="input-wrapper form-row">
<label class="label" for="{{ custom_option_input_id }}">{{ block.settings.label | escape }}</label>
<textarea class="custom-option__text-input" id="{{ custom_option_input_id }}" form="{{ product_form_id }}" name="{{ custom_input_name }}" {% if block.settings.text_required %}required{% endif %}></textarea>
</div>

{% when 'checkbox' %}
<div class="option-selector form-row">
<label class="label custom-option__checkbox">
{{ block.settings.label | escape }}
<input type="hidden" form="{{ product_form_id }}" name="{{ custom_input_name }}" value="{{ block.settings.checkbox_unchecked_value | escape }}">
<input type="checkbox" form="{{ product_form_id }}" name="{{ custom_input_name }}" value="{{ block.settings.checkbox_checked_value | escape }}">
<span class="custom-option__checkbox-check icon feather-icon">{% render 'feather-check' %}</span>
</label>
</div>

{% when 'multiple' %}
{%- assign custom_options = block.settings.multiple_options | newline_to_br | strip_newlines | split: '<br />' -%}

{% if block.settings.multiple_style == 'dropdown' %}
<div class="form-row">
<div class="option-selector" data-selector-type="dropdown">
{% render 'custom-select',
id: custom_option_input_id,
label: block.settings.label,
label_inside: true,
option_values: custom_options,
selected_value: custom_options.first,
include_native: true,
native_name: custom_input_name,
native_form_id: product_form_id
%}
</div>
</div>

{% else %}
<div class="form-row">
<fieldset class="option-selector" data-selector-type="listed" data-index="custom-option">
<legend class="label">{{ block.settings.label | escape }}</legend>
<div class="option-selector__btns">
{% for option in custom_options %}
{% assign custom_option_input_id = custom_option_input_id | append: forloop.index %}
<input class="opt-btn js-option" type="radio" name="{{ custom_input_name }}" id="{{ custom_option_input_id }}" form="{{ product_form_id }}" value="{{ option | escape }}"{% if forloop.first %} checked{% endif %}>
<label class="opt-label" for="{{ custom_option_input_id }}">{{ option }}</label>
{% endfor %}
</div>
</fieldset>
</div>
{% endif %}

{% endcase %}
</div>
{%- endif -%}

{%- when 'sharing' -%}
{% render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}

{%- when 'text' -%}
{%- if block.settings.text != blank -%}
<div class="row" {{ block.shopify_attributes }}>
{{ block.settings.text }}
</div>
{%- endif -%}

{%- when 'richtext' -%}
{%- if block.settings.richtext != blank -%}
<div class="row rte" {{ block.shopify_attributes }}>
{{ block.settings.richtext }}
</div>
{%- endif -%}

{%- when 'link' -%}
<div class="row" {{ block.shopify_attributes }}>
<a class="{% if block.settings.style == 'button_1' %}btn btn--small btn--primary{% elsif block.settings.style == 'button_2' %}btn btn--small btn--secondary{% else %}standard-link{% endif %}" href="{{ block.settings.url }}">{{ block.settings.text | escape }}</a>
</div>

{%- when 'image' -%}
{%- if block.settings.image != blank -%}
<div class="row" style="max-width: {{ block.settings.image_width }}px" {{ block.shopify_attributes }}>
{%- if block.settings.url != blank -%}<a href="{{ block.settings.url }}">{%- endif -%}
<div class="global-border-radius">
{% render 'responsive-image', image: block.settings.image %}
</div>
{%- if block.settings.url != blank -%}</a>{%- endif -%}
</div>
{% endif %}

{% when 'accordion' %}
{%- capture accordion_content -%}
{%- liquid
assign content = block.settings.content
if block.settings.page != blank
assign content = pages[block.settings.page].content
endif
-%}
{%- if content != blank -%}
<div class="product-detail-accordion" {{ block.shopify_attributes }}>
{%- capture accordion_title -%}
{%- if block.settings.icon == blank -%}
{{- block.settings.title | escape -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon, size: 'small' %}
<span class="content-with-icon__beside">{{ block.settings.title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}
{% render 'accordion', allow_multi_open: true, add_content_class: 'rte cf', first_item_open: block.settings.open, item1_title: accordion_title, item1_content: content %}
</div>
{%- endif -%}
{%- endcapture -%}

{%- if block.settings.full_width -%}
{%- capture full_width_content -%}{{ full_width_content }}{{ accordion_content }}{%- endcapture -%}
{%- else -%}
{{ accordion_content }}
{%- endif -%}

{%- when 'complementary' -%}
<cc-fetched-content data-id="{{ block.id }}" data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&intent=complementary" contains-product-blocks>
{%- if recommendations.performed and recommendations.products_count > 0 -%}
{% if block.settings.enable_carousel %}
<div class="row content-products js-content-products-slider" {{ block.shopify_attributes }}>
<div class="flex">
<div class="content-products__title">{{ block.settings.block_heading | escape }}</div>
{% if recommendations.products_count > 1 and block.settings.max_products > 1 %}
<div class="content-products-controls">
<button class="btn--plain prev icon feather-icon" aria-label="{{ 'general.accessibility_labels.previous' | t | escape }}">{% render 'feather-arrow-left' %}</button>
<button class="btn--plain next icon feather-icon" aria-label="{{ 'general.accessibility_labels.next' | t | escape }}">{% render 'feather-arrow-right' %}</button>
</div>
{% endif %}
</div>
<div class="content-products__products product-carousel-peek">
<div class="grid grid--uniform">
{% liquid
for related_product in recommendations.products limit: block.settings.max_products
render 'product-block', product: related_product, grid_class: 'grid__item one-half small-down--one-half'
endfor
%}
</div>
</div>
{% render 'peek-carousel-advice' %}
</div>
{% else %}
<div class="row content-products content-products--no-carousel" {{ block.shopify_attributes }}>
<div class="content-products__title">{{ block.settings.block_heading | escape }}</div>
<div class="content-products__products">
<div class="grid-flex">
{% liquid
for related_product in recommendations.products limit: block.settings.max_products
render 'product-block', product: related_product, grid_class: 'grid-flex__item one-half small-down--one-half'
endfor
%}
</div>
</div>
</div>
{% endif %}
{%- endif -%}
</cc-fetched-content>

{%- when 'custom_liquid' -%}
{%- if block.settings.custom_liquid != blank -%}
<div class="row" {{ block.shopify_attributes }}>
{{ block.settings.custom_liquid }}
</div>
{%- endif -%}

{% endcase %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>

{%- if full_width_content != blank -%}
<div class="container row">
<div class="reading-width reading-width--no-mobile-padding">
{{ full_width_content }}
</div>
</div>
{%- endif -%}

{%- if show_size_chart == true -%}
{% render 'size-chart', size_chart_page: size_chart_page %}
{%- endif -%}

{% unless product == empty %}
<script type="application/json" class="ProductJson-{{ product.id }}" data-product-json>
{{ product | json }}
</script>
{% endunless %}
</div>

{%- assign current_variant = product.selected_or_first_available_variant -%}
{% render 'structured-data-product', product: product, current_variant: current_variant %}

{% schema %}
{
"name": "Product details",
"class": "section-product-template",
"settings": [
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "checkbox",
"id": "enable_sticky_media",
"label": "Enable stick on scroll",
"default": true
},
{
"type": "select",
"id": "media_size",
"label": "Size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "medium"
},
{
"type": "select",
"id": "media_layout",
"label": "Layout",
"options": [
{
"label": "List",
"value": "list"
},
{
"label": "Thumbnails - below",
"value": "thumbnails-below"
},
{
"label": "Thumbnails - left",
"value": "thumbnails-left"
}
],
"default": "list"
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": false
}
],
"blocks": [
{
"type": "@app"
},
{
"type": "buy_buttons",
"name": "Buy buttons",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": "Show quantity selector",
"default": true
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "show_gift_card_recipient",
"label": "Show recipient information form for gift card products.",
"info": "Allow customers to send gift cards to a recipient along with a personal message. When enabled, the dynamic checkout button will be disabled for gift cards. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-field...)"
},
{
"type": "checkbox",
"id": "show_pickup_availability",
"label": "Show pickup availability",
"default": true,
"info": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/loca...)"
},
{
"type": "checkbox",
"id": "show_backorder_text",
"label": "Show backorder text",
"default": true,
"info": "Only shows for products which use Shopify inventory tracking and are available to purchase when out of stock."
},
{
"type": "header",
"content": "Inventory"
},
{
"type": "select",
"id": "show_inventory_notice",
"label": "Show inventory notice",
"options": [
{
"label": "Never",
"value": "never"
},
{
"label": "Only when inventory low",
"value": "low"
},
{
"label": "Always",
"value": "always"
}
],
"default": "never"
},
{
"type": "select",
"id": "show_inventory_count",
"label": "Show count in inventory notice",
"options": [
{
"label": "Never",
"value": "never"
},
{
"label": "Only when inventory low",
"value": "low"
},
{
"label": "Always",
"value": "always"
}
],
"default": "low"
},
{
"type": "range",
"id": "inventory_notice_threshold",
"min": 1,
"max": 100,
"step": 1,
"label": "Low inventory threshold",
"default": 10
}
]
},
{
"type": "complementary",
"name": "Complementary products",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To select complementary products, add the Search & Discovery app. [Learn more](https:\/\/shopify.dev\/themes\/product-merchandising\/recommendations)"
},
{
"type": "text",
"id": "block_heading",
"default": "Pairs well with",
"label": "Heading"
},
{
"type": "checkbox",
"id": "enable_carousel",
"label": "Enable carousel",
"default": true
},
{
"type": "range",
"id": "max_products",
"min": 1,
"max": 10,
"step": 1,
"label": "Maximum products to show",
"default": 10
}
]
},
{
"type": "custom_liquid",
"name": "Custom Liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "Custom Liquid"
}
]
},
{
"type": "custom_option",
"name": "Custom option",
"settings": [
{
"type": "paragraph",
"content": "Custom options will not show in the quick buy."
},
{
"type": "text",
"id": "label",
"label": "Label",
"info": "Required",
"default": "Custom option"
},
{
"type": "select",
"id": "type",
"label": "Type",
"default": "text",
"options": [
{
"label": "Text",
"value": "text"
},
{
"label": "Long text",
"value": "textarea"
},
{
"label": "Checkbox",
"value": "checkbox"
},
{
"label": "Multiple options",
"value": "multiple"
}
]
},
{
"type": "header",
"content": "Text"
},
{
"type": "checkbox",
"id": "text_required",
"label": "Require text",
"info": "Only works with 'Add to cart' button",
"default": false
},
{
"type": "header",
"content": "Checkbox"
},
{
"type": "text",
"id": "checkbox_checked_value",
"label": "Checked value",
"default": "Yes"
},
{
"type": "text",
"id": "checkbox_unchecked_value",
"label": "Unchecked value",
"default": "No"
},
{
"type": "header",
"content": "Multiple options"
},
{
"type": "select",
"id": "multiple_style",
"label": "Style",
"default": "dropdown",
"options": [
{
"label": "Dropdown",
"value": "dropdown"
},
{
"label": "Radio",
"value": "radio"
}
]
},
{
"type": "textarea",
"id": "multiple_options",
"label": "Options",
"default": "Option 1\nOption 2\nOption 3",
"info": "One option on each line"
}
]
},
{
"type": "description",
"name": "Description",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "Show full width",
"info": "Will show underneath product media and details",
"default": false
},
{
"type": "checkbox",
"id": "show_tabs",
"label": "Enable tabs",
"default": false
},
{
"type": "paragraph",
"content": "Show 2 further tabs by adding a title and content or selecting a page"
},
{
"type": "radio",
"id": "tab_direction",
"label": "Tab direction",
"default": "horizontal",
"options": [
{
"value": "horizontal",
"label": "Horizontal"
},
{
"value": "vertical",
"label": "Vertical"
}
]
},
{
"type": "header",
"content": "Tab 1"
},
{
"type": "select",
"id": "icon_1",
"label": "Vertical tab icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "text",
"id": "tab_1_title",
"label": "Title",
"default": "Description"
},
{
"type": "header",
"content": "Tab 2"
},
{
"type": "select",
"id": "icon_2",
"label": "Vertical tab icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "text",
"id": "tab_2_title",
"label": "Title"
},
{
"type": "richtext",
"id": "tab_2_content",
"label": "Content"
},
{
"type": "page",
"id": "tab_2_page",
"label": "Content from page"
},
{
"type": "header",
"content": "Tab 3"
},
{
"type": "select",
"id": "icon_3",
"label": "Vertical tab icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "text",
"id": "tab_3_title",
"label": "Title"
},
{
"type": "richtext",
"id": "tab_3_content",
"label": "Content"
},
{
"type": "page",
"id": "tab_3_page",
"label": "Content from page"
}
]
},
{
"type": "accordion",
"name": "Collapsible tab",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Collapsible tab"
},
{
"type": "select",
"id": "icon",
"label": "Icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "richtext",
"id": "content",
"label": "Tab content",
"default": "<p>Collapsible tab content</p>"
},
{
"type": "page",
"id": "page",
"label": "Tab content from page"
},
{
"type": "checkbox",
"id": "open",
"label": "Open",
"default": false
},
{
"type": "checkbox",
"id": "full_width",
"label": "Show full width",
"info": "Will show underneath product media and details",
"default": false
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_width",
"min": 60,
"max": 700,
"step": 10,
"unit": "px",
"label": "Image width",
"default": 700
},
{
"type": "url",
"id": "url",
"label": "Link"
}
]
},
{
"type": "link",
"name": "Link",
"settings": [
{
"type": "url",
"id": "url",
"label": "Link"
},
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Link text"
},
{
"type": "radio",
"id": "style",
"label": "Button style",
"options": [
{ "value": "button_1", "label": "Button - primary" },
{ "value": "button_2", "label": "Button - secondary" },
{ "value": "link_style", "label": "Link"}
],
"default": "button_1"
}
]
},
{
"type": "reviews_summary",
"name": "Product rating",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To display a rating, add a product rating app. [Learn more](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-features#featured-produ...)"
}
]
},
{
"type": "richtext",
"name": "Rich text",
"settings": [
{
"type": "richtext",
"id": "richtext",
"label": "Rich text",
"default": "<p>Rich text block</p>"
}
]
},
{
"type": "sharing",
"name": "Sharing",
"limit": 1
},
{
"type": "sku",
"name": "SKU",
"limit": 1
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Text block"
}
]
},
{
"type": "title_and_price",
"name": "Title and price",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_tax_and_shipping",
"label": "Show tax status and shipping policy link",
"default": false
}
]
},
{
"type": "type",
"name": "Type",
"limit": 1
},
{
"type": "variant_picker",
"name": "Variant picker",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Size chart"
},
{
"type": "checkbox",
"id": "size_chart_enabled",
"label": "Show size chart",
"default": false
},
{
"type": "text",
"id": "size_chart_option_name",
"label": "Option name",
"default": "Size",
"info": "Enter the product option name. The size chart link will sit below this product option."
},
{
"type": "page",
"id": "size_chart_page_id",
"label": "Select page"
}
]
},
{
"type": "vendor",
"name": "Vendor",
"limit": 1
}
]
}
{% endschema %}
➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

View solution in original post

Replies 26 (26)

Zeel-prajapatii
Shopify Partner
138 32 27

@StanSavellis Can you please share the site url here?

 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
StanSavellis
Tourist
21 0 0

Of course - sorry:

 

https://thatretropiece.com/

StanSavellis
Tourist
21 0 0

Any help at all?

Zeel-prajapatii
Shopify Partner
138 32 27

Hey @StanSavellis i will surely help you but site is restricted here. 

Zeelprajapatii_0-1708062720041.png

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
StanSavellis
Tourist
21 0 0

Please let me know your location (country) and I will unblock.

Zeel-prajapatii
Shopify Partner
138 32 27

@StanSavellis It's INDIA. 

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
StanSavellis
Tourist
21 0 0

I've just unblocked India now, so you should be fine to access. Thank you.

Zeel-prajapatii
Shopify Partner
138 32 27

@StanSavellis Hey thanks , got the access. can you please explain a little bit more with some screenshots? it will really help me to fix your issue easily. 

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
StanSavellis
Tourist
21 0 0

Sure - once a product is sold I'd like to hide the sold price, from the Products and Collections pages. I've circled what I'm referring to on the screenshot.

Screenshot 2024-02-16 at 5.26.30 pm.png

 

I had this set up on my previous theme but needed to update to new theme version and the codes didn't carry across.

StanSavellis
Tourist
21 0 0

Also, here, on the Products page.

 

Screenshot 2024-02-16 at 5.28.06 pm.png

Zeel-prajapatii
Shopify Partner
138 32 27

Hey @StanSavellis please search for "product-price" in collection page and product page files.

 

It will be "price.liquid" file in common.

 

Now add the condition over the <span class="theme_money">{{ price of product(It is an example) }}</span> class.

 

Wrap this with the below condition.

{% unless product.available %}
<span class="theme_money">price of product</span>
{% endunless %}

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
StanSavellis
Tourist
21 0 0

Please confirm, in this section here?

 

Screenshot 2024-02-16 at 5.44.06 pm.png

Zeel-prajapatii
Shopify Partner
138 32 27

Hey @StanSavellis this is not the correct file. If you don't mind can you please share me the code for "product-template-product-list" and "product-block" files.

 

Thanks in advance

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
StanSavellis
Tourist
21 0 0

This is the first one:

 

 

 

 

{% if section.settings.hide_if_empty == false or section.settings.product_list != blank %}
{%- liquid
if section.settings.enable_carousel == true
assign show_carousel_nav = true

if section.settings.product_list != blank and section.settings.product_list.size <= section.settings.grid
assign show_carousel_nav = false
endif
else
assign show_carousel_nav = false
endif
-%}

<div class="relative container large-row featured-collection" data-section-id="{{ section.id }}" data-section-type="featured-collection">
<div class="page-width">
{%- if section.settings.title != blank or section.settings.link_text != blank or section.settings.enable_carousel == true -%}
<div class="large-row ">

<div class="text-center">
{% if section.settings.title != blank %}
<h2 class="featured-collection--title {% if section.settings.enlarge_title %}giant-title{% else %}large-title{% endif%}">{{ section.settings.title | escape }}</h2>
{% endif %}

{% if section.settings.link_text != blank %}
<a class="standard-link" href="{{ section.settings.link_url }}">{{ section.settings.link_text | escape }}</a>
{% endif %}
</div>
</div>
{% endif %}

<div class="product-carousel-peek">
{%- if show_carousel_nav -%}
<div class="featured-collection-controls featured-collection-controls--prev">
<button class="btn--plain prev icon feather-icon" aria-label="{{ 'general.accessibility_labels.previous' | t | escape }}">{% render 'feather-arrow-left' %}</button>
</div>
{%- endif -%}

<div class="grid-flex" {%- if section.settings.enable_carousel == true -%}data-carousel-enabled data-slides-per-row="{{ section.settings.grid }}"{%- endif -%}>
{%- assign grid_class = 'one-quarter' -%}
{%- if section.settings.grid == 2 -%}
{%- assign grid_class = 'one-half' -%}
{%- elsif section.settings.grid == 3 -%}
{%- assign grid_class = 'one-third' -%}
{%- elsif section.settings.grid == 5 -%}
{%- assign grid_class = 'one-fifth' -%}
{%- endif -%}

{%- if section.settings.grid_mobile == "2" -%}
{%- assign mobile_grid_class = 'small-down--one-half' -%}
{%- else -%}
{%- assign mobile_grid_class = 'small-down--one-whole' -%}
{%- endif -%}
{% capture grid_class_list %}{{ grid_class }} {{ mobile_grid_class }} grid-flex__item{% endcapture %}

{% for product in section.settings.product_list %}
{% assign quickbuy_toggle = settings.quickbuy_buttons_toggle %}
{% render 'product-block', quickbuy: quickbuy_toggle, product: product, grid_class: grid_class_list, show_vendor: section.settings.show_vendor %}
{%- else -%}
{%- liquid
if section.settings.enable_carousel == true
assign placeholder_count = 8
else
assign placeholder_count = section.settings.grid
endif
-%}
{% for i in (1..placeholder_count) %}
<div class="featured-collection--product product-block relative grid-flex__item {{ grid_class_list }}">
<div class="product-block__image-container">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
<div class="global-border-radius image-one">
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg placeholder-svg--small' }}
</div>
</div>
<div class="product-block__title">
{{ 'homepage.onboarding.product_title' | t }}
</div>
<div class="product-price">
<span class="theme-money">
{%- if settings.product_currency_code_enabled -%}
{{- 2000 | money_with_currency -}}
{%- else -%}
{{- 2000 | money -}}
{%- endif -%}
</span>
</div>
</div>
{% endfor %}
{% endfor %}
</div>

{%- if show_carousel_nav -%}
<div class="featured-collection-controls featured-collection-controls--next">
<button class="btn--plain next icon feather-icon" aria-label="{{ 'general.accessibility_labels.previous' | t | escape }}">{% render 'feather-arrow-right' %}</button>
</div>
{% render 'peek-carousel-advice' %}
{%- endif -%}
</div>
</div>
</div>
{% endif %}

{% schema %}
{
"name": "Product list",
"tag": "section",
"class": "section-product-template-product-list",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Product list"
},
{
"type": "checkbox",
"id": "enlarge_title",
"label": "Enlarge heading",
"default": false
},
{
"type": "text",
"id": "link_text",
"label": "Link text",
"default": "Shop now"
},
{
"type": "url",
"id": "link_url",
"label": "Link URL"
},
{
"type": "product_list",
"id": "product_list",
"label": "Product list"
},
{
"type": "checkbox",
"id": "hide_if_empty",
"label": "Hide section if product list is empty",
"info": "Useful when using a dynamic source",
"default": false
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": false
},
{
"type": "checkbox",
"id": "enable_carousel",
"label": "Enable carousel",
"default": false
},
{
"type": "range",
"id": "grid",
"label": "Desktop products per row",
"min": 2,
"max": 5,
"step": 1,
"default": 4
},
{
"type": "select",
"id": "grid_mobile",
"label": "Mobile products per row",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
}
],
"default": "2"
}
],
"presets": [
{
"name": "Product list"
}
],
"enabled_on": {
"templates": [
"product"
]
}
}
{% endschema %}

StanSavellis
Tourist
21 0 0

And the second one:

 

 

 

<div class="product-block {{ grid_class | default: 'grid-flex__item one-quarter small-down--one-half' }}{% if quickbuy %} js-contains-quickbuy{% endif %}"
{% if animate %} data-cc-animate="{{ animate_style }}"{% if animate > 0 %} data-cc-animate-delay="{{ animate | times: 0.07 }}s"{% endif %}{% endif %}>
<div class="product-block__image-container">
<div class="global-border-radius {% if product.media.size > 1 or settings.product_grid_image_shape == 'natural' or settings.prod_thumb_crop %}hover-images{% endif %} {% if settings.hover_image_enabled == true and product.media.size > 1 %} hover-images--two {% if product.featured_media.preview_image.aspect_ratio == product.media[1].preview_image.aspect_ratio %}same-aspect-ratio{% endif %}{% endif %} relative">
<a class="product-block__image product-block__image--shape-{{ settings.product_grid_image_shape }} product-block__image--crop-{{ settings.prod_thumb_crop }} product-block__image--valign-{{ settings.prod_thumb_crop_align }}" href="{{ product.url | within: collection }}">
{%- if product.featured_media != blank -%}
<div class="image-one">
{% liquid
if settings.product_grid_image_shape == 'natural'
assign aspect_ratio = false
elsif settings.product_grid_image_shape == 'square'
assign aspect_ratio = 1.0
elsif settings.product_grid_image_shape == 'landscape-32'
assign aspect_ratio = 1.5
elsif settings.product_grid_image_shape == 'landscape-54'
assign aspect_ratio = 1.25
elsif settings.product_grid_image_shape == 'portrait-45'
assign aspect_ratio = 0.8
elsif settings.product_grid_image_shape == 'portrait-23'
assign aspect_ratio = 0.67
endif
%}
{% render 'responsive-image', image: product.featured_media.preview_image, aspect_ratio: aspect_ratio %}
</div>
{%- if settings.hover_image_enabled == true and product.media.size > 1 -%}
<div class="image-two">
<div class="rimage-background fade-in lazyload global-border-radius"
data-bgset="{% render 'bgset', image: product.media[1].preview_image %}"
data-sizes="auto"
data-parent-fit="cover">
<noscript>
<img src="{{ product.media[1].preview_image | img_url: '1024x1024' }}" alt="{{ product.media[1].preview_image.alt | escape }}" class="rimage-background__image">
</noscript>
</div>
</div>
{%- endif -%}
{%- else -%}
{{- product.featured_media.preview_image | img_url: '600x600' | img_tag -}}
{%- endif -%}
</a>

{%- if quickbuy -%}
<div class="product-block__quicklook-btn-container md-down-hidden">
<a class="product-block__quicklook-btn btn--quicklook btn btn--primary js-quickbuy-button" href="{{ product.url }}">{{ 'products.quickbuy.quick_buy' | t }}</a>
{% render 'quick-buy-placeholder', product: product %}
</div>
{%- endif -%}
</div>
</div>

<div class="product-block__title">
<a href="{{ product.url | within: collection }}" class="product-block__title-link">{{ product.title }}</a>
</div>
{% capture the_snippet_review_avg %}{% render 'ssw-widget-avg-rate-listing', product: product %}{% endcapture %}
{% unless the_snippet_review_avg contains 'Liquid error' %}
{{ the_snippet_review_avg }}
{% endunless %}

{%- if show_vendor -%}
<div class="product-block__vendor">
{{- product.vendor -}}
</div>
{%- endif -%}

<div class="product-price">
{%- assign cheapest_variant = product.variants | sort: 'price' | first -%}
{% render 'unit-price', variant: cheapest_variant %}

{% if product.price_varies %}
<span class="product-price__from">{{ 'products.product.from_text' | t }}</span>
{% endif %}

<span class="theme_money{% if cheapest_variant.compare_at_price > cheapest_variant.price %} product-price__reduced{% endif %}">
{%- if settings.product_currency_code_enabled -%}
{{- cheapest_variant.price | money_with_currency -}}
{%- else -%}
{{- cheapest_variant.price | money -}}
{%- endif -%}
</span>

{% if cheapest_variant.compare_at_price > cheapest_variant.price %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span class="product-price__compare theme-money">{{ cheapest_variant.compare_at_price | money }}</span>
{% endif %}


{% if product.available %}
{% if cheapest_variant.compare_at_price > cheapest_variant.price and settings.sale_label_enabled %}
<span class="product-label product-label--on-sale global-border-radius">{{ 'products.product.on_sale' | t }}</span>
{% endif %}
{% elsif settings.sold_label_enabled %}
<span class="product-label product-label--sold-out global-border-radius">{{ 'products.product.sold_out' | t }}</span>
{% endif %}


</div>

{%- if settings.swatch_enabled_grid -%}
{%- liquid
assign swatch_count = 0
assign swatch_mobile_limit = 3
-%}
<div class="product-block__swatches">
{%- for product_option in product.options_with_values -%}
{%- liquid
if settings.swatch_enabled_productpage and settings.swatch_option_name contains product_option.name
assign is_swatch = true
else
assign is_swatch = false
endif
-%}
{%- if is_swatch == true -%}
{%- assign product_option_position_0index = product_option.position | minus: 1 -%}
{%- for product_option_value in product_option.values -%}

{%- liquid
assign option_value_variant = false
for variant in product.variants
if variant.options[product_option_position_0index] == product_option_value
assign option_value_variant = variant
break
endif
endfor

if is_swatch and settings.swatch_method == 'image' and option_value_variant.featured_media == blank
continue
endif

assign swatch_count = swatch_count | plus: 1
-%}

<span class="{% if settings.swatch_method == 'image' %}product-swatch-inline__image {% else %}product-swatch-inline__dot {% endif %}rimage-background fade-in lazyload"
data-option-item="{{ product_option_value | downcase | escape }}"
{%- if settings.swatch_method == 'standard' -%}
data-swatch="{{ product_option_value | downcase | replace: '"', '' }}"
{%- elsif settings.swatch_method == 'image' and option_value_variant.featured_media -%}
data-bgset="{{ option_value_variant.featured_media.preview_image | img_url: '80x80', crop: settings.swatch_crop_align }}" data-parent-fit="cover"
{%- endif -%}></span>

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

{%- if settings.swatch_method == 'image' and swatch_count > swatch_mobile_limit -%}
{%- assign remaining = swatch_count | minus: swatch_mobile_limit -%}
<span class="product-block__swatches-more-label tiny-text">{{ 'collections.general.more_swatches' | t: count: remaining }}</span>
{%- endif -%}
</div>
{%- endif -%}

{%- if settings.enable_product_reviews_collection and product.metafields.reviews.rating_count != blank -%}
{%- assign rating_count = product.metafields.reviews.rating_count | plus: 0 -%}
{%- if rating_count > 0 -%}
<div class="theme-product-reviews-summary product-block__rating">
{% render 'rating', rating_value: product.metafields.reviews.rating.value %}
<span class="cc-rating-custom-caption">
{{ rating_count }} {{ 'products.product.reviews_link' | t: count: rating_count }}
</span>
</div>
{%- endif -%}
{%- endif -%}
</div>

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

@StanSavellis code for second one. replace it. EDITED

 

 

<div class="product-block {{ grid_class | default: 'grid-flex__item one-quarter small-down--one-half' }}{% if quickbuy %} js-contains-quickbuy{% endif %}"
{% if animate %} data-cc-animate="{{ animate_style }}"{% if animate > 0 %} data-cc-animate-delay="{{ animate | times: 0.07 }}s"{% endif %}{% endif %}>
<div class="product-block__image-container">
<div class="global-border-radius {% if product.media.size > 1 or settings.product_grid_image_shape == 'natural' or settings.prod_thumb_crop %}hover-images{% endif %} {% if settings.hover_image_enabled == true and product.media.size > 1 %} hover-images--two {% if product.featured_media.preview_image.aspect_ratio == product.media[1].preview_image.aspect_ratio %}same-aspect-ratio{% endif %}{% endif %} relative">
<a class="product-block__image product-block__image--shape-{{ settings.product_grid_image_shape }} product-block__image--crop-{{ settings.prod_thumb_crop }} product-block__image--valign-{{ settings.prod_thumb_crop_align }}" href="{{ product.url | within: collection }}">
{%- if product.featured_media != blank -%}
<div class="image-one">
{% liquid
if settings.product_grid_image_shape == 'natural'
assign aspect_ratio = false
elsif settings.product_grid_image_shape == 'square'
assign aspect_ratio = 1.0
elsif settings.product_grid_image_shape == 'landscape-32'
assign aspect_ratio = 1.5
elsif settings.product_grid_image_shape == 'landscape-54'
assign aspect_ratio = 1.25
elsif settings.product_grid_image_shape == 'portrait-45'
assign aspect_ratio = 0.8
elsif settings.product_grid_image_shape == 'portrait-23'
assign aspect_ratio = 0.67
endif
%}
{% render 'responsive-image', image: product.featured_media.preview_image, aspect_ratio: aspect_ratio %}
</div>
{%- if settings.hover_image_enabled == true and product.media.size > 1 -%}
<div class="image-two">
<div class="rimage-background fade-in lazyload global-border-radius"
data-bgset="{% render 'bgset', image: product.media[1].preview_image %}"
data-sizes="auto"
data-parent-fit="cover">
<noscript>
<img src="{{ product.media[1].preview_image | img_url: '1024x1024' }}" alt="{{ product.media[1].preview_image.alt | escape }}" class="rimage-background__image">
</noscript>
</div>
</div>
{%- endif -%}
{%- else -%}
{{- product.featured_media.preview_image | img_url: '600x600' | img_tag -}}
{%- endif -%}
</a>

{%- if quickbuy -%}
<div class="product-block__quicklook-btn-container md-down-hidden">
<a class="product-block__quicklook-btn btn--quicklook btn btn--primary js-quickbuy-button" href="{{ product.url }}">{{ 'products.quickbuy.quick_buy' | t }}</a>
{% render 'quick-buy-placeholder', product: product %}
</div>
{%- endif -%}
</div>
</div>

<div class="product-block__title">
<a href="{{ product.url | within: collection }}" class="product-block__title-link">{{ product.title }}</a>
</div>
{% capture the_snippet_review_avg %}{% render 'ssw-widget-avg-rate-listing', product: product %}{% endcapture %}
{% unless the_snippet_review_avg contains 'Liquid error' %}
{{ the_snippet_review_avg }}
{% endunless %}

{%- if show_vendor -%}
<div class="product-block__vendor">
{{- product.vendor -}}
</div>
{%- endif -%}

<div class="product-price">
{%- assign cheapest_variant = product.variants | sort: 'price' | first -%}
{% render 'unit-price', variant: cheapest_variant %}

{% if product.available %}
{% if product.price_varies %}
<span class="product-price__from">{{ 'products.product.from_text' | t }}</span>
{% endif %}


<span class="theme_money{% if cheapest_variant.compare_at_price > cheapest_variant.price %} product-price__reduced{% endif %}">
{%- if settings.product_currency_code_enabled -%}
{{- cheapest_variant.price | money_with_currency -}}
{%- else -%}
{{- cheapest_variant.price | money -}}
{%- endif -%}
</span>
{% if cheapest_variant.compare_at_price > cheapest_variant.price %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span class="product-price__compare theme-money">{{ cheapest_variant.compare_at_price | money }}</span>
{% endif %}
{% endif %}


{% if product.available %}
{% if cheapest_variant.compare_at_price > cheapest_variant.price and settings.sale_label_enabled %}
<span class="product-label product-label--on-sale global-border-radius">{{ 'products.product.on_sale' | t }}</span>
{% endif %}
{% elsif settings.sold_label_enabled %}
<span class="product-label product-label--sold-out global-border-radius">{{ 'products.product.sold_out' | t }}</span>
{% endif %}


</div>

{%- if settings.swatch_enabled_grid -%}
{%- liquid
assign swatch_count = 0
assign swatch_mobile_limit = 3
-%}
<div class="product-block__swatches">
{%- for product_option in product.options_with_values -%}
{%- liquid
if settings.swatch_enabled_productpage and settings.swatch_option_name contains product_option.name
assign is_swatch = true
else
assign is_swatch = false
endif
-%}
{%- if is_swatch == true -%}
{%- assign product_option_position_0index = product_option.position | minus: 1 -%}
{%- for product_option_value in product_option.values -%}

{%- liquid
assign option_value_variant = false
for variant in product.variants
if variant.options[product_option_position_0index] == product_option_value
assign option_value_variant = variant
break
endif
endfor

if is_swatch and settings.swatch_method == 'image' and option_value_variant.featured_media == blank
continue
endif

assign swatch_count = swatch_count | plus: 1
-%}

<span class="{% if settings.swatch_method == 'image' %}product-swatch-inline__image {% else %}product-swatch-inline__dot {% endif %}rimage-background fade-in lazyload"
data-option-item="{{ product_option_value | downcase | escape }}"
{%- if settings.swatch_method == 'standard' -%}
data-swatch="{{ product_option_value | downcase | replace: '"', '' }}"
{%- elsif settings.swatch_method == 'image' and option_value_variant.featured_media -%}
data-bgset="{{ option_value_variant.featured_media.preview_image | img_url: '80x80', crop: settings.swatch_crop_align }}" data-parent-fit="cover"
{%- endif -%}></span>

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

{%- if settings.swatch_method == 'image' and swatch_count > swatch_mobile_limit -%}
{%- assign remaining = swatch_count | minus: swatch_mobile_limit -%}
<span class="product-block__swatches-more-label tiny-text">{{ 'collections.general.more_swatches' | t: count: remaining }}</span>
{%- endif -%}
</div>
{%- endif -%}

{%- if settings.enable_product_reviews_collection and product.metafields.reviews.rating_count != blank -%}
{%- assign rating_count = product.metafields.reviews.rating_count | plus: 0 -%}
{%- if rating_count > 0 -%}
<div class="theme-product-reviews-summary product-block__rating">
{% render 'rating', rating_value: product.metafields.reviews.rating.value %}
<span class="cc-rating-custom-caption">
{{ rating_count }} {{ 'products.product.reviews_link' | t: count: rating_count }}
</span>
</div>
{%- endif -%}
{%- endif -%}
</div>

 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
Zeel-prajapatii
Shopify Partner
138 32 27

Hey @StanSavellis code for the first one. please replace it.

 

{% if section.settings.hide_if_empty == false or section.settings.product_list != blank %}
{%- liquid
if section.settings.enable_carousel == true
assign show_carousel_nav = true

if section.settings.product_list != blank and section.settings.product_list.size <= section.settings.grid
assign show_carousel_nav = false
endif
else
assign show_carousel_nav = false
endif
-%}

<div class="relative container large-row featured-collection" data-section-id="{{ section.id }}" data-section-type="featured-collection">
<div class="page-width">
{%- if section.settings.title != blank or section.settings.link_text != blank or section.settings.enable_carousel == true -%}
<div class="large-row ">

<div class="text-center">
{% if section.settings.title != blank %}
<h2 class="featured-collection--title {% if section.settings.enlarge_title %}giant-title{% else %}large-title{% endif%}">{{ section.settings.title | escape }}</h2>
{% endif %}

{% if section.settings.link_text != blank %}
<a class="standard-link" href="{{ section.settings.link_url }}">{{ section.settings.link_text | escape }}</a>
{% endif %}
</div>
</div>
{% endif %}

<div class="product-carousel-peek">
{%- if show_carousel_nav -%}
<div class="featured-collection-controls featured-collection-controls--prev">
<button class="btn--plain prev icon feather-icon" aria-label="{{ 'general.accessibility_labels.previous' | t | escape }}">{% render 'feather-arrow-left' %}</button>
</div>
{%- endif -%}

<div class="grid-flex" {%- if section.settings.enable_carousel == true -%}data-carousel-enabled data-slides-per-row="{{ section.settings.grid }}"{%- endif -%}>
{%- assign grid_class = 'one-quarter' -%}
{%- if section.settings.grid == 2 -%}
{%- assign grid_class = 'one-half' -%}
{%- elsif section.settings.grid == 3 -%}
{%- assign grid_class = 'one-third' -%}
{%- elsif section.settings.grid == 5 -%}
{%- assign grid_class = 'one-fifth' -%}
{%- endif -%}

{%- if section.settings.grid_mobile == "2" -%}
{%- assign mobile_grid_class = 'small-down--one-half' -%}
{%- else -%}
{%- assign mobile_grid_class = 'small-down--one-whole' -%}
{%- endif -%}
{% capture grid_class_list %}{{ grid_class }} {{ mobile_grid_class }} grid-flex__item{% endcapture %}

{% for product in section.settings.product_list %}
{% assign quickbuy_toggle = settings.quickbuy_buttons_toggle %}
{% render 'product-block', quickbuy: quickbuy_toggle, product: product, grid_class: grid_class_list, show_vendor: section.settings.show_vendor %}
{%- else -%}
{%- liquid
if section.settings.enable_carousel == true
assign placeholder_count = 8
else
assign placeholder_count = section.settings.grid
endif
-%}
{% for i in (1..placeholder_count) %}
<div class="featured-collection--product product-block relative grid-flex__item {{ grid_class_list }}">
<div class="product-block__image-container">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
<div class="global-border-radius image-one">
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg placeholder-svg--small' }}
</div>
</div>
<div class="product-block__title">
{{ 'homepage.onboarding.product_title' | t }}
</div>
<div class="product-price">
{% if product.available %}
<span class="theme-money">
{%- if settings.product_currency_code_enabled -%}
{{- 2000 | money_with_currency -}}
{%- else -%}
{{- 2000 | money -}}
{%- endif -%}
</span>
{% endif %}
</div>
</div>
{% endfor %}
{% endfor %}
</div>

{%- if show_carousel_nav -%}
<div class="featured-collection-controls featured-collection-controls--next">
<button class="btn--plain next icon feather-icon" aria-label="{{ 'general.accessibility_labels.previous' | t | escape }}">{% render 'feather-arrow-right' %}</button>
</div>
{% render 'peek-carousel-advice' %}
{%- endif -%}
</div>
</div>
</div>
{% endif %}

{% schema %}
{
"name": "Product list",
"tag": "section",
"class": "section-product-template-product-list",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Product list"
},
{
"type": "checkbox",
"id": "enlarge_title",
"label": "Enlarge heading",
"default": false
},
{
"type": "text",
"id": "link_text",
"label": "Link text",
"default": "Shop now"
},
{
"type": "url",
"id": "link_url",
"label": "Link URL"
},
{
"type": "product_list",
"id": "product_list",
"label": "Product list"
},
{
"type": "checkbox",
"id": "hide_if_empty",
"label": "Hide section if product list is empty",
"info": "Useful when using a dynamic source",
"default": false
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": false
},
{
"type": "checkbox",
"id": "enable_carousel",
"label": "Enable carousel",
"default": false
},
{
"type": "range",
"id": "grid",
"label": "Desktop products per row",
"min": 2,
"max": 5,
"step": 1,
"default": 4
},
{
"type": "select",
"id": "grid_mobile",
"label": "Mobile products per row",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
}
],
"default": "2"
}
],
"presets": [
{
"name": "Product list"
}
],
"enabled_on": {
"templates": [
"product"
]
}
}
{% endschema %}

 

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
StanSavellis
Tourist
21 0 0

The code for the Collections pages seemed to have worked (THANK YOU) but the individual Products pages has not?

 

Collections:

 

Screenshot 2024-02-16 at 6.05.25 pm.png

Products:

 

Screenshot 2024-02-16 at 6.04.31 pm.png

Zeel-prajapatii
Shopify Partner
138 32 27

Hey @StanSavellis maybe the file is different for the product page. please search for the "product" and then share me a screenshot of filtered files. i'll let you know to share the code for particular file.

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
StanSavellis
Tourist
21 0 0

See attached:

 

Screenshot 2024-02-16 at 6.09.54 pm.png

 

I have also encountered another issue:

 

Screenshot 2024-02-16 at 6.08.17 pm.png

 

All of these product groups have multiple products, each sold separately. Some of these (but not all) are sold out, so they should still show a dollar vase (from $x) however the third one (circled) does not, even though there are still pieces from that series available.

 

Why would this be?

StanSavellis
Tourist
21 0 0
Zeel-prajapatii
Shopify Partner
138 32 27

Hey i have edited the code for second one. marked EDITED. please copy my code again and replace. 

 

Also ,the file for product page is "main-product.liquid". you can share the code for that file , i will make modifications and share you the updated code here. 

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
StanSavellis
Tourist
21 0 0

That has fixed the issue - THANK YOU again:

 

Screenshot 2024-02-16 at 6.27.46 pm.png

 

 

Here is the code for the other one:

 

 

{%- liquid
assign current_variant = product.selected_or_first_available_variant
assign featured_media = current_variant.featured_media | default: product.featured_media
assign show_size_chart = false

assign product_form_id = 'product-form-' | append: section.id | append: product.id
assign installments_form_id = product_form_id | append: '-installments'

assign form_class = 'row'
if settings.on_add_to_cart != 'go_to_cart'
assign form_class = form_class | append: ' ajax-product-form'
endif
unless current_variant.available
assign form_class = form_class | append: ' variant--unavailable'
endunless
-%}

<div data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" data-components="accordion,custom-select">
<div class="container product-detail very-large-row-under" data-product-id="{{ product.id }}">
<div class="page-width">
<div class="product-layout-grid product-layout-grid--{{ section.settings.media_size }}">
<div class="product-layout-grid__images layout--{{ section.settings.media_layout }}{% if product.media.size > 1 %} has-multiple-images{% endif %}" data-product-image-layout="{{ section.settings.media_layout | split: '-' | first }}">
<div class="product-layout-grid__images-and-thumbs {% if section.settings.enable_sticky_media %} sticky-element{% endif %}">
<div class="product-detail__images-container">
{% if product.media.size > 0 %}
<div class="product-detail__images" data-featured-media-id="{{ featured_media.id }}">
{% for media in product.media %}
<div class="product-detail__image">
{%- if media.media_type == 'image' -%}
<a href="{{ media.preview_image.src | img_url: 'master' }}"
data-product-image
data-product-media
data-media-id="{{ media.id }}"
data-image-w="{{ media.preview_image.width }}"
data-image-h="{{ media.preview_image.height }}"
class="global-border-radius">
{%- else -%}
<div class="global-border-radius" data-product-media data-media-id="{{ media.id }}">
{%- endif -%}

{%- render 'media', media: media -%}

{%- unless media.media_type == 'image' -%}
</div>
{%- else -%}
</a>
{%- endunless -%}
</div>
{% endfor %}
</div>
{% else %}
{% render 'media' with featured_media %}
{% endif %}

{%- assign models = product.media | where: 'media_type', 'model' -%}
{% if models.size > 0 %}
<script type="application/json" class="model-json">
{{- product.media | where: 'media_type', 'model' | json -}}
</script>
<button
class="view-in-space"
data-shopify-xr
data-shopify-model3d-id="{{ models.first.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden>
{%- render 'icon-3d-badge-full-color' -%}
<span class="view-in-space__text">{{ 'products.product.view_in_space' | t }}</span>
</button>
{% endif %}

<div class="slick-external-controls">
<div class="slick-arrows"></div>
<div class="slick-dots"></div>
</div>
</div>

{% if section.settings.media_layout contains 'thumbnails' and product.media.size > 1 %}
<div class="product-detail__thumbnails">
{% for media in product.media %}
<a href="{{ media.preview_image | img_url: 'master' }}"
class="product-detail__thumbnail global-border-radius-medium media-thumbnail media-thumbnail--media-{{ media.media_type }} {% if featured_media.id == media.id %}thumb-active{% endif %}"
data-media-id="{{ media.id }}"
data-product-media-thumbnail>
{% render 'responsive-image', image: media.preview_image %}

{%- if media.media_type == 'video' or media.media_type =='external_video' -%}
<div class="media-thumbnail__badge">
{%- render 'icon-video-badge-full-color' -%}
</div>
{%- elsif media.media_type == 'model' -%}
<div class="media-thumbnail__badge">
{%- render 'icon-3d-badge-full-color' -%}
</div>
{%- endif -%}
</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>

<div class="product-layout-grid__detail">
<div class="product-detail__detail sticky-element" {% if product.template_suffix contains 'preorder' %} data-preorder{% endif %}>
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when '@app' -%}
{%- render block -%}

{%- when 'title_and_price' -%}
<div class="product-detail__title-area row" {{ block.shopify_attributes }}>
<h1 class="product-detail__title small-title">{{ product.title }}</h1>

<div class="product-detail__price product-price" data-price-wrapper>
<span class="{% if current_variant.compare_at_price > current_variant.price %}product-price__reduced{% endif %}" data-product-price data-product-detail-price>
<span class="theme-money large-title">
{%- if settings.product_currency_code_enabled -%}
{{- current_variant.price | money_with_currency -}}
{%- else -%}
{{- current_variant.price | money -}}
{%- endif -%}
</span>
</span>

{%- if product.compare_at_price_max > product.price -%}
<span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>
<span class="tiny-title" data-compare-price>
{%- if current_variant.compare_at_price > current_variant.price -%}
<span class="product-price__compare theme-money">{{ current_variant.compare_at_price | money }}</span>
{%- endif -%}
</span>
{%- endif -%}

{% render 'unit-price', variant: current_variant %}
</div>

{%- form 'product', product, id: installments_form_id, class: form_class -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" data-product-secondary-select>
{{ form | payment_terms }}
{%- endform -%}

{%- if block.settings.show_tax_and_shipping -%}
{%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product-policies small-text">
{%- if cart.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
{%- endif -%}
</div>

{%- when 'reviews_summary' -%}
{%- if product.metafields.reviews.rating_count != blank -%}
{%- assign rating_count = product.metafields.reviews.rating_count | plus: 0 -%}
{%- if rating_count > 0 -%}
<div class="theme-product-reviews-summary" {{ block.shopify_attributes }}>
{% render 'rating', rating_value: product.metafields.reviews.rating.value %}
<span class="cc-rating-custom-caption">
{{ rating_count }} {{ 'products.product.reviews_link' | t: count: rating_count }}
</span>
</div>
{%- endif -%}
{%- endif -%}

{%- when 'vendor' -%}
{% comment %}
Do we have a collection that has the same name as our product vendor name?
If we do, let's have the vendor link point to it.
If not, we will point to the automatic vendor collection.
{% endcomment %}
{%- assign product_vendor_handle = product.vendor | handle -%}
{%- if collections[product_vendor_handle].handle == product_vendor_handle -%}
{%- assign vendor_url = collections[product_vendor_handle].url -%}
{%- else -%}
{%- assign vendor_url = product.vendor | url_for_vendor -%}
{%- endif -%}
{%- capture vendor_link -%}<a href="{{ vendor_url }}">{{ product.vendor }}</a>{%- endcapture -%}
<div class="product-detail__vendor" {{ block.shopify_attributes }}>
{{ 'products.product.vendor_html' | t: vendor: vendor_link }}
</div>

{%- when 'type' -%}
{%- if product.type != blank -%}
{%- assign product_type_handle = product.type | handle -%}
{%- if collections[product_type_handle].handle == product_type_handle -%}
{%- assign type_url = collections[product_type_handle].url -%}
{%- else -%}
{%- assign type_url = product.type | url_for_type -%}
{%- endif -%}

<div class="product-detail__type type-wrapper" {{ block.shopify_attributes }}>
{{ 'products.product.type' | t }}
<a class="type-wrapper__type" href="{{ type_url }}">{{ product.type }}</a>
</div>
{%- endif -%}

{%- when 'sku' -%}
<div class="product-detail__sku sku-wrapper {% if product.selected_or_first_available_variant.sku == blank %}visually-hidden{% endif %}" {{ block.shopify_attributes }}>
{{ 'products.product.sku' | t }}
<span class="sku-wrapper__sku">{{ product.selected_or_first_available_variant.sku }}</span>
</div>

{%- when 'variant_picker' -%}
{%- unless product.has_only_default_variant -%}
<div class="product-detail__options row" {{ block.shopify_attributes }}>
{%- assign show_size_chart = false -%}
{% for option in product.options_with_values %}
{%- if block.settings.size_chart_enabled and option.name == block.settings.size_chart_option_name -%}
{%- assign show_size_chart = true -%}
{%- assign size_chart_page = pages[block.settings.size_chart_page_id] -%}
{%- break -%}
{%- endif -%}
{% endfor %}
{% render 'variant-picker', section: section, product: product, block: block, show_size_chart: show_size_chart, size_chart_page: size_chart_page %}

</div>
{%- endunless -%}

{%- when 'buy_buttons' -%}
{%- form 'product', product, id: product_form_id, class: form_class -%}
{%- liquid
assign inventory_class = ''
assign inventory_threshold = block.settings.inventory_notice_threshold
assign inventory_qty = current_variant.inventory_quantity

if inventory_qty > 0
if inventory_qty <= inventory_threshold
assign inventory_class = ' product-inventory--low'
assign inventory_status = 'products.labels.low_stock' | t
else
if block.settings.show_inventory_notice == 'low'
assign inventory_class = ' product-inventory--none'
else
assign inventory_status = 'products.labels.in_stock' | t
endif
endif
else
assign inventory_class = ' product-inventory--none'
endif

assign gift_card_recipient_feature_active = false
if block.settings.show_gift_card_recipient and product.gift_card?
assign gift_card_recipient_feature_active = true
endif

assign enable_dynamic_payment_button = false
if block.settings.enable_payment_button and product.selling_plan_groups == empty and gift_card_recipient_feature_active == false
unless product.template_suffix contains 'preorder'
assign enable_dynamic_payment_button = true
endunless
endif

if gift_card_recipient_feature_active
render 'gift-card-recipient', product: product, form: form, section: section, use_label: true
endif
-%}

<select name="id" class="no-js" data-product-select aria-label="{{ 'products.product.selector_label' | t | escape }}">
{%- for variant in product.variants -%}
{%- liquid
assign show_inventory_qty = false

unless variant.inventory_quantity > inventory_threshold and block.settings.show_inventory_count != 'always'
assign show_inventory_qty = true
endunless

if variant.inventory_quantity < 10 and settings.hide_unavailable_quantity_opts
assign show_inventory_qty = true
endif
-%}
<option value="{{ variant.id }}"
{% if variant == current_variant %}selected{% endif %}
{% unless variant.available %}disabled{% endunless %}
{% if variant.inventory_management != blank %}
data-stock="{% if variant.inventory_quantity > 0 %}in{% else %}out{% endif %}"
{% if show_inventory_qty %}data-inventory="{{ variant.inventory_quantity }}"{% endif %}
{% endif %}>
{{- variant.title -}}
</option>
{%- endfor -%}
</select>

<div class="large-row{% if enable_dynamic_payment_button == true %} with-payment-buttons{% endif %}" {{ block.shopify_attributes }}>

{%- if current_variant.inventory_management != blank and block.settings.show_inventory_notice != 'never' -%}
<div class="product-inventory{{ inventory_class }}" data-threshold="{{ inventory_threshold }}" data-show-notice="{{ block.settings.show_inventory_notice }}" data-show-count="{{ block.settings.show_inventory_count }}">
{% if inventory_qty > 0 %}
{%- unless block.settings.show_inventory_notice == 'low' and inventory_qty > inventory_threshold -%}
<span class="product-inventory__status">{{ inventory_status }}</span>
{% unless block.settings.show_inventory_count == 'never' %}
{% unless block.settings.show_inventory_count == 'low' and inventory_qty > inventory_threshold %}
{% if inventory_qty == 1 %}
- {{ 'products.labels.single_unit_available' | t }}
{% else %}
- {{ 'products.labels.x_units_available' | t: quantity: inventory_qty }}
{% endif %}
{% endunless %}
{% endunless %}
{% endunless %}
{% endif %}
</div>
{%- endif -%}

{%- if block.settings.show_quantity_selector -%}
{% render 'quantity-selector', variant: current_variant %}
{%- endif -%}

<div class="payment-buttons">
{%- capture add_to_cart_text -%}
{%- if product.template_suffix contains 'preorder' -%}
{{- 'products.product.preorder' | t -}}
{%- else -%}
{{- 'products.product.add_to_cart' | t -}}
{%- endif -%}
{%- endcapture -%}
<button
class="btn {% if enable_dynamic_payment_button == true %}btn--secondary{% endif %}"
type="submit"
name="add"
data-add-to-cart
{% unless current_variant.available %}disabled{% endunless %}>
<span data-add-to-cart-text>
{%- if current_variant.available -%}
{{ add_to_cart_text }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
</button>

{% if enable_dynamic_payment_button == true %}
{{ form | payment_button }}
{% endif %}
</div>
</div>

{%- if block.settings.show_pickup_availability -%}
{% render 'store-availability', product: product, current_variant: current_variant %}
{%- endif -%}

{% if product.available and block.settings.show_backorder_text == true %}
{% render 'backorder', product: product, variant: current_variant %}
{% endif %}
{%- endform -%}

{%- when 'description' -%}
{%- capture product_description -%}
{% if block.settings.show_tabs %}
{%- liquid
assign tab_1_title = block.settings.tab_1_title

assign tab_2_title = block.settings.tab_2_title
assign tab_2_content = block.settings.tab_2_content
if block.settings.tab_2_page != blank
assign tab_2_title = tab_2_title | default: pages[block.settings.tab_2_page].title
assign tab_2_content = pages[block.settings.tab_2_page].content
endif

assign tab_3_title = block.settings.tab_3_title
assign tab_3_content = block.settings.tab_3_content
if block.settings.tab_3_page != blank
assign tab_3_title = tab_3_title | default: pages[block.settings.tab_3_page].title
assign tab_3_content = pages[block.settings.tab_3_page].content
endif
-%}
{% if block.settings.tab_direction == 'horizontal' %}
<div class="large-row large-row-under {% if block.settings.full_width == false %} product-description__no-expand{% endif %}" {{ block.shopify_attributes }}>
<ul class="tabs">
<li class="rte--expanded-images">
<a href="#tab1">{{ tab_1_title }}</a>
</li>
{% if tab_2_content != blank %}
<li>
<a href="#tab2">{{ tab_2_title }}</a>
</li>
{% endif %}
{% if tab_3_content != blank %}
<li>
<a href="#tab3">{{ tab_3_title }}</a>
</li>
{% endif %}
</ul>

<div id="tab1" class="rte rte--expanded-images clearfix row tab-content tab-content--active {% if block.settings.full_width == false %} product-description__no-expand{% endif %}">
{{ product.description }}
</div>

{% if tab_2_content != blank %}
<div id="tab2" class="rte row tab-content">
{{ tab_2_content }}
</div>
{% endif %}

{% if tab_3_content != blank %}
<div id="tab3" class="rte row tab-content">
{{ tab_3_content }}
</div>
{% endif %}
</div>

{% else %}

<div class="product-detail-accordion" {{ block.shopify_attributes }}>
{%- capture accordion_title_1 -%}
{%- if block.settings.icon_1 == blank -%}
{{- tab_1_title -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon_1, size: 'small' %}
<span class="content-with-icon__beside">{{ tab_1_title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}

{%- capture accordion_title_2 -%}
{%- if block.settings.icon_2 == blank -%}
{{- tab_2_title -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon_2, size: 'small' %}
<span class="content-with-icon__beside">{{ tab_2_title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}

{%- capture accordion_title_3 -%}
{%- if block.settings.icon_3 == blank -%}
{{- tab_3_title -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon_3, size: 'small' %}
<span class="content-with-icon__beside">{{ tab_3_title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}

{% render 'accordion',
allow_multi_open: true,
add_content_class: 'rte cf',
first_item_open: block.settings.open,
item1_title: accordion_title_1,
item1_content: product.description,
item2_title: accordion_title_2,
item2_content: tab_2_content,
item3_title: accordion_title_3,
item3_content: tab_3_content
%}
</div>
{% endif %}

{%- else -%}
<div class="rte rte--expanded-images clearfix row {% if block.settings.full_width == false %} product-description__no-expand{% endif %}">
{{ product.description }}
</div>
{%- endif -%}
{%- endcapture -%}

{%- if block.settings.full_width -%}
{%- capture full_width_content -%}{{ full_width_content }}{{ product_description }}{%- endcapture -%}
{%- else -%}
{{ product_description }}
{%- endif -%}

{% when 'custom_option' %}
{%- if block.settings.label != blank -%}
{%- liquid
assign custom_option_input_id = product_form_id | append: '-custom-' | append: forloop.index
assign custom_input_name = block.settings.label | escape | prepend: 'properties[' | append: ']'
-%}
<div class="custom-option" {{ block.shopify_attributes}}>
{% case block.settings.type %}
{% when 'text' %}
<div class="input-wrapper form-row">
<label class="label" for="{{ custom_option_input_id }}">{{ block.settings.label | escape }}</label>
<input class="custom-option__text-input" type="text" id="{{ custom_option_input_id }}" form="{{ product_form_id }}" name="{{ custom_input_name }}" {% if block.settings.text_required %}required{% endif %}>
</div>

{% when 'textarea' %}
<div class="input-wrapper form-row">
<label class="label" for="{{ custom_option_input_id }}">{{ block.settings.label | escape }}</label>
<textarea class="custom-option__text-input" id="{{ custom_option_input_id }}" form="{{ product_form_id }}" name="{{ custom_input_name }}" {% if block.settings.text_required %}required{% endif %}></textarea>
</div>

{% when 'checkbox' %}
<div class="option-selector form-row">
<label class="label custom-option__checkbox">
{{ block.settings.label | escape }}
<input type="hidden" form="{{ product_form_id }}" name="{{ custom_input_name }}" value="{{ block.settings.checkbox_unchecked_value | escape }}">
<input type="checkbox" form="{{ product_form_id }}" name="{{ custom_input_name }}" value="{{ block.settings.checkbox_checked_value | escape }}">
<span class="custom-option__checkbox-check icon feather-icon">{% render 'feather-check' %}</span>
</label>
</div>

{% when 'multiple' %}
{%- assign custom_options = block.settings.multiple_options | newline_to_br | strip_newlines | split: '<br />' -%}

{% if block.settings.multiple_style == 'dropdown' %}
<div class="form-row">
<div class="option-selector" data-selector-type="dropdown">
{% render 'custom-select',
id: custom_option_input_id,
label: block.settings.label,
label_inside: true,
option_values: custom_options,
selected_value: custom_options.first,
include_native: true,
native_name: custom_input_name,
native_form_id: product_form_id
%}
</div>
</div>

{% else %}
<div class="form-row">
<fieldset class="option-selector" data-selector-type="listed" data-index="custom-option">
<legend class="label">{{ block.settings.label | escape }}</legend>
<div class="option-selector__btns">
{% for option in custom_options %}
{% assign custom_option_input_id = custom_option_input_id | append: forloop.index %}
<input class="opt-btn js-option" type="radio" name="{{ custom_input_name }}" id="{{ custom_option_input_id }}" form="{{ product_form_id }}" value="{{ option | escape }}"{% if forloop.first %} checked{% endif %}>
<label class="opt-label" for="{{ custom_option_input_id }}">{{ option }}</label>
{% endfor %}
</div>
</fieldset>
</div>
{% endif %}

{% endcase %}
</div>
{%- endif -%}

{%- when 'sharing' -%}
{% render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}

{%- when 'text' -%}
{%- if block.settings.text != blank -%}
<div class="row" {{ block.shopify_attributes }}>
{{ block.settings.text }}
</div>
{%- endif -%}

{%- when 'richtext' -%}
{%- if block.settings.richtext != blank -%}
<div class="row rte" {{ block.shopify_attributes }}>
{{ block.settings.richtext }}
</div>
{%- endif -%}

{%- when 'link' -%}
<div class="row" {{ block.shopify_attributes }}>
<a class="{% if block.settings.style == 'button_1' %}btn btn--small btn--primary{% elsif block.settings.style == 'button_2' %}btn btn--small btn--secondary{% else %}standard-link{% endif %}" href="{{ block.settings.url }}">{{ block.settings.text | escape }}</a>
</div>

{%- when 'image' -%}
{%- if block.settings.image != blank -%}
<div class="row" style="max-width: {{ block.settings.image_width }}px" {{ block.shopify_attributes }}>
{%- if block.settings.url != blank -%}<a href="{{ block.settings.url }}">{%- endif -%}
<div class="global-border-radius">
{% render 'responsive-image', image: block.settings.image %}
</div>
{%- if block.settings.url != blank -%}</a>{%- endif -%}
</div>
{% endif %}

{% when 'accordion' %}
{%- capture accordion_content -%}
{%- liquid
assign content = block.settings.content
if block.settings.page != blank
assign content = pages[block.settings.page].content
endif
-%}
{%- if content != blank -%}
<div class="product-detail-accordion" {{ block.shopify_attributes }}>
{%- capture accordion_title -%}
{%- if block.settings.icon == blank -%}
{{- block.settings.title | escape -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon, size: 'small' %}
<span class="content-with-icon__beside">{{ block.settings.title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}
{% render 'accordion', allow_multi_open: true, add_content_class: 'rte cf', first_item_open: block.settings.open, item1_title: accordion_title, item1_content: content %}
</div>
{%- endif -%}
{%- endcapture -%}

{%- if block.settings.full_width -%}
{%- capture full_width_content -%}{{ full_width_content }}{{ accordion_content }}{%- endcapture -%}
{%- else -%}
{{ accordion_content }}
{%- endif -%}

{%- when 'complementary' -%}
<cc-fetched-content data-id="{{ block.id }}" data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&intent=complementary" contains-product-blocks>
{%- if recommendations.performed and recommendations.products_count > 0 -%}
{% if block.settings.enable_carousel %}
<div class="row content-products js-content-products-slider" {{ block.shopify_attributes }}>
<div class="flex">
<div class="content-products__title">{{ block.settings.block_heading | escape }}</div>
{% if recommendations.products_count > 1 and block.settings.max_products > 1 %}
<div class="content-products-controls">
<button class="btn--plain prev icon feather-icon" aria-label="{{ 'general.accessibility_labels.previous' | t | escape }}">{% render 'feather-arrow-left' %}</button>
<button class="btn--plain next icon feather-icon" aria-label="{{ 'general.accessibility_labels.next' | t | escape }}">{% render 'feather-arrow-right' %}</button>
</div>
{% endif %}
</div>
<div class="content-products__products product-carousel-peek">
<div class="grid grid--uniform">
{% liquid
for related_product in recommendations.products limit: block.settings.max_products
render 'product-block', product: related_product, grid_class: 'grid__item one-half small-down--one-half'
endfor
%}
</div>
</div>
{% render 'peek-carousel-advice' %}
</div>
{% else %}
<div class="row content-products content-products--no-carousel" {{ block.shopify_attributes }}>
<div class="content-products__title">{{ block.settings.block_heading | escape }}</div>
<div class="content-products__products">
<div class="grid-flex">
{% liquid
for related_product in recommendations.products limit: block.settings.max_products
render 'product-block', product: related_product, grid_class: 'grid-flex__item one-half small-down--one-half'
endfor
%}
</div>
</div>
</div>
{% endif %}
{%- endif -%}
</cc-fetched-content>

{%- when 'custom_liquid' -%}
{%- if block.settings.custom_liquid != blank -%}
<div class="row" {{ block.shopify_attributes }}>
{{ block.settings.custom_liquid }}
</div>
{%- endif -%}

{% endcase %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>

{%- if full_width_content != blank -%}
<div class="container row">
<div class="reading-width reading-width--no-mobile-padding">
{{ full_width_content }}
</div>
</div>
{%- endif -%}

{%- if show_size_chart == true -%}
{% render 'size-chart', size_chart_page: size_chart_page %}
{%- endif -%}

{% unless product == empty %}
<script type="application/json" class="ProductJson-{{ product.id }}" data-product-json>
{{ product | json }}
</script>
{% endunless %}
</div>

{%- assign current_variant = product.selected_or_first_available_variant -%}
{% render 'structured-data-product', product: product, current_variant: current_variant %}

{% schema %}
{
"name": "Product details",
"class": "section-product-template",
"settings": [
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "checkbox",
"id": "enable_sticky_media",
"label": "Enable stick on scroll",
"default": true
},
{
"type": "select",
"id": "media_size",
"label": "Size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "medium"
},
{
"type": "select",
"id": "media_layout",
"label": "Layout",
"options": [
{
"label": "List",
"value": "list"
},
{
"label": "Thumbnails - below",
"value": "thumbnails-below"
},
{
"label": "Thumbnails - left",
"value": "thumbnails-left"
}
],
"default": "list"
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": false
}
],
"blocks": [
{
"type": "@app"
},
{
"type": "buy_buttons",
"name": "Buy buttons",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": "Show quantity selector",
"default": true
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "show_gift_card_recipient",
"label": "Show recipient information form for gift card products.",
"info": "Allow customers to send gift cards to a recipient along with a personal message. When enabled, the dynamic checkout button will be disabled for gift cards. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-field...)"
},
{
"type": "checkbox",
"id": "show_pickup_availability",
"label": "Show pickup availability",
"default": true,
"info": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/loca...)"
},
{
"type": "checkbox",
"id": "show_backorder_text",
"label": "Show backorder text",
"default": true,
"info": "Only shows for products which use Shopify inventory tracking and are available to purchase when out of stock."
},
{
"type": "header",
"content": "Inventory"
},
{
"type": "select",
"id": "show_inventory_notice",
"label": "Show inventory notice",
"options": [
{
"label": "Never",
"value": "never"
},
{
"label": "Only when inventory low",
"value": "low"
},
{
"label": "Always",
"value": "always"
}
],
"default": "never"
},
{
"type": "select",
"id": "show_inventory_count",
"label": "Show count in inventory notice",
"options": [
{
"label": "Never",
"value": "never"
},
{
"label": "Only when inventory low",
"value": "low"
},
{
"label": "Always",
"value": "always"
}
],
"default": "low"
},
{
"type": "range",
"id": "inventory_notice_threshold",
"min": 1,
"max": 100,
"step": 1,
"label": "Low inventory threshold",
"default": 10
}
]
},
{
"type": "complementary",
"name": "Complementary products",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To select complementary products, add the Search & Discovery app. [Learn more](https:\/\/shopify.dev\/themes\/product-merchandising\/recommendations)"
},
{
"type": "text",
"id": "block_heading",
"default": "Pairs well with",
"label": "Heading"
},
{
"type": "checkbox",
"id": "enable_carousel",
"label": "Enable carousel",
"default": true
},
{
"type": "range",
"id": "max_products",
"min": 1,
"max": 10,
"step": 1,
"label": "Maximum products to show",
"default": 10
}
]
},
{
"type": "custom_liquid",
"name": "Custom Liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "Custom Liquid"
}
]
},
{
"type": "custom_option",
"name": "Custom option",
"settings": [
{
"type": "paragraph",
"content": "Custom options will not show in the quick buy."
},
{
"type": "text",
"id": "label",
"label": "Label",
"info": "Required",
"default": "Custom option"
},
{
"type": "select",
"id": "type",
"label": "Type",
"default": "text",
"options": [
{
"label": "Text",
"value": "text"
},
{
"label": "Long text",
"value": "textarea"
},
{
"label": "Checkbox",
"value": "checkbox"
},
{
"label": "Multiple options",
"value": "multiple"
}
]
},
{
"type": "header",
"content": "Text"
},
{
"type": "checkbox",
"id": "text_required",
"label": "Require text",
"info": "Only works with 'Add to cart' button",
"default": false
},
{
"type": "header",
"content": "Checkbox"
},
{
"type": "text",
"id": "checkbox_checked_value",
"label": "Checked value",
"default": "Yes"
},
{
"type": "text",
"id": "checkbox_unchecked_value",
"label": "Unchecked value",
"default": "No"
},
{
"type": "header",
"content": "Multiple options"
},
{
"type": "select",
"id": "multiple_style",
"label": "Style",
"default": "dropdown",
"options": [
{
"label": "Dropdown",
"value": "dropdown"
},
{
"label": "Radio",
"value": "radio"
}
]
},
{
"type": "textarea",
"id": "multiple_options",
"label": "Options",
"default": "Option 1\nOption 2\nOption 3",
"info": "One option on each line"
}
]
},
{
"type": "description",
"name": "Description",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "Show full width",
"info": "Will show underneath product media and details",
"default": false
},
{
"type": "checkbox",
"id": "show_tabs",
"label": "Enable tabs",
"default": false
},
{
"type": "paragraph",
"content": "Show 2 further tabs by adding a title and content or selecting a page"
},
{
"type": "radio",
"id": "tab_direction",
"label": "Tab direction",
"default": "horizontal",
"options": [
{
"value": "horizontal",
"label": "Horizontal"
},
{
"value": "vertical",
"label": "Vertical"
}
]
},
{
"type": "header",
"content": "Tab 1"
},
{
"type": "select",
"id": "icon_1",
"label": "Vertical tab icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "text",
"id": "tab_1_title",
"label": "Title",
"default": "Description"
},
{
"type": "header",
"content": "Tab 2"
},
{
"type": "select",
"id": "icon_2",
"label": "Vertical tab icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "text",
"id": "tab_2_title",
"label": "Title"
},
{
"type": "richtext",
"id": "tab_2_content",
"label": "Content"
},
{
"type": "page",
"id": "tab_2_page",
"label": "Content from page"
},
{
"type": "header",
"content": "Tab 3"
},
{
"type": "select",
"id": "icon_3",
"label": "Vertical tab icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "text",
"id": "tab_3_title",
"label": "Title"
},
{
"type": "richtext",
"id": "tab_3_content",
"label": "Content"
},
{
"type": "page",
"id": "tab_3_page",
"label": "Content from page"
}
]
},
{
"type": "accordion",
"name": "Collapsible tab",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Collapsible tab"
},
{
"type": "select",
"id": "icon",
"label": "Icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "richtext",
"id": "content",
"label": "Tab content",
"default": "<p>Collapsible tab content</p>"
},
{
"type": "page",
"id": "page",
"label": "Tab content from page"
},
{
"type": "checkbox",
"id": "open",
"label": "Open",
"default": false
},
{
"type": "checkbox",
"id": "full_width",
"label": "Show full width",
"info": "Will show underneath product media and details",
"default": false
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_width",
"min": 60,
"max": 700,
"step": 10,
"unit": "px",
"label": "Image width",
"default": 700
},
{
"type": "url",
"id": "url",
"label": "Link"
}
]
},
{
"type": "link",
"name": "Link",
"settings": [
{
"type": "url",
"id": "url",
"label": "Link"
},
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Link text"
},
{
"type": "radio",
"id": "style",
"label": "Button style",
"options": [
{ "value": "button_1", "label": "Button - primary" },
{ "value": "button_2", "label": "Button - secondary" },
{ "value": "link_style", "label": "Link"}
],
"default": "button_1"
}
]
},
{
"type": "reviews_summary",
"name": "Product rating",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To display a rating, add a product rating app. [Learn more](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-features#featured-produ...)"
}
]
},
{
"type": "richtext",
"name": "Rich text",
"settings": [
{
"type": "richtext",
"id": "richtext",
"label": "Rich text",
"default": "<p>Rich text block</p>"
}
]
},
{
"type": "sharing",
"name": "Sharing",
"limit": 1
},
{
"type": "sku",
"name": "SKU",
"limit": 1
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Text block"
}
]
},
{
"type": "title_and_price",
"name": "Title and price",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_tax_and_shipping",
"label": "Show tax status and shipping policy link",
"default": false
}
]
},
{
"type": "type",
"name": "Type",
"limit": 1
},
{
"type": "variant_picker",
"name": "Variant picker",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Size chart"
},
{
"type": "checkbox",
"id": "size_chart_enabled",
"label": "Show size chart",
"default": false
},
{
"type": "text",
"id": "size_chart_option_name",
"label": "Option name",
"default": "Size",
"info": "Enter the product option name. The size chart link will sit below this product option."
},
{
"type": "page",
"id": "size_chart_page_id",
"label": "Select page"
}
]
},
{
"type": "vendor",
"name": "Vendor",
"limit": 1
}
]
}
{% endschema %}

StanSavellis
Tourist
21 0 0

That worked! THANK YOU again. 

 

Screenshot 2024-02-16 at 6.27.46 pm.png

 

Here's the next code you require:

 

{%- liquid
assign current_variant = product.selected_or_first_available_variant
assign featured_media = current_variant.featured_media | default: product.featured_media
assign show_size_chart = false

assign product_form_id = 'product-form-' | append: section.id | append: product.id
assign installments_form_id = product_form_id | append: '-installments'

assign form_class = 'row'
if settings.on_add_to_cart != 'go_to_cart'
assign form_class = form_class | append: ' ajax-product-form'
endif
unless current_variant.available
assign form_class = form_class | append: ' variant--unavailable'
endunless
-%}

<div data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" data-components="accordion,custom-select">
<div class="container product-detail very-large-row-under" data-product-id="{{ product.id }}">
<div class="page-width">
<div class="product-layout-grid product-layout-grid--{{ section.settings.media_size }}">
<div class="product-layout-grid__images layout--{{ section.settings.media_layout }}{% if product.media.size > 1 %} has-multiple-images{% endif %}" data-product-image-layout="{{ section.settings.media_layout | split: '-' | first }}">
<div class="product-layout-grid__images-and-thumbs {% if section.settings.enable_sticky_media %} sticky-element{% endif %}">
<div class="product-detail__images-container">
{% if product.media.size > 0 %}
<div class="product-detail__images" data-featured-media-id="{{ featured_media.id }}">
{% for media in product.media %}
<div class="product-detail__image">
{%- if media.media_type == 'image' -%}
<a href="{{ media.preview_image.src | img_url: 'master' }}"
data-product-image
data-product-media
data-media-id="{{ media.id }}"
data-image-w="{{ media.preview_image.width }}"
data-image-h="{{ media.preview_image.height }}"
class="global-border-radius">
{%- else -%}
<div class="global-border-radius" data-product-media data-media-id="{{ media.id }}">
{%- endif -%}

{%- render 'media', media: media -%}

{%- unless media.media_type == 'image' -%}
</div>
{%- else -%}
</a>
{%- endunless -%}
</div>
{% endfor %}
</div>
{% else %}
{% render 'media' with featured_media %}
{% endif %}

{%- assign models = product.media | where: 'media_type', 'model' -%}
{% if models.size > 0 %}
<script type="application/json" class="model-json">
{{- product.media | where: 'media_type', 'model' | json -}}
</script>
<button
class="view-in-space"
data-shopify-xr
data-shopify-model3d-id="{{ models.first.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden>
{%- render 'icon-3d-badge-full-color' -%}
<span class="view-in-space__text">{{ 'products.product.view_in_space' | t }}</span>
</button>
{% endif %}

<div class="slick-external-controls">
<div class="slick-arrows"></div>
<div class="slick-dots"></div>
</div>
</div>

{% if section.settings.media_layout contains 'thumbnails' and product.media.size > 1 %}
<div class="product-detail__thumbnails">
{% for media in product.media %}
<a href="{{ media.preview_image | img_url: 'master' }}"
class="product-detail__thumbnail global-border-radius-medium media-thumbnail media-thumbnail--media-{{ media.media_type }} {% if featured_media.id == media.id %}thumb-active{% endif %}"
data-media-id="{{ media.id }}"
data-product-media-thumbnail>
{% render 'responsive-image', image: media.preview_image %}

{%- if media.media_type == 'video' or media.media_type =='external_video' -%}
<div class="media-thumbnail__badge">
{%- render 'icon-video-badge-full-color' -%}
</div>
{%- elsif media.media_type == 'model' -%}
<div class="media-thumbnail__badge">
{%- render 'icon-3d-badge-full-color' -%}
</div>
{%- endif -%}
</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>

<div class="product-layout-grid__detail">
<div class="product-detail__detail sticky-element" {% if product.template_suffix contains 'preorder' %} data-preorder{% endif %}>
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when '@app' -%}
{%- render block -%}

{%- when 'title_and_price' -%}
<div class="product-detail__title-area row" {{ block.shopify_attributes }}>
<h1 class="product-detail__title small-title">{{ product.title }}</h1>

<div class="product-detail__price product-price" data-price-wrapper>
<span class="{% if current_variant.compare_at_price > current_variant.price %}product-price__reduced{% endif %}" data-product-price data-product-detail-price>
<span class="theme-money large-title">
{%- if settings.product_currency_code_enabled -%}
{{- current_variant.price | money_with_currency -}}
{%- else -%}
{{- current_variant.price | money -}}
{%- endif -%}
</span>
</span>

{%- if product.compare_at_price_max > product.price -%}
<span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>
<span class="tiny-title" data-compare-price>
{%- if current_variant.compare_at_price > current_variant.price -%}
<span class="product-price__compare theme-money">{{ current_variant.compare_at_price | money }}</span>
{%- endif -%}
</span>
{%- endif -%}

{% render 'unit-price', variant: current_variant %}
</div>

{%- form 'product', product, id: installments_form_id, class: form_class -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" data-product-secondary-select>
{{ form | payment_terms }}
{%- endform -%}

{%- if block.settings.show_tax_and_shipping -%}
{%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product-policies small-text">
{%- if cart.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
{%- endif -%}
</div>

{%- when 'reviews_summary' -%}
{%- if product.metafields.reviews.rating_count != blank -%}
{%- assign rating_count = product.metafields.reviews.rating_count | plus: 0 -%}
{%- if rating_count > 0 -%}
<div class="theme-product-reviews-summary" {{ block.shopify_attributes }}>
{% render 'rating', rating_value: product.metafields.reviews.rating.value %}
<span class="cc-rating-custom-caption">
{{ rating_count }} {{ 'products.product.reviews_link' | t: count: rating_count }}
</span>
</div>
{%- endif -%}
{%- endif -%}

{%- when 'vendor' -%}
{% comment %}
Do we have a collection that has the same name as our product vendor name?
If we do, let's have the vendor link point to it.
If not, we will point to the automatic vendor collection.
{% endcomment %}
{%- assign product_vendor_handle = product.vendor | handle -%}
{%- if collections[product_vendor_handle].handle == product_vendor_handle -%}
{%- assign vendor_url = collections[product_vendor_handle].url -%}
{%- else -%}
{%- assign vendor_url = product.vendor | url_for_vendor -%}
{%- endif -%}
{%- capture vendor_link -%}<a href="{{ vendor_url }}">{{ product.vendor }}</a>{%- endcapture -%}
<div class="product-detail__vendor" {{ block.shopify_attributes }}>
{{ 'products.product.vendor_html' | t: vendor: vendor_link }}
</div>

{%- when 'type' -%}
{%- if product.type != blank -%}
{%- assign product_type_handle = product.type | handle -%}
{%- if collections[product_type_handle].handle == product_type_handle -%}
{%- assign type_url = collections[product_type_handle].url -%}
{%- else -%}
{%- assign type_url = product.type | url_for_type -%}
{%- endif -%}

<div class="product-detail__type type-wrapper" {{ block.shopify_attributes }}>
{{ 'products.product.type' | t }}
<a class="type-wrapper__type" href="{{ type_url }}">{{ product.type }}</a>
</div>
{%- endif -%}

{%- when 'sku' -%}
<div class="product-detail__sku sku-wrapper {% if product.selected_or_first_available_variant.sku == blank %}visually-hidden{% endif %}" {{ block.shopify_attributes }}>
{{ 'products.product.sku' | t }}
<span class="sku-wrapper__sku">{{ product.selected_or_first_available_variant.sku }}</span>
</div>

{%- when 'variant_picker' -%}
{%- unless product.has_only_default_variant -%}
<div class="product-detail__options row" {{ block.shopify_attributes }}>
{%- assign show_size_chart = false -%}
{% for option in product.options_with_values %}
{%- if block.settings.size_chart_enabled and option.name == block.settings.size_chart_option_name -%}
{%- assign show_size_chart = true -%}
{%- assign size_chart_page = pages[block.settings.size_chart_page_id] -%}
{%- break -%}
{%- endif -%}
{% endfor %}
{% render 'variant-picker', section: section, product: product, block: block, show_size_chart: show_size_chart, size_chart_page: size_chart_page %}

</div>
{%- endunless -%}

{%- when 'buy_buttons' -%}
{%- form 'product', product, id: product_form_id, class: form_class -%}
{%- liquid
assign inventory_class = ''
assign inventory_threshold = block.settings.inventory_notice_threshold
assign inventory_qty = current_variant.inventory_quantity

if inventory_qty > 0
if inventory_qty <= inventory_threshold
assign inventory_class = ' product-inventory--low'
assign inventory_status = 'products.labels.low_stock' | t
else
if block.settings.show_inventory_notice == 'low'
assign inventory_class = ' product-inventory--none'
else
assign inventory_status = 'products.labels.in_stock' | t
endif
endif
else
assign inventory_class = ' product-inventory--none'
endif

assign gift_card_recipient_feature_active = false
if block.settings.show_gift_card_recipient and product.gift_card?
assign gift_card_recipient_feature_active = true
endif

assign enable_dynamic_payment_button = false
if block.settings.enable_payment_button and product.selling_plan_groups == empty and gift_card_recipient_feature_active == false
unless product.template_suffix contains 'preorder'
assign enable_dynamic_payment_button = true
endunless
endif

if gift_card_recipient_feature_active
render 'gift-card-recipient', product: product, form: form, section: section, use_label: true
endif
-%}

<select name="id" class="no-js" data-product-select aria-label="{{ 'products.product.selector_label' | t | escape }}">
{%- for variant in product.variants -%}
{%- liquid
assign show_inventory_qty = false

unless variant.inventory_quantity > inventory_threshold and block.settings.show_inventory_count != 'always'
assign show_inventory_qty = true
endunless

if variant.inventory_quantity < 10 and settings.hide_unavailable_quantity_opts
assign show_inventory_qty = true
endif
-%}
<option value="{{ variant.id }}"
{% if variant == current_variant %}selected{% endif %}
{% unless variant.available %}disabled{% endunless %}
{% if variant.inventory_management != blank %}
data-stock="{% if variant.inventory_quantity > 0 %}in{% else %}out{% endif %}"
{% if show_inventory_qty %}data-inventory="{{ variant.inventory_quantity }}"{% endif %}
{% endif %}>
{{- variant.title -}}
</option>
{%- endfor -%}
</select>

<div class="large-row{% if enable_dynamic_payment_button == true %} with-payment-buttons{% endif %}" {{ block.shopify_attributes }}>

{%- if current_variant.inventory_management != blank and block.settings.show_inventory_notice != 'never' -%}
<div class="product-inventory{{ inventory_class }}" data-threshold="{{ inventory_threshold }}" data-show-notice="{{ block.settings.show_inventory_notice }}" data-show-count="{{ block.settings.show_inventory_count }}">
{% if inventory_qty > 0 %}
{%- unless block.settings.show_inventory_notice == 'low' and inventory_qty > inventory_threshold -%}
<span class="product-inventory__status">{{ inventory_status }}</span>
{% unless block.settings.show_inventory_count == 'never' %}
{% unless block.settings.show_inventory_count == 'low' and inventory_qty > inventory_threshold %}
{% if inventory_qty == 1 %}
- {{ 'products.labels.single_unit_available' | t }}
{% else %}
- {{ 'products.labels.x_units_available' | t: quantity: inventory_qty }}
{% endif %}
{% endunless %}
{% endunless %}
{% endunless %}
{% endif %}
</div>
{%- endif -%}

{%- if block.settings.show_quantity_selector -%}
{% render 'quantity-selector', variant: current_variant %}
{%- endif -%}

<div class="payment-buttons">
{%- capture add_to_cart_text -%}
{%- if product.template_suffix contains 'preorder' -%}
{{- 'products.product.preorder' | t -}}
{%- else -%}
{{- 'products.product.add_to_cart' | t -}}
{%- endif -%}
{%- endcapture -%}
<button
class="btn {% if enable_dynamic_payment_button == true %}btn--secondary{% endif %}"
type="submit"
name="add"
data-add-to-cart
{% unless current_variant.available %}disabled{% endunless %}>
<span data-add-to-cart-text>
{%- if current_variant.available -%}
{{ add_to_cart_text }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
</button>

{% if enable_dynamic_payment_button == true %}
{{ form | payment_button }}
{% endif %}
</div>
</div>

{%- if block.settings.show_pickup_availability -%}
{% render 'store-availability', product: product, current_variant: current_variant %}
{%- endif -%}

{% if product.available and block.settings.show_backorder_text == true %}
{% render 'backorder', product: product, variant: current_variant %}
{% endif %}
{%- endform -%}

{%- when 'description' -%}
{%- capture product_description -%}
{% if block.settings.show_tabs %}
{%- liquid
assign tab_1_title = block.settings.tab_1_title

assign tab_2_title = block.settings.tab_2_title
assign tab_2_content = block.settings.tab_2_content
if block.settings.tab_2_page != blank
assign tab_2_title = tab_2_title | default: pages[block.settings.tab_2_page].title
assign tab_2_content = pages[block.settings.tab_2_page].content
endif

assign tab_3_title = block.settings.tab_3_title
assign tab_3_content = block.settings.tab_3_content
if block.settings.tab_3_page != blank
assign tab_3_title = tab_3_title | default: pages[block.settings.tab_3_page].title
assign tab_3_content = pages[block.settings.tab_3_page].content
endif
-%}
{% if block.settings.tab_direction == 'horizontal' %}
<div class="large-row large-row-under {% if block.settings.full_width == false %} product-description__no-expand{% endif %}" {{ block.shopify_attributes }}>
<ul class="tabs">
<li class="rte--expanded-images">
<a href="#tab1">{{ tab_1_title }}</a>
</li>
{% if tab_2_content != blank %}
<li>
<a href="#tab2">{{ tab_2_title }}</a>
</li>
{% endif %}
{% if tab_3_content != blank %}
<li>
<a href="#tab3">{{ tab_3_title }}</a>
</li>
{% endif %}
</ul>

<div id="tab1" class="rte rte--expanded-images clearfix row tab-content tab-content--active {% if block.settings.full_width == false %} product-description__no-expand{% endif %}">
{{ product.description }}
</div>

{% if tab_2_content != blank %}
<div id="tab2" class="rte row tab-content">
{{ tab_2_content }}
</div>
{% endif %}

{% if tab_3_content != blank %}
<div id="tab3" class="rte row tab-content">
{{ tab_3_content }}
</div>
{% endif %}
</div>

{% else %}

<div class="product-detail-accordion" {{ block.shopify_attributes }}>
{%- capture accordion_title_1 -%}
{%- if block.settings.icon_1 == blank -%}
{{- tab_1_title -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon_1, size: 'small' %}
<span class="content-with-icon__beside">{{ tab_1_title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}

{%- capture accordion_title_2 -%}
{%- if block.settings.icon_2 == blank -%}
{{- tab_2_title -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon_2, size: 'small' %}
<span class="content-with-icon__beside">{{ tab_2_title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}

{%- capture accordion_title_3 -%}
{%- if block.settings.icon_3 == blank -%}
{{- tab_3_title -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon_3, size: 'small' %}
<span class="content-with-icon__beside">{{ tab_3_title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}

{% render 'accordion',
allow_multi_open: true,
add_content_class: 'rte cf',
first_item_open: block.settings.open,
item1_title: accordion_title_1,
item1_content: product.description,
item2_title: accordion_title_2,
item2_content: tab_2_content,
item3_title: accordion_title_3,
item3_content: tab_3_content
%}
</div>
{% endif %}

{%- else -%}
<div class="rte rte--expanded-images clearfix row {% if block.settings.full_width == false %} product-description__no-expand{% endif %}">
{{ product.description }}
</div>
{%- endif -%}
{%- endcapture -%}

{%- if block.settings.full_width -%}
{%- capture full_width_content -%}{{ full_width_content }}{{ product_description }}{%- endcapture -%}
{%- else -%}
{{ product_description }}
{%- endif -%}

{% when 'custom_option' %}
{%- if block.settings.label != blank -%}
{%- liquid
assign custom_option_input_id = product_form_id | append: '-custom-' | append: forloop.index
assign custom_input_name = block.settings.label | escape | prepend: 'properties[' | append: ']'
-%}
<div class="custom-option" {{ block.shopify_attributes}}>
{% case block.settings.type %}
{% when 'text' %}
<div class="input-wrapper form-row">
<label class="label" for="{{ custom_option_input_id }}">{{ block.settings.label | escape }}</label>
<input class="custom-option__text-input" type="text" id="{{ custom_option_input_id }}" form="{{ product_form_id }}" name="{{ custom_input_name }}" {% if block.settings.text_required %}required{% endif %}>
</div>

{% when 'textarea' %}
<div class="input-wrapper form-row">
<label class="label" for="{{ custom_option_input_id }}">{{ block.settings.label | escape }}</label>
<textarea class="custom-option__text-input" id="{{ custom_option_input_id }}" form="{{ product_form_id }}" name="{{ custom_input_name }}" {% if block.settings.text_required %}required{% endif %}></textarea>
</div>

{% when 'checkbox' %}
<div class="option-selector form-row">
<label class="label custom-option__checkbox">
{{ block.settings.label | escape }}
<input type="hidden" form="{{ product_form_id }}" name="{{ custom_input_name }}" value="{{ block.settings.checkbox_unchecked_value | escape }}">
<input type="checkbox" form="{{ product_form_id }}" name="{{ custom_input_name }}" value="{{ block.settings.checkbox_checked_value | escape }}">
<span class="custom-option__checkbox-check icon feather-icon">{% render 'feather-check' %}</span>
</label>
</div>

{% when 'multiple' %}
{%- assign custom_options = block.settings.multiple_options | newline_to_br | strip_newlines | split: '<br />' -%}

{% if block.settings.multiple_style == 'dropdown' %}
<div class="form-row">
<div class="option-selector" data-selector-type="dropdown">
{% render 'custom-select',
id: custom_option_input_id,
label: block.settings.label,
label_inside: true,
option_values: custom_options,
selected_value: custom_options.first,
include_native: true,
native_name: custom_input_name,
native_form_id: product_form_id
%}
</div>
</div>

{% else %}
<div class="form-row">
<fieldset class="option-selector" data-selector-type="listed" data-index="custom-option">
<legend class="label">{{ block.settings.label | escape }}</legend>
<div class="option-selector__btns">
{% for option in custom_options %}
{% assign custom_option_input_id = custom_option_input_id | append: forloop.index %}
<input class="opt-btn js-option" type="radio" name="{{ custom_input_name }}" id="{{ custom_option_input_id }}" form="{{ product_form_id }}" value="{{ option | escape }}"{% if forloop.first %} checked{% endif %}>
<label class="opt-label" for="{{ custom_option_input_id }}">{{ option }}</label>
{% endfor %}
</div>
</fieldset>
</div>
{% endif %}

{% endcase %}
</div>
{%- endif -%}

{%- when 'sharing' -%}
{% render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}

{%- when 'text' -%}
{%- if block.settings.text != blank -%}
<div class="row" {{ block.shopify_attributes }}>
{{ block.settings.text }}
</div>
{%- endif -%}

{%- when 'richtext' -%}
{%- if block.settings.richtext != blank -%}
<div class="row rte" {{ block.shopify_attributes }}>
{{ block.settings.richtext }}
</div>
{%- endif -%}

{%- when 'link' -%}
<div class="row" {{ block.shopify_attributes }}>
<a class="{% if block.settings.style == 'button_1' %}btn btn--small btn--primary{% elsif block.settings.style == 'button_2' %}btn btn--small btn--secondary{% else %}standard-link{% endif %}" href="{{ block.settings.url }}">{{ block.settings.text | escape }}</a>
</div>

{%- when 'image' -%}
{%- if block.settings.image != blank -%}
<div class="row" style="max-width: {{ block.settings.image_width }}px" {{ block.shopify_attributes }}>
{%- if block.settings.url != blank -%}<a href="{{ block.settings.url }}">{%- endif -%}
<div class="global-border-radius">
{% render 'responsive-image', image: block.settings.image %}
</div>
{%- if block.settings.url != blank -%}</a>{%- endif -%}
</div>
{% endif %}

{% when 'accordion' %}
{%- capture accordion_content -%}
{%- liquid
assign content = block.settings.content
if block.settings.page != blank
assign content = pages[block.settings.page].content
endif
-%}
{%- if content != blank -%}
<div class="product-detail-accordion" {{ block.shopify_attributes }}>
{%- capture accordion_title -%}
{%- if block.settings.icon == blank -%}
{{- block.settings.title | escape -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon, size: 'small' %}
<span class="content-with-icon__beside">{{ block.settings.title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}
{% render 'accordion', allow_multi_open: true, add_content_class: 'rte cf', first_item_open: block.settings.open, item1_title: accordion_title, item1_content: content %}
</div>
{%- endif -%}
{%- endcapture -%}

{%- if block.settings.full_width -%}
{%- capture full_width_content -%}{{ full_width_content }}{{ accordion_content }}{%- endcapture -%}
{%- else -%}
{{ accordion_content }}
{%- endif -%}

{%- when 'complementary' -%}
<cc-fetched-content data-id="{{ block.id }}" data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&intent=complementary" contains-product-blocks>
{%- if recommendations.performed and recommendations.products_count > 0 -%}
{% if block.settings.enable_carousel %}
<div class="row content-products js-content-products-slider" {{ block.shopify_attributes }}>
<div class="flex">
<div class="content-products__title">{{ block.settings.block_heading | escape }}</div>
{% if recommendations.products_count > 1 and block.settings.max_products > 1 %}
<div class="content-products-controls">
<button class="btn--plain prev icon feather-icon" aria-label="{{ 'general.accessibility_labels.previous' | t | escape }}">{% render 'feather-arrow-left' %}</button>
<button class="btn--plain next icon feather-icon" aria-label="{{ 'general.accessibility_labels.next' | t | escape }}">{% render 'feather-arrow-right' %}</button>
</div>
{% endif %}
</div>
<div class="content-products__products product-carousel-peek">
<div class="grid grid--uniform">
{% liquid
for related_product in recommendations.products limit: block.settings.max_products
render 'product-block', product: related_product, grid_class: 'grid__item one-half small-down--one-half'
endfor
%}
</div>
</div>
{% render 'peek-carousel-advice' %}
</div>
{% else %}
<div class="row content-products content-products--no-carousel" {{ block.shopify_attributes }}>
<div class="content-products__title">{{ block.settings.block_heading | escape }}</div>
<div class="content-products__products">
<div class="grid-flex">
{% liquid
for related_product in recommendations.products limit: block.settings.max_products
render 'product-block', product: related_product, grid_class: 'grid-flex__item one-half small-down--one-half'
endfor
%}
</div>
</div>
</div>
{% endif %}
{%- endif -%}
</cc-fetched-content>

{%- when 'custom_liquid' -%}
{%- if block.settings.custom_liquid != blank -%}
<div class="row" {{ block.shopify_attributes }}>
{{ block.settings.custom_liquid }}
</div>
{%- endif -%}

{% endcase %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>

{%- if full_width_content != blank -%}
<div class="container row">
<div class="reading-width reading-width--no-mobile-padding">
{{ full_width_content }}
</div>
</div>
{%- endif -%}

{%- if show_size_chart == true -%}
{% render 'size-chart', size_chart_page: size_chart_page %}
{%- endif -%}

{% unless product == empty %}
<script type="application/json" class="ProductJson-{{ product.id }}" data-product-json>
{{ product | json }}
</script>
{% endunless %}
</div>

{%- assign current_variant = product.selected_or_first_available_variant -%}
{% render 'structured-data-product', product: product, current_variant: current_variant %}

{% schema %}
{
"name": "Product details",
"class": "section-product-template",
"settings": [
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "checkbox",
"id": "enable_sticky_media",
"label": "Enable stick on scroll",
"default": true
},
{
"type": "select",
"id": "media_size",
"label": "Size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "medium"
},
{
"type": "select",
"id": "media_layout",
"label": "Layout",
"options": [
{
"label": "List",
"value": "list"
},
{
"label": "Thumbnails - below",
"value": "thumbnails-below"
},
{
"label": "Thumbnails - left",
"value": "thumbnails-left"
}
],
"default": "list"
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": false
}
],
"blocks": [
{
"type": "@app"
},
{
"type": "buy_buttons",
"name": "Buy buttons",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": "Show quantity selector",
"default": true
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "show_gift_card_recipient",
"label": "Show recipient information form for gift card products.",
"info": "Allow customers to send gift cards to a recipient along with a personal message. When enabled, the dynamic checkout button will be disabled for gift cards. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-field...)"
},
{
"type": "checkbox",
"id": "show_pickup_availability",
"label": "Show pickup availability",
"default": true,
"info": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/loca...)"
},
{
"type": "checkbox",
"id": "show_backorder_text",
"label": "Show backorder text",
"default": true,
"info": "Only shows for products which use Shopify inventory tracking and are available to purchase when out of stock."
},
{
"type": "header",
"content": "Inventory"
},
{
"type": "select",
"id": "show_inventory_notice",
"label": "Show inventory notice",
"options": [
{
"label": "Never",
"value": "never"
},
{
"label": "Only when inventory low",
"value": "low"
},
{
"label": "Always",
"value": "always"
}
],
"default": "never"
},
{
"type": "select",
"id": "show_inventory_count",
"label": "Show count in inventory notice",
"options": [
{
"label": "Never",
"value": "never"
},
{
"label": "Only when inventory low",
"value": "low"
},
{
"label": "Always",
"value": "always"
}
],
"default": "low"
},
{
"type": "range",
"id": "inventory_notice_threshold",
"min": 1,
"max": 100,
"step": 1,
"label": "Low inventory threshold",
"default": 10
}
]
},
{
"type": "complementary",
"name": "Complementary products",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To select complementary products, add the Search & Discovery app. [Learn more](https:\/\/shopify.dev\/themes\/product-merchandising\/recommendations)"
},
{
"type": "text",
"id": "block_heading",
"default": "Pairs well with",
"label": "Heading"
},
{
"type": "checkbox",
"id": "enable_carousel",
"label": "Enable carousel",
"default": true
},
{
"type": "range",
"id": "max_products",
"min": 1,
"max": 10,
"step": 1,
"label": "Maximum products to show",
"default": 10
}
]
},
{
"type": "custom_liquid",
"name": "Custom Liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "Custom Liquid"
}
]
},
{
"type": "custom_option",
"name": "Custom option",
"settings": [
{
"type": "paragraph",
"content": "Custom options will not show in the quick buy."
},
{
"type": "text",
"id": "label",
"label": "Label",
"info": "Required",
"default": "Custom option"
},
{
"type": "select",
"id": "type",
"label": "Type",
"default": "text",
"options": [
{
"label": "Text",
"value": "text"
},
{
"label": "Long text",
"value": "textarea"
},
{
"label": "Checkbox",
"value": "checkbox"
},
{
"label": "Multiple options",
"value": "multiple"
}
]
},
{
"type": "header",
"content": "Text"
},
{
"type": "checkbox",
"id": "text_required",
"label": "Require text",
"info": "Only works with 'Add to cart' button",
"default": false
},
{
"type": "header",
"content": "Checkbox"
},
{
"type": "text",
"id": "checkbox_checked_value",
"label": "Checked value",
"default": "Yes"
},
{
"type": "text",
"id": "checkbox_unchecked_value",
"label": "Unchecked value",
"default": "No"
},
{
"type": "header",
"content": "Multiple options"
},
{
"type": "select",
"id": "multiple_style",
"label": "Style",
"default": "dropdown",
"options": [
{
"label": "Dropdown",
"value": "dropdown"
},
{
"label": "Radio",
"value": "radio"
}
]
},
{
"type": "textarea",
"id": "multiple_options",
"label": "Options",
"default": "Option 1\nOption 2\nOption 3",
"info": "One option on each line"
}
]
},
{
"type": "description",
"name": "Description",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "Show full width",
"info": "Will show underneath product media and details",
"default": false
},
{
"type": "checkbox",
"id": "show_tabs",
"label": "Enable tabs",
"default": false
},
{
"type": "paragraph",
"content": "Show 2 further tabs by adding a title and content or selecting a page"
},
{
"type": "radio",
"id": "tab_direction",
"label": "Tab direction",
"default": "horizontal",
"options": [
{
"value": "horizontal",
"label": "Horizontal"
},
{
"value": "vertical",
"label": "Vertical"
}
]
},
{
"type": "header",
"content": "Tab 1"
},
{
"type": "select",
"id": "icon_1",
"label": "Vertical tab icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "text",
"id": "tab_1_title",
"label": "Title",
"default": "Description"
},
{
"type": "header",
"content": "Tab 2"
},
{
"type": "select",
"id": "icon_2",
"label": "Vertical tab icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "text",
"id": "tab_2_title",
"label": "Title"
},
{
"type": "richtext",
"id": "tab_2_content",
"label": "Content"
},
{
"type": "page",
"id": "tab_2_page",
"label": "Content from page"
},
{
"type": "header",
"content": "Tab 3"
},
{
"type": "select",
"id": "icon_3",
"label": "Vertical tab icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "text",
"id": "tab_3_title",
"label": "Title"
},
{
"type": "richtext",
"id": "tab_3_content",
"label": "Content"
},
{
"type": "page",
"id": "tab_3_page",
"label": "Content from page"
}
]
},
{
"type": "accordion",
"name": "Collapsible tab",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Collapsible tab"
},
{
"type": "select",
"id": "icon",
"label": "Icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "richtext",
"id": "content",
"label": "Tab content",
"default": "<p>Collapsible tab content</p>"
},
{
"type": "page",
"id": "page",
"label": "Tab content from page"
},
{
"type": "checkbox",
"id": "open",
"label": "Open",
"default": false
},
{
"type": "checkbox",
"id": "full_width",
"label": "Show full width",
"info": "Will show underneath product media and details",
"default": false
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_width",
"min": 60,
"max": 700,
"step": 10,
"unit": "px",
"label": "Image width",
"default": 700
},
{
"type": "url",
"id": "url",
"label": "Link"
}
]
},
{
"type": "link",
"name": "Link",
"settings": [
{
"type": "url",
"id": "url",
"label": "Link"
},
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Link text"
},
{
"type": "radio",
"id": "style",
"label": "Button style",
"options": [
{ "value": "button_1", "label": "Button - primary" },
{ "value": "button_2", "label": "Button - secondary" },
{ "value": "link_style", "label": "Link"}
],
"default": "button_1"
}
]
},
{
"type": "reviews_summary",
"name": "Product rating",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To display a rating, add a product rating app. [Learn more](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-features#featured-produ...)"
}
]
},
{
"type": "richtext",
"name": "Rich text",
"settings": [
{
"type": "richtext",
"id": "richtext",
"label": "Rich text",
"default": "<p>Rich text block</p>"
}
]
},
{
"type": "sharing",
"name": "Sharing",
"limit": 1
},
{
"type": "sku",
"name": "SKU",
"limit": 1
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Text block"
}
]
},
{
"type": "title_and_price",
"name": "Title and price",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_tax_and_shipping",
"label": "Show tax status and shipping policy link",
"default": false
}
]
},
{
"type": "type",
"name": "Type",
"limit": 1
},
{
"type": "variant_picker",
"name": "Variant picker",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Size chart"
},
{
"type": "checkbox",
"id": "size_chart_enabled",
"label": "Show size chart",
"default": false
},
{
"type": "text",
"id": "size_chart_option_name",
"label": "Option name",
"default": "Size",
"info": "Enter the product option name. The size chart link will sit below this product option."
},
{
"type": "page",
"id": "size_chart_page_id",
"label": "Select page"
}
]
},
{
"type": "vendor",
"name": "Vendor",
"limit": 1
}
]
}
{% endschema %}

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

Hey @StanSavellis here is the code for "main-product.liquid file". please replace this.

 

{%- liquid
assign current_variant = product.selected_or_first_available_variant
assign featured_media = current_variant.featured_media | default: product.featured_media
assign show_size_chart = false

assign product_form_id = 'product-form-' | append: section.id | append: product.id
assign installments_form_id = product_form_id | append: '-installments'

assign form_class = 'row'
if settings.on_add_to_cart != 'go_to_cart'
assign form_class = form_class | append: ' ajax-product-form'
endif
unless current_variant.available
assign form_class = form_class | append: ' variant--unavailable'
endunless
-%}

<div data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" data-components="accordion,custom-select">
<div class="container product-detail very-large-row-under" data-product-id="{{ product.id }}">
<div class="page-width">
<div class="product-layout-grid product-layout-grid--{{ section.settings.media_size }}">
<div class="product-layout-grid__images layout--{{ section.settings.media_layout }}{% if product.media.size > 1 %} has-multiple-images{% endif %}" data-product-image-layout="{{ section.settings.media_layout | split: '-' | first }}">
<div class="product-layout-grid__images-and-thumbs {% if section.settings.enable_sticky_media %} sticky-element{% endif %}">
<div class="product-detail__images-container">
{% if product.media.size > 0 %}
<div class="product-detail__images" data-featured-media-id="{{ featured_media.id }}">
{% for media in product.media %}
<div class="product-detail__image">
{%- if media.media_type == 'image' -%}
<a href="{{ media.preview_image.src | img_url: 'master' }}"
data-product-image
data-product-media
data-media-id="{{ media.id }}"
data-image-w="{{ media.preview_image.width }}"
data-image-h="{{ media.preview_image.height }}"
class="global-border-radius">
{%- else -%}
<div class="global-border-radius" data-product-media data-media-id="{{ media.id }}">
{%- endif -%}

{%- render 'media', media: media -%}

{%- unless media.media_type == 'image' -%}
</div>
{%- else -%}
</a>
{%- endunless -%}
</div>
{% endfor %}
</div>
{% else %}
{% render 'media' with featured_media %}
{% endif %}

{%- assign models = product.media | where: 'media_type', 'model' -%}
{% if models.size > 0 %}
<script type="application/json" class="model-json">
{{- product.media | where: 'media_type', 'model' | json -}}
</script>
<button
class="view-in-space"
data-shopify-xr
data-shopify-model3d-id="{{ models.first.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden>
{%- render 'icon-3d-badge-full-color' -%}
<span class="view-in-space__text">{{ 'products.product.view_in_space' | t }}</span>
</button>
{% endif %}

<div class="slick-external-controls">
<div class="slick-arrows"></div>
<div class="slick-dots"></div>
</div>
</div>

{% if section.settings.media_layout contains 'thumbnails' and product.media.size > 1 %}
<div class="product-detail__thumbnails">
{% for media in product.media %}
<a href="{{ media.preview_image | img_url: 'master' }}"
class="product-detail__thumbnail global-border-radius-medium media-thumbnail media-thumbnail--media-{{ media.media_type }} {% if featured_media.id == media.id %}thumb-active{% endif %}"
data-media-id="{{ media.id }}"
data-product-media-thumbnail>
{% render 'responsive-image', image: media.preview_image %}

{%- if media.media_type == 'video' or media.media_type =='external_video' -%}
<div class="media-thumbnail__badge">
{%- render 'icon-video-badge-full-color' -%}
</div>
{%- elsif media.media_type == 'model' -%}
<div class="media-thumbnail__badge">
{%- render 'icon-3d-badge-full-color' -%}
</div>
{%- endif -%}
</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>

<div class="product-layout-grid__detail">
<div class="product-detail__detail sticky-element" {% if product.template_suffix contains 'preorder' %} data-preorder{% endif %}>
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when '@app' -%}
{%- render block -%}

{%- when 'title_and_price' -%}
<div class="product-detail__title-area row" {{ block.shopify_attributes }}>
<h1 class="product-detail__title small-title">{{ product.title }}</h1>

{% if product.available %}
<div class="product-detail__price product-price" data-price-wrapper>
<span class="{% if current_variant.compare_at_price > current_variant.price %}product-price__reduced{% endif %}" data-product-price data-product-detail-price>
<span class="theme-money large-title">
{%- if settings.product_currency_code_enabled -%}
{{- current_variant.price | money_with_currency -}}
{%- else -%}
{{- current_variant.price | money -}}
{%- endif -%}
</span>
</span>

{%- if product.compare_at_price_max > product.price -%}
<span class="visually-hidden" data-compare-text>{{ 'products.product.regular_price' | t }}</span>
<span class="tiny-title" data-compare-price>
{%- if current_variant.compare_at_price > current_variant.price -%}
<span class="product-price__compare theme-money">{{ current_variant.compare_at_price | money }}</span>
{%- endif -%}
</span>
{%- endif -%}

{% render 'unit-price', variant: current_variant %}
</div>
{% endif %}

{%- form 'product', product, id: installments_form_id, class: form_class -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" data-product-secondary-select>
{{ form | payment_terms }}
{%- endform -%}

{%- if block.settings.show_tax_and_shipping -%}
{%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product-policies small-text">
{%- if cart.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
{%- endif -%}
</div>

{%- when 'reviews_summary' -%}
{%- if product.metafields.reviews.rating_count != blank -%}
{%- assign rating_count = product.metafields.reviews.rating_count | plus: 0 -%}
{%- if rating_count > 0 -%}
<div class="theme-product-reviews-summary" {{ block.shopify_attributes }}>
{% render 'rating', rating_value: product.metafields.reviews.rating.value %}
<span class="cc-rating-custom-caption">
{{ rating_count }} {{ 'products.product.reviews_link' | t: count: rating_count }}
</span>
</div>
{%- endif -%}
{%- endif -%}

{%- when 'vendor' -%}
{% comment %}
Do we have a collection that has the same name as our product vendor name?
If we do, let's have the vendor link point to it.
If not, we will point to the automatic vendor collection.
{% endcomment %}
{%- assign product_vendor_handle = product.vendor | handle -%}
{%- if collections[product_vendor_handle].handle == product_vendor_handle -%}
{%- assign vendor_url = collections[product_vendor_handle].url -%}
{%- else -%}
{%- assign vendor_url = product.vendor | url_for_vendor -%}
{%- endif -%}
{%- capture vendor_link -%}<a href="{{ vendor_url }}">{{ product.vendor }}</a>{%- endcapture -%}
<div class="product-detail__vendor" {{ block.shopify_attributes }}>
{{ 'products.product.vendor_html' | t: vendor: vendor_link }}
</div>

{%- when 'type' -%}
{%- if product.type != blank -%}
{%- assign product_type_handle = product.type | handle -%}
{%- if collections[product_type_handle].handle == product_type_handle -%}
{%- assign type_url = collections[product_type_handle].url -%}
{%- else -%}
{%- assign type_url = product.type | url_for_type -%}
{%- endif -%}

<div class="product-detail__type type-wrapper" {{ block.shopify_attributes }}>
{{ 'products.product.type' | t }}
<a class="type-wrapper__type" href="{{ type_url }}">{{ product.type }}</a>
</div>
{%- endif -%}

{%- when 'sku' -%}
<div class="product-detail__sku sku-wrapper {% if product.selected_or_first_available_variant.sku == blank %}visually-hidden{% endif %}" {{ block.shopify_attributes }}>
{{ 'products.product.sku' | t }}
<span class="sku-wrapper__sku">{{ product.selected_or_first_available_variant.sku }}</span>
</div>

{%- when 'variant_picker' -%}
{%- unless product.has_only_default_variant -%}
<div class="product-detail__options row" {{ block.shopify_attributes }}>
{%- assign show_size_chart = false -%}
{% for option in product.options_with_values %}
{%- if block.settings.size_chart_enabled and option.name == block.settings.size_chart_option_name -%}
{%- assign show_size_chart = true -%}
{%- assign size_chart_page = pages[block.settings.size_chart_page_id] -%}
{%- break -%}
{%- endif -%}
{% endfor %}
{% render 'variant-picker', section: section, product: product, block: block, show_size_chart: show_size_chart, size_chart_page: size_chart_page %}

</div>
{%- endunless -%}

{%- when 'buy_buttons' -%}
{%- form 'product', product, id: product_form_id, class: form_class -%}
{%- liquid
assign inventory_class = ''
assign inventory_threshold = block.settings.inventory_notice_threshold
assign inventory_qty = current_variant.inventory_quantity

if inventory_qty > 0
if inventory_qty <= inventory_threshold
assign inventory_class = ' product-inventory--low'
assign inventory_status = 'products.labels.low_stock' | t
else
if block.settings.show_inventory_notice == 'low'
assign inventory_class = ' product-inventory--none'
else
assign inventory_status = 'products.labels.in_stock' | t
endif
endif
else
assign inventory_class = ' product-inventory--none'
endif

assign gift_card_recipient_feature_active = false
if block.settings.show_gift_card_recipient and product.gift_card?
assign gift_card_recipient_feature_active = true
endif

assign enable_dynamic_payment_button = false
if block.settings.enable_payment_button and product.selling_plan_groups == empty and gift_card_recipient_feature_active == false
unless product.template_suffix contains 'preorder'
assign enable_dynamic_payment_button = true
endunless
endif

if gift_card_recipient_feature_active
render 'gift-card-recipient', product: product, form: form, section: section, use_label: true
endif
-%}

<select name="id" class="no-js" data-product-select aria-label="{{ 'products.product.selector_label' | t | escape }}">
{%- for variant in product.variants -%}
{%- liquid
assign show_inventory_qty = false

unless variant.inventory_quantity > inventory_threshold and block.settings.show_inventory_count != 'always'
assign show_inventory_qty = true
endunless

if variant.inventory_quantity < 10 and settings.hide_unavailable_quantity_opts
assign show_inventory_qty = true
endif
-%}
<option value="{{ variant.id }}"
{% if variant == current_variant %}selected{% endif %}
{% unless variant.available %}disabled{% endunless %}
{% if variant.inventory_management != blank %}
data-stock="{% if variant.inventory_quantity > 0 %}in{% else %}out{% endif %}"
{% if show_inventory_qty %}data-inventory="{{ variant.inventory_quantity }}"{% endif %}
{% endif %}>
{{- variant.title -}}
</option>
{%- endfor -%}
</select>

<div class="large-row{% if enable_dynamic_payment_button == true %} with-payment-buttons{% endif %}" {{ block.shopify_attributes }}>

{%- if current_variant.inventory_management != blank and block.settings.show_inventory_notice != 'never' -%}
<div class="product-inventory{{ inventory_class }}" data-threshold="{{ inventory_threshold }}" data-show-notice="{{ block.settings.show_inventory_notice }}" data-show-count="{{ block.settings.show_inventory_count }}">
{% if inventory_qty > 0 %}
{%- unless block.settings.show_inventory_notice == 'low' and inventory_qty > inventory_threshold -%}
<span class="product-inventory__status">{{ inventory_status }}</span>
{% unless block.settings.show_inventory_count == 'never' %}
{% unless block.settings.show_inventory_count == 'low' and inventory_qty > inventory_threshold %}
{% if inventory_qty == 1 %}
- {{ 'products.labels.single_unit_available' | t }}
{% else %}
- {{ 'products.labels.x_units_available' | t: quantity: inventory_qty }}
{% endif %}
{% endunless %}
{% endunless %}
{% endunless %}
{% endif %}
</div>
{%- endif -%}

{%- if block.settings.show_quantity_selector -%}
{% render 'quantity-selector', variant: current_variant %}
{%- endif -%}

<div class="payment-buttons">
{%- capture add_to_cart_text -%}
{%- if product.template_suffix contains 'preorder' -%}
{{- 'products.product.preorder' | t -}}
{%- else -%}
{{- 'products.product.add_to_cart' | t -}}
{%- endif -%}
{%- endcapture -%}
<button
class="btn {% if enable_dynamic_payment_button == true %}btn--secondary{% endif %}"
type="submit"
name="add"
data-add-to-cart
{% unless current_variant.available %}disabled{% endunless %}>
<span data-add-to-cart-text>
{%- if current_variant.available -%}
{{ add_to_cart_text }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
</button>

{% if enable_dynamic_payment_button == true %}
{{ form | payment_button }}
{% endif %}
</div>
</div>

{%- if block.settings.show_pickup_availability -%}
{% render 'store-availability', product: product, current_variant: current_variant %}
{%- endif -%}

{% if product.available and block.settings.show_backorder_text == true %}
{% render 'backorder', product: product, variant: current_variant %}
{% endif %}
{%- endform -%}

{%- when 'description' -%}
{%- capture product_description -%}
{% if block.settings.show_tabs %}
{%- liquid
assign tab_1_title = block.settings.tab_1_title

assign tab_2_title = block.settings.tab_2_title
assign tab_2_content = block.settings.tab_2_content
if block.settings.tab_2_page != blank
assign tab_2_title = tab_2_title | default: pages[block.settings.tab_2_page].title
assign tab_2_content = pages[block.settings.tab_2_page].content
endif

assign tab_3_title = block.settings.tab_3_title
assign tab_3_content = block.settings.tab_3_content
if block.settings.tab_3_page != blank
assign tab_3_title = tab_3_title | default: pages[block.settings.tab_3_page].title
assign tab_3_content = pages[block.settings.tab_3_page].content
endif
-%}
{% if block.settings.tab_direction == 'horizontal' %}
<div class="large-row large-row-under {% if block.settings.full_width == false %} product-description__no-expand{% endif %}" {{ block.shopify_attributes }}>
<ul class="tabs">
<li class="rte--expanded-images">
<a href="#tab1">{{ tab_1_title }}</a>
</li>
{% if tab_2_content != blank %}
<li>
<a href="#tab2">{{ tab_2_title }}</a>
</li>
{% endif %}
{% if tab_3_content != blank %}
<li>
<a href="#tab3">{{ tab_3_title }}</a>
</li>
{% endif %}
</ul>

<div id="tab1" class="rte rte--expanded-images clearfix row tab-content tab-content--active {% if block.settings.full_width == false %} product-description__no-expand{% endif %}">
{{ product.description }}
</div>

{% if tab_2_content != blank %}
<div id="tab2" class="rte row tab-content">
{{ tab_2_content }}
</div>
{% endif %}

{% if tab_3_content != blank %}
<div id="tab3" class="rte row tab-content">
{{ tab_3_content }}
</div>
{% endif %}
</div>

{% else %}

<div class="product-detail-accordion" {{ block.shopify_attributes }}>
{%- capture accordion_title_1 -%}
{%- if block.settings.icon_1 == blank -%}
{{- tab_1_title -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon_1, size: 'small' %}
<span class="content-with-icon__beside">{{ tab_1_title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}

{%- capture accordion_title_2 -%}
{%- if block.settings.icon_2 == blank -%}
{{- tab_2_title -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon_2, size: 'small' %}
<span class="content-with-icon__beside">{{ tab_2_title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}

{%- capture accordion_title_3 -%}
{%- if block.settings.icon_3 == blank -%}
{{- tab_3_title -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon_3, size: 'small' %}
<span class="content-with-icon__beside">{{ tab_3_title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}

{% render 'accordion',
allow_multi_open: true,
add_content_class: 'rte cf',
first_item_open: block.settings.open,
item1_title: accordion_title_1,
item1_content: product.description,
item2_title: accordion_title_2,
item2_content: tab_2_content,
item3_title: accordion_title_3,
item3_content: tab_3_content
%}
</div>
{% endif %}

{%- else -%}
<div class="rte rte--expanded-images clearfix row {% if block.settings.full_width == false %} product-description__no-expand{% endif %}">
{{ product.description }}
</div>
{%- endif -%}
{%- endcapture -%}

{%- if block.settings.full_width -%}
{%- capture full_width_content -%}{{ full_width_content }}{{ product_description }}{%- endcapture -%}
{%- else -%}
{{ product_description }}
{%- endif -%}

{% when 'custom_option' %}
{%- if block.settings.label != blank -%}
{%- liquid
assign custom_option_input_id = product_form_id | append: '-custom-' | append: forloop.index
assign custom_input_name = block.settings.label | escape | prepend: 'properties[' | append: ']'
-%}
<div class="custom-option" {{ block.shopify_attributes}}>
{% case block.settings.type %}
{% when 'text' %}
<div class="input-wrapper form-row">
<label class="label" for="{{ custom_option_input_id }}">{{ block.settings.label | escape }}</label>
<input class="custom-option__text-input" type="text" id="{{ custom_option_input_id }}" form="{{ product_form_id }}" name="{{ custom_input_name }}" {% if block.settings.text_required %}required{% endif %}>
</div>

{% when 'textarea' %}
<div class="input-wrapper form-row">
<label class="label" for="{{ custom_option_input_id }}">{{ block.settings.label | escape }}</label>
<textarea class="custom-option__text-input" id="{{ custom_option_input_id }}" form="{{ product_form_id }}" name="{{ custom_input_name }}" {% if block.settings.text_required %}required{% endif %}></textarea>
</div>

{% when 'checkbox' %}
<div class="option-selector form-row">
<label class="label custom-option__checkbox">
{{ block.settings.label | escape }}
<input type="hidden" form="{{ product_form_id }}" name="{{ custom_input_name }}" value="{{ block.settings.checkbox_unchecked_value | escape }}">
<input type="checkbox" form="{{ product_form_id }}" name="{{ custom_input_name }}" value="{{ block.settings.checkbox_checked_value | escape }}">
<span class="custom-option__checkbox-check icon feather-icon">{% render 'feather-check' %}</span>
</label>
</div>

{% when 'multiple' %}
{%- assign custom_options = block.settings.multiple_options | newline_to_br | strip_newlines | split: '<br />' -%}

{% if block.settings.multiple_style == 'dropdown' %}
<div class="form-row">
<div class="option-selector" data-selector-type="dropdown">
{% render 'custom-select',
id: custom_option_input_id,
label: block.settings.label,
label_inside: true,
option_values: custom_options,
selected_value: custom_options.first,
include_native: true,
native_name: custom_input_name,
native_form_id: product_form_id
%}
</div>
</div>

{% else %}
<div class="form-row">
<fieldset class="option-selector" data-selector-type="listed" data-index="custom-option">
<legend class="label">{{ block.settings.label | escape }}</legend>
<div class="option-selector__btns">
{% for option in custom_options %}
{% assign custom_option_input_id = custom_option_input_id | append: forloop.index %}
<input class="opt-btn js-option" type="radio" name="{{ custom_input_name }}" id="{{ custom_option_input_id }}" form="{{ product_form_id }}" value="{{ option | escape }}"{% if forloop.first %} checked{% endif %}>
<label class="opt-label" for="{{ custom_option_input_id }}">{{ option }}</label>
{% endfor %}
</div>
</fieldset>
</div>
{% endif %}

{% endcase %}
</div>
{%- endif -%}

{%- when 'sharing' -%}
{% render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}

{%- when 'text' -%}
{%- if block.settings.text != blank -%}
<div class="row" {{ block.shopify_attributes }}>
{{ block.settings.text }}
</div>
{%- endif -%}

{%- when 'richtext' -%}
{%- if block.settings.richtext != blank -%}
<div class="row rte" {{ block.shopify_attributes }}>
{{ block.settings.richtext }}
</div>
{%- endif -%}

{%- when 'link' -%}
<div class="row" {{ block.shopify_attributes }}>
<a class="{% if block.settings.style == 'button_1' %}btn btn--small btn--primary{% elsif block.settings.style == 'button_2' %}btn btn--small btn--secondary{% else %}standard-link{% endif %}" href="{{ block.settings.url }}">{{ block.settings.text | escape }}</a>
</div>

{%- when 'image' -%}
{%- if block.settings.image != blank -%}
<div class="row" style="max-width: {{ block.settings.image_width }}px" {{ block.shopify_attributes }}>
{%- if block.settings.url != blank -%}<a href="{{ block.settings.url }}">{%- endif -%}
<div class="global-border-radius">
{% render 'responsive-image', image: block.settings.image %}
</div>
{%- if block.settings.url != blank -%}</a>{%- endif -%}
</div>
{% endif %}

{% when 'accordion' %}
{%- capture accordion_content -%}
{%- liquid
assign content = block.settings.content
if block.settings.page != blank
assign content = pages[block.settings.page].content
endif
-%}
{%- if content != blank -%}
<div class="product-detail-accordion" {{ block.shopify_attributes }}>
{%- capture accordion_title -%}
{%- if block.settings.icon == blank -%}
{{- block.settings.title | escape -}}
{%- else -%}
<div class="content-with-icon">
{% render 'icon', icon: block.settings.icon, size: 'small' %}
<span class="content-with-icon__beside">{{ block.settings.title }}</span>
</div>
{%- endif -%}
{%- endcapture -%}
{% render 'accordion', allow_multi_open: true, add_content_class: 'rte cf', first_item_open: block.settings.open, item1_title: accordion_title, item1_content: content %}
</div>
{%- endif -%}
{%- endcapture -%}

{%- if block.settings.full_width -%}
{%- capture full_width_content -%}{{ full_width_content }}{{ accordion_content }}{%- endcapture -%}
{%- else -%}
{{ accordion_content }}
{%- endif -%}

{%- when 'complementary' -%}
<cc-fetched-content data-id="{{ block.id }}" data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&intent=complementary" contains-product-blocks>
{%- if recommendations.performed and recommendations.products_count > 0 -%}
{% if block.settings.enable_carousel %}
<div class="row content-products js-content-products-slider" {{ block.shopify_attributes }}>
<div class="flex">
<div class="content-products__title">{{ block.settings.block_heading | escape }}</div>
{% if recommendations.products_count > 1 and block.settings.max_products > 1 %}
<div class="content-products-controls">
<button class="btn--plain prev icon feather-icon" aria-label="{{ 'general.accessibility_labels.previous' | t | escape }}">{% render 'feather-arrow-left' %}</button>
<button class="btn--plain next icon feather-icon" aria-label="{{ 'general.accessibility_labels.next' | t | escape }}">{% render 'feather-arrow-right' %}</button>
</div>
{% endif %}
</div>
<div class="content-products__products product-carousel-peek">
<div class="grid grid--uniform">
{% liquid
for related_product in recommendations.products limit: block.settings.max_products
render 'product-block', product: related_product, grid_class: 'grid__item one-half small-down--one-half'
endfor
%}
</div>
</div>
{% render 'peek-carousel-advice' %}
</div>
{% else %}
<div class="row content-products content-products--no-carousel" {{ block.shopify_attributes }}>
<div class="content-products__title">{{ block.settings.block_heading | escape }}</div>
<div class="content-products__products">
<div class="grid-flex">
{% liquid
for related_product in recommendations.products limit: block.settings.max_products
render 'product-block', product: related_product, grid_class: 'grid-flex__item one-half small-down--one-half'
endfor
%}
</div>
</div>
</div>
{% endif %}
{%- endif -%}
</cc-fetched-content>

{%- when 'custom_liquid' -%}
{%- if block.settings.custom_liquid != blank -%}
<div class="row" {{ block.shopify_attributes }}>
{{ block.settings.custom_liquid }}
</div>
{%- endif -%}

{% endcase %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>

{%- if full_width_content != blank -%}
<div class="container row">
<div class="reading-width reading-width--no-mobile-padding">
{{ full_width_content }}
</div>
</div>
{%- endif -%}

{%- if show_size_chart == true -%}
{% render 'size-chart', size_chart_page: size_chart_page %}
{%- endif -%}

{% unless product == empty %}
<script type="application/json" class="ProductJson-{{ product.id }}" data-product-json>
{{ product | json }}
</script>
{% endunless %}
</div>

{%- assign current_variant = product.selected_or_first_available_variant -%}
{% render 'structured-data-product', product: product, current_variant: current_variant %}

{% schema %}
{
"name": "Product details",
"class": "section-product-template",
"settings": [
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "checkbox",
"id": "enable_sticky_media",
"label": "Enable stick on scroll",
"default": true
},
{
"type": "select",
"id": "media_size",
"label": "Size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "medium"
},
{
"type": "select",
"id": "media_layout",
"label": "Layout",
"options": [
{
"label": "List",
"value": "list"
},
{
"label": "Thumbnails - below",
"value": "thumbnails-below"
},
{
"label": "Thumbnails - left",
"value": "thumbnails-left"
}
],
"default": "list"
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": false
}
],
"blocks": [
{
"type": "@app"
},
{
"type": "buy_buttons",
"name": "Buy buttons",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": "Show quantity selector",
"default": true
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "show_gift_card_recipient",
"label": "Show recipient information form for gift card products.",
"info": "Allow customers to send gift cards to a recipient along with a personal message. When enabled, the dynamic checkout button will be disabled for gift cards. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-field...)"
},
{
"type": "checkbox",
"id": "show_pickup_availability",
"label": "Show pickup availability",
"default": true,
"info": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/loca...)"
},
{
"type": "checkbox",
"id": "show_backorder_text",
"label": "Show backorder text",
"default": true,
"info": "Only shows for products which use Shopify inventory tracking and are available to purchase when out of stock."
},
{
"type": "header",
"content": "Inventory"
},
{
"type": "select",
"id": "show_inventory_notice",
"label": "Show inventory notice",
"options": [
{
"label": "Never",
"value": "never"
},
{
"label": "Only when inventory low",
"value": "low"
},
{
"label": "Always",
"value": "always"
}
],
"default": "never"
},
{
"type": "select",
"id": "show_inventory_count",
"label": "Show count in inventory notice",
"options": [
{
"label": "Never",
"value": "never"
},
{
"label": "Only when inventory low",
"value": "low"
},
{
"label": "Always",
"value": "always"
}
],
"default": "low"
},
{
"type": "range",
"id": "inventory_notice_threshold",
"min": 1,
"max": 100,
"step": 1,
"label": "Low inventory threshold",
"default": 10
}
]
},
{
"type": "complementary",
"name": "Complementary products",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To select complementary products, add the Search & Discovery app. [Learn more](https:\/\/shopify.dev\/themes\/product-merchandising\/recommendations)"
},
{
"type": "text",
"id": "block_heading",
"default": "Pairs well with",
"label": "Heading"
},
{
"type": "checkbox",
"id": "enable_carousel",
"label": "Enable carousel",
"default": true
},
{
"type": "range",
"id": "max_products",
"min": 1,
"max": 10,
"step": 1,
"label": "Maximum products to show",
"default": 10
}
]
},
{
"type": "custom_liquid",
"name": "Custom Liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "Custom Liquid"
}
]
},
{
"type": "custom_option",
"name": "Custom option",
"settings": [
{
"type": "paragraph",
"content": "Custom options will not show in the quick buy."
},
{
"type": "text",
"id": "label",
"label": "Label",
"info": "Required",
"default": "Custom option"
},
{
"type": "select",
"id": "type",
"label": "Type",
"default": "text",
"options": [
{
"label": "Text",
"value": "text"
},
{
"label": "Long text",
"value": "textarea"
},
{
"label": "Checkbox",
"value": "checkbox"
},
{
"label": "Multiple options",
"value": "multiple"
}
]
},
{
"type": "header",
"content": "Text"
},
{
"type": "checkbox",
"id": "text_required",
"label": "Require text",
"info": "Only works with 'Add to cart' button",
"default": false
},
{
"type": "header",
"content": "Checkbox"
},
{
"type": "text",
"id": "checkbox_checked_value",
"label": "Checked value",
"default": "Yes"
},
{
"type": "text",
"id": "checkbox_unchecked_value",
"label": "Unchecked value",
"default": "No"
},
{
"type": "header",
"content": "Multiple options"
},
{
"type": "select",
"id": "multiple_style",
"label": "Style",
"default": "dropdown",
"options": [
{
"label": "Dropdown",
"value": "dropdown"
},
{
"label": "Radio",
"value": "radio"
}
]
},
{
"type": "textarea",
"id": "multiple_options",
"label": "Options",
"default": "Option 1\nOption 2\nOption 3",
"info": "One option on each line"
}
]
},
{
"type": "description",
"name": "Description",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "Show full width",
"info": "Will show underneath product media and details",
"default": false
},
{
"type": "checkbox",
"id": "show_tabs",
"label": "Enable tabs",
"default": false
},
{
"type": "paragraph",
"content": "Show 2 further tabs by adding a title and content or selecting a page"
},
{
"type": "radio",
"id": "tab_direction",
"label": "Tab direction",
"default": "horizontal",
"options": [
{
"value": "horizontal",
"label": "Horizontal"
},
{
"value": "vertical",
"label": "Vertical"
}
]
},
{
"type": "header",
"content": "Tab 1"
},
{
"type": "select",
"id": "icon_1",
"label": "Vertical tab icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "text",
"id": "tab_1_title",
"label": "Title",
"default": "Description"
},
{
"type": "header",
"content": "Tab 2"
},
{
"type": "select",
"id": "icon_2",
"label": "Vertical tab icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "text",
"id": "tab_2_title",
"label": "Title"
},
{
"type": "richtext",
"id": "tab_2_content",
"label": "Content"
},
{
"type": "page",
"id": "tab_2_page",
"label": "Content from page"
},
{
"type": "header",
"content": "Tab 3"
},
{
"type": "select",
"id": "icon_3",
"label": "Vertical tab icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "text",
"id": "tab_3_title",
"label": "Title"
},
{
"type": "richtext",
"id": "tab_3_content",
"label": "Content"
},
{
"type": "page",
"id": "tab_3_page",
"label": "Content from page"
}
]
},
{
"type": "accordion",
"name": "Collapsible tab",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Collapsible tab"
},
{
"type": "select",
"id": "icon",
"label": "Icon",
"default": "",
"options": [
{
"value": "",
"label": "No icon"
},
{
"value": "award",
"label": "Award"
},
{
"value": "box",
"label": "Box"
},
{
"value": "briefcase",
"label": "Briefcase"
},
{
"value": "calendar-days",
"label": "Calendar days"
},
{
"value": "check",
"label": "Check"
},
{
"value": "check-circle",
"label": "Check circle"
},
{
"value": "clock",
"label": "Clock"
},
{
"value": "credit-card",
"label": "Credit card"
},
{
"value": "dollar-sign",
"label": "Dollar sign"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "feather",
"label": "Feather"
},
{
"value": "gift",
"label": "Gift"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "help-circle",
"label": "Help circle"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map-pin",
"label": "Map pin"
},
{
"value": "menu",
"label": "Menu"
},
{
"value": "message-circle",
"label": "Message circle"
},
{
"value": "package",
"label": "Package"
},
{
"value": "percent",
"label": "Percent"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "tag",
"label": "Tag"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "scissors",
"label": "Scissors"
},
{
"value": "search",
"label": "Search"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shrub",
"label": "Shrub"
},
{
"value": "shopping-bag",
"label": "Shopping bag"
},
{
"value": "shopping-cart",
"label": "Shopping cart"
},
{
"value": "star",
"label": "Star"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "undo",
"label": "Undo"
},
{
"value": "user",
"label": "User"
},
{
"value": "vegan",
"label": "Vegan"
}
]
},
{
"type": "richtext",
"id": "content",
"label": "Tab content",
"default": "<p>Collapsible tab content</p>"
},
{
"type": "page",
"id": "page",
"label": "Tab content from page"
},
{
"type": "checkbox",
"id": "open",
"label": "Open",
"default": false
},
{
"type": "checkbox",
"id": "full_width",
"label": "Show full width",
"info": "Will show underneath product media and details",
"default": false
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_width",
"min": 60,
"max": 700,
"step": 10,
"unit": "px",
"label": "Image width",
"default": 700
},
{
"type": "url",
"id": "url",
"label": "Link"
}
]
},
{
"type": "link",
"name": "Link",
"settings": [
{
"type": "url",
"id": "url",
"label": "Link"
},
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Link text"
},
{
"type": "radio",
"id": "style",
"label": "Button style",
"options": [
{ "value": "button_1", "label": "Button - primary" },
{ "value": "button_2", "label": "Button - secondary" },
{ "value": "link_style", "label": "Link"}
],
"default": "button_1"
}
]
},
{
"type": "reviews_summary",
"name": "Product rating",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To display a rating, add a product rating app. [Learn more](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-features#featured-produ...)"
}
]
},
{
"type": "richtext",
"name": "Rich text",
"settings": [
{
"type": "richtext",
"id": "richtext",
"label": "Rich text",
"default": "<p>Rich text block</p>"
}
]
},
{
"type": "sharing",
"name": "Sharing",
"limit": 1
},
{
"type": "sku",
"name": "SKU",
"limit": 1
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Text block"
}
]
},
{
"type": "title_and_price",
"name": "Title and price",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_tax_and_shipping",
"label": "Show tax status and shipping policy link",
"default": false
}
]
},
{
"type": "type",
"name": "Type",
"limit": 1
},
{
"type": "variant_picker",
"name": "Variant picker",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Size chart"
},
{
"type": "checkbox",
"id": "size_chart_enabled",
"label": "Show size chart",
"default": false
},
{
"type": "text",
"id": "size_chart_option_name",
"label": "Option name",
"default": "Size",
"info": "Enter the product option name. The size chart link will sit below this product option."
},
{
"type": "page",
"id": "size_chart_page_id",
"label": "Select page"
}
]
},
{
"type": "vendor",
"name": "Vendor",
"limit": 1
}
]
}
{% endschema %}
➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
StanSavellis
Tourist
21 0 0

THANK YOU so much - it looks as though we have success! Really appreciate your assistance here.