Debutify Theme -hide sold out products prices

geeza · ‎04-27-2021

Hi

how can I hide sold out products prices on th Debutify Theme ?

thanks

geeza · ‎04-27-2021

AMAZING!!!!! thank you!!!!!

View solution in original post

Anonymous · ‎04-27-2021

Hello

Can you please share your store's URL so I can take a look?

Thanks

dmwwebartisan · ‎04-27-2021

@geeza

For that need to hide price then you have to code in collection and product page too.

You can use snippet->product-grid file for collection and section->product-template.liquid file for product page.

add price div in this condition.

{% if product.available %}  ..... {% endif%}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

geeza · ‎04-27-2021

Hi, thanks for your help.

Ive opens the themes code. Could you help me how to do this, im a bit confused.

many thanks

dmwwebartisan · ‎04-27-2021

@geeza

Please share this file code snippet->product-grid file for collection and section->product-template.

PM to me

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

geeza · ‎04-27-2021

this is product template -

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
{%- assign stacked = false -%}
{%- if section.settings.media_layout == "stacked" -%}
{%- assign stacked = true -%}
{%- endif -%}

{%- assign first_media = true -%}

{%- if product.media.size > 1 -%}
{%- assign carousel = true -%}
{%- else -%}
{%- assign carousel = false -%}
{%- endif -%}

{%- if emptyState -%}
{%- assign vendor = 'home_page.onboarding.product_vendor' | t -%}
{%- assign sku = '12345' -%}
{%- assign title = 'home_page.onboarding.product_title' | t -%}
{%- assign compare_at_price = 2999 -%}
{%- assign price = 1999 -%}
{%- else -%}
{%- assign vendor = product.vendor -%}
{%- assign sku = current_variant.sku -%}
{%- assign title = product.title -%}
{%- assign compare_at_price = current_variant.compare_at_price -%}
{%- assign price = current_variant.price -%}
{%- endif -%}

{%- if compare_at_price > price -%}
{%- assign on_sale = true -%}
{%- else -%}
{%- assign on_sale = false -%}
{%- endif -%}

{%- if current_variant.available -%}
{%- assign sold_out = false -%}
{%- else -%}
{%- assign sold_out = true -%}
{%- endif -%}

{%- assign enable_zoom = section.settings.enable_zoom -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign product_image_scale = '2' -%}
{%- assign product_tabs_position = section.settings.dbtfy_product_tabs_position -%}
{%- assign product_description_position = section.settings.dbtfy_product_description_position -%}

{%- if settings.dbtfy_live_view or settings.dbtfy_delivery_time -%}
{%- assign live_view_or_delivery_time = true -%}
{%- endif -%}

{%- if settings.dbtfy_live_view_position == 'under_add_to_cart_button' or settings.dbtfy_delivery_time_position == 'under_add_to_cart_button' -%}
{%- assign live_view_or_delivery_time_under_button = true -%}
{%- endif -%}

{%- if settings.dbtfy_live_view_position == 'under_product_price' or settings.dbtfy_delivery_time_position == 'under_product_price' -%}
{%- assign live_view_or_delivery_time_under_price = true -%}
{%- endif -%}

{%- assign has_description = false -%}

{%- if section.settings.show_product_description and product.description != blank -%}
{%- assign has_description = true -%}
{%- endif -%}

{%- assign show_info_section = false -%}

{%- if has_description and product_description_position == "separate_section" -%}
{%- assign show_info_section = true -%}
{%- elsif section.blocks.size >= 1 -%}
{%- if product_tabs_position == "separate_section" -%}
{%- assign show_info_section = true -%}
{%- elsif product_description_position == "separate_section" -%}
{%- if product_tabs_position != "under_addtocart" -%}
{%- if product_tabs_position == "under_description" or product_tabs_position == "above_description" -%}
{%- assign show_info_section = true -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}

<div class="grid product-single">

<div id="ProductMedia-{{ section.id }}" class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
{%- if product.images != blank -%}

<div id="ProductMediaGroup-{{ section.id }}" class="product-single__media-group-wrapper" data-product-single-media-group-wrapper>
<div class="grid grid-small {% if product.media.size > 1 %}grid-spacer {% endif %}product-single__media-group{% unless stacked %} product-single__media-group--single-xr{% endunless %}{% if carousel %} slick{% endif %}" data-product-single-media-group>
{%- assign enable_image_zoom = section.settings.enable_image_zoom -%}
{% assign height = 850 %}
{% assign width = 575 %}
{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{% comment %}
Display product images
{% endcomment %}
{%- for media in product.media -%}
{%- assign featured = false -%}
{%- if media == featured_media -%}
{%- assign featured = true -%}
{%- endif -%}

{%- capture thumbnail_alt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'products.product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'products.product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'products.product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}

<div class="grid__item product-single__media-flex-wrapper{% if stacked %} product-stacked_media_flex{% endif %}" data-slick-media-label="{{ thumbnail_alt }}" data-product-single-media-flex-wrapper>
<div class="product-single__media-flex">
{%- render 'media' with media, enable_image_zoom: enable_image_zoom, stacked: stacked, featured: featured, width: width, height: height -%}

{% comment %}
Display a "View in your space" button (multi) for the first visible media and each individual model.
Stacked layout only.
{% endcomment %}
{% if stacked %}
{%- assign xr_id = false -%}
{%- if first_media and first_3d_model -%}
{%- assign xr_id = first_3d_model.id -%}
{%- elsif media.media_type == 'model' -%}
{%- assign xr_id = media.id -%}
{%- endif -%}

{%- if xr_id -%}
{%- render 'xr-button' with model_id: xr_id, multi: true -%}
{%- endif -%}
{%- assign first_media = false -%}
{% endif %}
</div>
</div>
{%- endfor -%}
</div>

{% comment %}
Display a "View in your space" button (single).
Stacked/Thumbnails layout (mobile)
Thumbnail layout only (desktop)
{% endcomment %}
{%- if first_3d_model -%}
{%- render 'xr-button' with model_id: first_3d_model.id, multi: false -%}
{%- endif -%}

{%- if product.media.size > 1 -%}
<div class="product-single__thumbnails grid grid-small {% if stacked %}medium--hide large--hide{% endif %}{% if carousel %} slick{% endif %}{% if product.images.size <= 5 %} slick-disabled{% endif %}" data-product-thumbnails>
{% for media in product.media %}
<div class="grid__item one-fifth product-thumbnail-wrapper" data-product-thumbnail-wrapper>
{%- capture thumbnail_alt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'products.product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'products.product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'products.product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}

{% assign media_aspect_ratio = media.aspect_ratio | default: media.preview_image.aspect_ratio %}

<a class="product--wrapper product-single__thumbnail media-wrapper image-link {% if media == featured_media %} active-thumb{% endif %}"
data-media-id="{{ section.id }}-{{ media.id }}"
data-product-thumbnail
style="padding-top: {{ 1 | divided_by: media_aspect_ratio | times: 100 }}%;">
<img class="product--image product-single__thumb media lazyload"
{%- render 'lazysizes', img: media, img_type: 'responsive' -%}
alt="{{ thumbnail_alt }}"
data-media-id="{{ media.id }}">
{%- if media.media_type == 'video' or media.media_type == 'external_video' or media.media_type == 'model' -%}
<div class="product-single__thumbnail-badge">
{% render 'svg-definitions' with media.media_type %}
</div>
{%- endif -%}
</a>
</div>
{% endfor %}
</div>
{%- endif -%}
</div>
{%- elsif product.images.size < 1 or emptyState -%}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
<hr class="hr-divider hr-rev product-single-divider medium--hide large--hide">
</div>

<div id="ProductMeta-{{ section.id }}" class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths{% if emptyState %} large--sticky medium--sticky sticky-check-header{% endif %} {% if sold_out %}variant-soldout{% endif %}">
<div class="product-single__meta">

{%- assign showProductProperties = false -%}

{%- if section.settings.show_product_vendor and product.vendor != blank -%}
{%- assign showProductProperties = true -%}
{%- elsif section.settings.show_product_type and product.type != blank -%}
{%- assign showProductProperties = true -%}
{%- elsif section.settings.show_product_sku and sku != blank -%}
{%- assign showProductProperties = true -%}
{%- endif -%}

{%- if showProductProperties -%}
<div class="product-header-wrapper spacer-bottom">
<ul class="inline-list">
{%- if section.settings.show_product_vendor and product.vendor != blank -%}
<li>
<a href="{{ product.vendor | url_for_vendor }}" class="product-single__vendor text-small">
<span class="{{ settings.icon }} icon-middle">store</span>
<span itemprop="brand">{{ product.vendor }}</span>
</a>
</li>
{%- endif -%}

{%- if section.settings.show_product_type and product.type != blank -%}
<li>
<a href="{{ product.type | url_for_type }}" class="product-single__vendor text-small">
<span class="{{ settings.icon }} icon-middle">folder</span>
{{ product.type }}
</a>
</li>
{%- endif -%}

{%- if section.settings.show_product_sku -%}
<li>
<span class="product-single__sku text-small{% if sku == blank %} hide{% endif %}">
<span class="{{ settings.icon }} icon-middle">settings</span>
<span>SKU: </span>
<span class="variant-sku" itemprop="sku">{{ sku }}</span>
</span>
</li>
{%- endif -%}
</ul>
</div>
{%- endif -%}

<div class="grid grid-xsmall flex-nowrap product-title-container">
<div class="grid__item flex-fill">
<h1 class="product-single__title{% if section.settings.product_title_large %} page-title{% endif %}" itemprop="name">{{ title }}</h1>
</div>
{%- render "dbtfy-wish-list", type: "button", product: product -%}
</div>

{%- unless emptyState -%}
{%- render "review-badge" with product as product, position: "product_page", class: "spacer-bottom" -%}

{%- render "dbtfy-sales-countdown" with product as product, current_variant: current_variant -%}
{%- endunless -%}

{%- if current_variant.inventory_quantity > 0 and current_variant.inventory_management == "shopify" -%}
<meta itemprop="inventoryLevel" content="{{ current_variant.inventory_quantity }}">
{%- endif -%}

<div class="price-container text-money text-large spacer-bottom flex align-center{% if current_variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
<span id="ProductPrice"
class="product-single__price{% if on_sale %} on-sale text-secondary{% endif %}"
itemprop="price"
content="{{ price | divided_by: 100.00 }}"
{% if on_sale %}
aria-label="{{ 'products.general.sale_price' | t }}"
{% else %}
aria-label="{{ 'products.general.regular_price' | t }}"
{% endif %}>
<span class="money">{{ price | money }}</span>
</span>

<span id="ComparePrice"
class="product-single__price--compare-at text-muted text-strike{% unless on_sale %} hide{% endunless %}"
aria-label="{{ 'products.general.regular_price' | t }}">
<span class="money">{{ compare_at_price | money }}</span>
</span>

{%- render "dbtfy-discount-saved" with product as product -%}

<div class="product-single__unit">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}

{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if current_variant.unit_price_measurement -%}
{%- if current_variant.unit_price_measurement.reference_value != 1 -%}
{{- current_variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ current_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span data-unit-price><span class="money"></span>{{ current_variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
</div>
</div>

{%- if live_view_or_delivery_time and live_view_or_delivery_time_under_price -%}
<div class="card card-body spacer-auto spacer-bottom">
{%- if settings.dbtfy_live_view_position == 'under_product_price' -%}
{%- render "dbtfy-live-view" -%}
{%- endif -%}

{%- if settings.dbtfy_delivery_time_position == 'under_product_price' -%}
{%- render "dbtfy-delivery-time" -%}
{%- endif -%}
</div>
{%- endif -%}

{%- if emptyState -%}
<div class="product-single__add-to-cart">
<button type="button" class="btn btn--primary btn--add-to-cart full">
<span class="btn__text">
<span class="{{ settings.icon }} button-cart-icon">{{ settings.icon_cart }}</span>
<span class="btn__add-to-cart-text">
{{ 'products.product.add_to_cart' | t }}
</span>
</span>
</button>
</div>
{%- else -%}
{%- capture "form_classes" -%}
product-single__form {% if product.has_only_default_variant %} product-single__form--no-variants{% endif %}
{%- endcapture -%}

{%- capture "form_id" -%}AddToCartForm--{{ section.id }}{%- endcapture -%}

{%- render "dbtfy-color-swatches" with product as product -%}

{%- form 'product', product, class: form_classes, id: form_id, data-product-form: '' -%}
{%- unless product.has_only_default_variant -%}
<div class="grid grid-small">
{%- for option in product.options_with_values -%}
{%- assign is_color_option = false -%}

{%- if content_for_header contains 'debutify' and product.available and product.variants.size >= 1 and settings.dbtfy_color_swatches -%}
{%- assign swatch_list = settings.dbtfy_color_swatches_color | split: "," -%}

{%- for swatch in swatch_list -%}
{%- assign swatch_option_name = swatch | handleize -%}
{%- assign option_name = option.name | handleize -%}
{%- if option_name == swatch_option_name -%}
{%- assign is_color_option = true -%}
{% endif %}
{%- endfor -%}
{%- endif -%}

{% assign first_option_value = current_variant.options[forloop.index0] | escape %}

<div class="grid__item radio-wrapper product-form__item"{%- if is_color_option -%} hidden{%- endif -%}>
<label class="single-option-radio__label"
for="ProductSelect-option-{{ forloop.index0 }}"
data-option-name="{{ option.name | escape }}">
{{ option.name | escape }}: <span class="variant-label-option-value">{{ first_option_value | escape }}</span>
</label>

{%- if section.settings.product_selector == 'radio' -%}
<fieldset class="single-option-radio inline-list"
id="ProductSelect-option-{{ forloop.index0 }}">
{%- assign option_index = forloop.index -%}

{%- for value in option.values -%}
{%- assign variant_label_state = true -%}

{%- if product.options.size == 1 -%}
{%- unless product.variants[forloop.index0].available -%}
{%- assign variant_label_state = false -%}
{%- endunless -%}
{%- endif -%}

<label for="ProductSelect-option-{{ section.id }}-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{{ value | escape }}</label>
{%- endfor -%}
</fieldset>
{%- else -%}
<select name="option{{ option.position }}"
class="single-option-selector__radio single-option-selector-{{ section.id }} product-form__input select--small"
id="SingleOptionSelector-{{ forloop.index0 }}"
data-index="option{{ forloop.index }}">
{%- for value in option.values -%}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value | escape }}</option>
{%- endfor -%}
</select>
{%- endif -%}
</div>
{%- endfor -%}
</div>
{%- endunless -%}

{% for variant in product.variants %}
{%- assign product_qty = 0 -%}

{% if variant.inventory_management == "shopify" %}
{% if variant.inventory_policy == "continue" %}
{%- assign product_qty = 99999 -%}
{% else %}
{% if variant.inventory_quantity > 0 %}
{%- assign product_qty = variant.inventory_quantity -%}
{% else %}
{%- assign product_qty = 0 -%}
{% endif %}
{% endif %}
{% else %}
{%- assign product_qty = 99999 -%}
{% endif %}

<option
{% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
{% unless variant.available %}disabled="disabled"{% endunless %}
data-sku="{{ variant.sku }}"
data-inventory-policy="{{ variant.inventory_policy }}"
data-inventory-quantity="{{ product_qty }}"
value="{{ variant.id }}">
{%- if variant.available -%}
{{ variant.title }} - {{ variant.price | money_with_currency }}
{%- else -%}
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{%- endif -%}
</option>
{% endfor %}
</select>

{%- assign hide_quantity_box = true -%}

{%- if section.settings.quantity_enabled or settings.dbtfy_quantity_breaks or settings.dbtfy_inventory_quantity -%}
{%- assign hide_quantity_box = false -%}
{%- endif -%}

{%- if section.settings.quantity_enabled or settings.dbtfy_quantity_breaks or settings.dbtfy_inventory_quantity -%}
<div class="product-single__quantity spacer-bottom" {%- if hide_quantity_box -%}hidden{%- endif -%}>
{%- assign quantity_id = 'product-' | append: product.id -%}

{%- if section.settings.quantity_enabled or settings.dbtfy_quantity_breaks -%}
<label class="inline-label" for="{{ quantity_id }}" {% if section.settings.quantity_enabled == false and settings.dbtfy_quantity_breaks %}hidden {% endif %}>{{ 'products.product.quantity' | t }}</label>
{%- endif -%}

{%- render "dbtfy-inventory-quantity", product: product -%}

{%- if section.settings.quantity_enabled -%}
{%- render "quantity-selector", type: "product", id: quantity_id -%}
{%- elsif settings.dbtfy_quantity_breaks -%}
<div class="qty-container"></div>
{%- endif -%}
</div>
{%- endif -%}

<div class="product-single__add-to-cart">
<button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--primary btn--add-to-cart full"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
<span class="btn__text">
<span class="{{ settings.icon }} button-cart-icon">{{ settings.icon_cart }}</span>
<span class="btn__add-to-cart-text">
{%- if current_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
</span>
</button>

{%- if settings.enable_payment_button -%}
{{ form | payment_button }}
{%- endif -%}
</div>
{%- endform -%}
{%- endif -%}
</div>

{%- render "dbtfy-trust-badge", position: "product_page" -%}

{%- if live_view_or_delivery_time and live_view_or_delivery_time_under_button -%}
<div class="card card-body spacer-auto spacer-top">
{%- if settings.dbtfy_live_view_position == 'under_add_to_cart_button' -%}
{%- render "dbtfy-live-view" -%}
{%- endif -%}

{%- if settings.dbtfy_delivery_time_position == 'under_add_to_cart_button' -%}
{%- render "dbtfy-delivery-time" -%}
{%- endif -%}
</div>
{%- endif -%}

{%- if product_tabs_position == "under_addtocart" or product_tabs_position == "above_description" and product_description_position == "under_addtocart" -%}
{%- render "dbtfy-product-tabs" with product as product, class: 'spacer-top' -%}
{%- endif -%}

{%- if product_description_position == "under_addtocart" and has_description -%}
<div id="productDescription" class="product-single__description rte spacer-bottom-none spacer-top" itemprop="description">
{{ product.description }}
</div>
{%- endif -%}

{%- if product_tabs_position == "under_description" and product_description_position == "under_addtocart" -%}
{%- unless has_description -%}
{%- assign tab_spacing_class = "spacer-top" -%}
{%- endunless -%}

{%- render "dbtfy-product-tabs" with product as product, class: tab_spacing_class-%}
{%- endif -%}

{%- render "dbtfy-social-discount", type: "button" -%}

{%- render "social-sharing", share_button: "btn btn-square-xsmall", container_class: "spacer-top" -%}

{%- if section.settings.show_product_tags and product.tags.size > 0 -%}
<div class="product-tags spacer-top">
<ul class="inline-list">
<li class="tag-label">
<span class="{{settings.icon}}" aria-hidden="true">local_offer</span>
{{ 'blogs.article.tags' | t }}
</li>
{%- for tag in product.tags -%}
<li>
<a class="btn btn-reveal-primary btn--xsmall" href="/collections/all/{{ tag | handleize }}">{{ tag }}</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}

{%- if section.settings.show_product_collections and product.collections.size > 0 -%}
<div class="product-tags spacer-top">
<ul class="inline-list">
<li class="tag-label">
<span class="{{settings.icon}}" aria-hidden="true">layers</span>
{{ 'collections.general.catalog_title' | t }}
</li>
{%- for collection in product.collections -%}
<li>
<a class="btn btn-reveal-primary btn--xsmall" href="{{ collection.url }}">{{ collection.title }}</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}

{%- if section.settings.show_full_details and request.page_type == 'index' -%}
<div class="spacer-top">
<a class="product-single__full-details text-link"{% unless emptyState %} href="{{ product.url }}?variant={{ current_variant.id }}"{% endunless %}>
{{ 'products.product.full_details' | t }}
<span class="{{ settings.icon }}" aria-hidden="true">arrow_forward</span>
</a>
</div>
{%- endif -%}
</div>
</div>

{%- render "dbtfy-sticky-addtocart" with product as product, current_variant: current_variant -%}
</div>

</div>
</div>
</div>

{%- if show_info_section -%}
<div class="section-description box {{ section.settings.description_style }} {{ section.settings.text_alignment }} {{ section.settings.text_alignment_mobile }}">
<div class="wrapper">
<div class="grid">
<div class="grid__item{% unless section.settings.description_full %} large--eight-twelfths push--large--two-twelfths{% endunless %}">
{%- if product_tabs_position == "separate_section" or product_tabs_position == "above_description" and product_description_position == "separate_section" -%}
{%- render "dbtfy-product-tabs" with product as product -%}
{%- endif -%}

{%- if product_description_position == "separate_section" and has_description -%}
<div id="productDescription" class="product-single__description rte spacer-bottom-none" itemprop="description">
{{ product.description }}
</div>
{%- endif -%}

{%- if product_tabs_position == "under_description" and product_description_position == "separate_section" -%}
{%- render "dbtfy-product-tabs" with product as product -%}
{%- endif -%}
</div>
</div>
</div>
</div>
{%- endif -%}

{%- render "dbtfy-addtocart-animation" -%}

{%- unless emptyState -%}
<script type="application/json" id="ProductJson-{{ section.id }}">
{
"available": {{ product.available | json }},
"compare_at_price": {{ product.compare_at_price | json }},
"compare_at_price_max": {{ product.compare_at_price_max | json }},
"compare_at_price_min": {{ product.compare_at_price_min | json }},
"compare_at_price_varies": {{ product.compare_at_price_varies | json }},
"content": {{ product.content | json }},
"created_at": {{ product.created_at | json }},
"description": {{ product.description | json }},
"featured_image": {{ product.featured_image | json }},
"handle": {{ product.handle | json }},
"id": {{ product.id | json }},
"images": {{ product.images | json }},
"media": {{ product.media | json }},
"options": {{ product.options | json }},
"price": {{ product.price | json }},
"price_max": {{ product.price_max | json }},
"price_min": {{ product.price_min | json }},
"price_varies": {{ product.price_varies | json }},
"published_at": {{ product.published_at | json }},
"requires_selling_plan": {{ product.requires_selling_plan | json }},
"selling_plan_groups": {{ product.selling_plan_groups | json }},
"tags": {{ product.tags | json }},
"title": {{ product.title | json }},
"type": {{ product.type | json }},
"variants": {{ product.variants | json }},
"vendor": {{ product.vendor | json }},
"has_only_default_variant": {{ product.has_only_default_variant | json }}
}
</script>

geeza · ‎04-27-2021

this one is product-grid-item.liquid

{% assign has_color_swatches = false %}

{%- if content_for_header contains 'debutify' and settings.dbtfy_color_swatches -%}
{%- if settings.dbtfy_color_swatches_grid != blank -%}
{%- if product.available and product.variants.size > 1 -%}
{% assign has_color_swatches = true %}
{%- endif -%}
{%- endif -%}
{%- endif -%}

{%- if emptyState -%}
{%- assign product_link = '/admin/products' -%}
{%- assign vendor = 'home_page.onboarding.product_vendor' | t -%}
{%- assign title = 'home_page.onboarding.product_title' | t -%}
{%- assign compare_at_price = 2999 -%}
{%- assign price = 1999 -%}
{%- else -%}
{%- assign variant = product.first_available_variant -%}
{%- assign product_link = product.url | within: collection -%}
{%- assign vendor = product.vendor -%}
{%- assign title = product.title -%}

{% if has_color_swatches %}
{%- assign compare_at_price = variant.compare_at_price -%}
{%- assign price = variant.price -%}
{% else %}
{%- assign compare_at_price = product.compare_at_price -%}
{%- assign price = product.price -%}
{% endif %}
{%- endif -%}

{%- if compare_at_price > price -%}
{%- assign on_sale = true -%}
{%- else -%}
{%- assign on_sale = false -%}
{%- endif -%}

{%- if product.available or emptyState -%}
{%- assign sold_out = false -%}
{%- else -%}
{%- assign sold_out = true -%}
{%- endif -%}

{%- if settings.grid_product_hover and product.images.size > 1 -%}
{%- assign image_hover = true -%}
{%- else -%}
{%- assign image_hover = false -%}
{%- endif -%}

{%- assign variant = product.selected_or_first_available_variant -%}

<div class="grid__item grid-product flex {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}" data-product-card data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}">
<div class="card grid-product__wrapper {% if image_hover %} has-hover-image{% endif %}">
<div class="grid-product__image-wrapper">
<a href="{{ product_link }}?variant={{ product.first_available_variant.id }}" class="grid-product__image-link">
{%- if product.images != blank -%}
<div id="ProductImageWrapper-{{ product.featured_image.id }}" class="product--wrapper card-image grid-product--wrapper media-wrapper" style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%;">
<img class="product--image media lazyload ProductImage-{{ product.featured_image.id }}"
{% render 'lazysizes', img: product.featured_image, img_type: 'responsive' %}
alt="{{ product.featured_image.alt }}"
data-image>
</div>

{%- if image_hover -%}
<div class="product--wrapper card-image grid-product--wrapper media-wrapper product-hover-image" style="padding-top:{{ 1 | divided_by: product.images[1].aspect_ratio | times: 100 }}%;">
<img class="product--image media lazyload"
{% render 'lazysizes', img: product.images[1], img_type: 'responsive', add_on_crop: settings.dbtfy_product_image_crop %}
alt="{{ product.images[1].alt }}">
</div>
{%- endif -%}
{%- elsif product.images.size < 1 or emptyState -%}
{{ 'product-' | append: current | placeholder_svg_tag: 'card-image placeholder-svg' }}
{%- endif -%}
</a>

{%- unless settings.tag_placement == 'none' -%}
{%- if sold_out -%}
<span class="badge grid-product__badge grid-product__badge-{{ settings.tag_placement }} disabled">
<span class="{{settings.icon}}">watch_later</span>
<span class="product-badge-text tooltip-position-bottom">
{{ 'products.product.sold_out_html' | t }}
</span>
</span>
{%- elsif on_sale -%}
{%- capture saved_amount -%}
{%- if settings.sale_type == 'amount' -%}
<span class="money">{{ compare_at_price | minus: price | money }}</span>
{%- elsif settings.sale_type == 'percentage' -%}
{{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}%
{%- endif -%}
{%- endcapture -%}
<span class="badge grid-product__badge grid-product__badge-{{ settings.tag_placement }}">
<span class="{{settings.icon}}">local_offer</span>
<span class="product-badge-text tooltip-position-bottom">
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
</span>
</span>
{%- endif -%}
{%- endunless -%}

{%- unless emptyState -%}
{%- render "dbtfy-quick-view" with product as product -%}
{%- render "dbtfy-wish-list" with product as product -%}
{%- endunless -%}
</div>

{%- unless emptyState -%}
{%- render "dbtfy-collection-addtocart" with product as product, sold_out: sold_out -%}
{%- endunless -%}

<a href="{{ product_link }}?variant={{ product.first_available_variant.id }}" class="card-body flex flex-column justify-center grid-product__meta spacer-auto-xs text-center">
{%- if has_color_swatches -%}
{%- render "dbtfy-color-swatches" with product as product, type: 'product_grid' -%}
{%- endif -%}

<p class="grid-product__title h6{% if settings.grid_product_truncate %} text-ellipsis{% endif %}">{{ title }}</p>

{%- if settings.review_badge_product_grid -%}
{%- unless emptyState -%}
{%- render 'review-badge' with product as product, position: 'product_grid' -%}
{%- endunless -%}
{%- endif -%}

<span class="price-regular{% if on_sale %} on-sale text-secondary{% endif %}"
{% if on_sale %}
aria-label="{{ 'products.general.sale_price' | t }}"
{% else %}
aria-label="{{ 'products.general.regular_price' | t }}"
{% endif %}>
{%- if product.price_varies and emptyState == false -%}
<span class="money">{{ product.price_min | money }}+</span>
{%- else -%}
<span class="money">{{ price | money }}</span>
{%- endif -%}
</span>

<span class="price-compare text-strike text-muted {% unless on_sale %}hide{% endunless %}"
aria-label="{{ 'products.general.regular_price' | t }}">
{%- if on_sale -%}
<span class="money">{{ compare_at_price | money }}</span>
{%- else -%}
<span class="money"></span>
{%- endif -%}
</span>
</span>

{%- if variant.available and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}

{%- capture unit_price_base_unit -%}
<span>
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
</p>
</a>

{%- if settings.grid_product_vendor -%}
<div class="card-footer text-center">
<p class="vendor grid-product__vendor text-small text-italic">{{ vendor }}</p>
</div>
{%- endif -%}
</div>
</div>

dmwwebartisan · ‎04-27-2021

Please replace the following code and check your product page .

<!-- /snippets/product-template.liquid -->
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
{%- assign stacked = false -%}
{%- if section.settings.media_layout == "stacked" -%}
{%- assign stacked = true -%}
{%- endif -%}

{%- assign first_media = true -%}

{%- if product.media.size > 1 -%}
{%- assign carousel = true -%}
{%- else -%}
{%- assign carousel = false -%}
{%- endif -%}

{%- if emptyState -%}
{%- assign vendor = 'home_page.onboarding.product_vendor' | t -%}
{%- assign sku = '12345' -%}
{%- assign title = 'home_page.onboarding.product_title' | t -%}
{%- assign compare_at_price = 2999 -%}
{%- assign price = 1999 -%}
{%- else -%}
{%- assign vendor = product.vendor -%}
{%- assign sku = current_variant.sku -%}
{%- assign title = product.title -%}
{%- assign compare_at_price = current_variant.compare_at_price -%}
{%- assign price = current_variant.price -%}
{%- endif -%}

{%- if compare_at_price > price -%}
{%- assign on_sale = true -%}
{%- else -%}
{%- assign on_sale = false -%}
{%- endif -%}

{%- if current_variant.available -%}
{%- assign sold_out = false -%}
{%- else -%}
{%- assign sold_out = true -%}
{%- endif -%}

{%- assign enable_zoom = section.settings.enable_zoom -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign product_image_scale = '2' -%}
{%- assign product_tabs_position = section.settings.dbtfy_product_tabs_position -%}
{%- assign product_description_position = section.settings.dbtfy_product_description_position -%}

{%- if settings.dbtfy_live_view or settings.dbtfy_delivery_time -%}
{%- assign live_view_or_delivery_time = true -%}
{%- endif -%}

{%- if settings.dbtfy_live_view_position == 'under_add_to_cart_button' or settings.dbtfy_delivery_time_position == 'under_add_to_cart_button' -%}
{%- assign live_view_or_delivery_time_under_button = true -%}
{%- endif -%}

{%- if settings.dbtfy_live_view_position == 'under_product_price' or settings.dbtfy_delivery_time_position == 'under_product_price' -%}
{%- assign live_view_or_delivery_time_under_price = true -%}
{%- endif -%}

{%- assign has_description = false -%}

{%- if section.settings.show_product_description and product.description != blank -%}
{%- assign has_description = true -%}
{%- endif -%}

{%- assign show_info_section = false -%}

{%- if has_description and product_description_position == "separate_section" -%}
{%- assign show_info_section = true -%}
{%- elsif section.blocks.size >= 1 -%}
{%- if product_tabs_position == "separate_section" -%}
{%- assign show_info_section = true -%}
{%- elsif product_description_position == "separate_section" -%}
{%- if product_tabs_position != "under_addtocart" -%}
{%- if product_tabs_position == "under_description" or product_tabs_position == "above_description" -%}
{%- assign show_info_section = true -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}

<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_media | img_url: 'grande' }}">
<meta itemprop="productID" content="{{ product.id }}">

<div class="product-single" data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}">
<div class="box">
<div class="wrapper">

<div class="grid product-single">
<!-- left grid item -->
<div id="ProductMedia-{{ section.id }}" class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
{%- if product.images != blank -%}
<!-- media group (main media + thumbnails) -->
<div id="ProductMediaGroup-{{ section.id }}" class="product-single__media-group-wrapper" data-product-single-media-group-wrapper>
<div class="grid grid-small {% if product.media.size > 1 %}grid-spacer {% endif %}product-single__media-group{% unless stacked %} product-single__media-group--single-xr{% endunless %}{% if carousel %} slick{% endif %}" data-product-single-media-group>
{%- assign enable_image_zoom = section.settings.enable_image_zoom -%}
{% assign height = 850 %}
{% assign width = 575 %}
{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{% comment %}
Display product images
{% endcomment %}
{%- for media in product.media -%}
{%- assign featured = false -%}
{%- if media == featured_media -%}
{%- assign featured = true -%}
{%- endif -%}

{%- capture thumbnail_alt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'products.product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'products.product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'products.product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}

<div class="grid__item product-single__media-flex-wrapper{% if stacked %} product-stacked_media_flex{% endif %}" data-slick-media-label="{{ thumbnail_alt }}" data-product-single-media-flex-wrapper>
<div class="product-single__media-flex">
{%- render 'media' with media, enable_image_zoom: enable_image_zoom, stacked: stacked, featured: featured, width: width, height: height -%}

{% comment %}
Display a "View in your space" button (multi) for the first visible media and each individual model.
Stacked layout only.
{% endcomment %}
{% if stacked %}
{%- assign xr_id = false -%}
{%- if first_media and first_3d_model -%}
{%- assign xr_id = first_3d_model.id -%}
{%- elsif media.media_type == 'model' -%}
{%- assign xr_id = media.id -%}
{%- endif -%}

{%- if xr_id -%}
{%- render 'xr-button' with model_id: xr_id, multi: true -%}
{%- endif -%}
{%- assign first_media = false -%}
{% endif %}
</div>
</div>
{%- endfor -%}
</div>

{% comment %}
Display a "View in your space" button (single).
Stacked/Thumbnails layout (mobile)
Thumbnail layout only (desktop)
{% endcomment %}
{%- if first_3d_model -%}
{%- render 'xr-button' with model_id: first_3d_model.id, multi: false -%}
{%- endif -%}

{%- if product.media.size > 1 -%}
<div class="product-single__thumbnails grid grid-small {% if stacked %}medium--hide large--hide{% endif %}{% if carousel %} slick{% endif %}{% if product.images.size <= 5 %} slick-disabled{% endif %}" data-product-thumbnails>
{% for media in product.media %}
<div class="grid__item one-fifth product-thumbnail-wrapper" data-product-thumbnail-wrapper>
{%- capture thumbnail_alt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'products.product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'products.product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'products.product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}

{% assign media_aspect_ratio = media.aspect_ratio | default: media.preview_image.aspect_ratio %}

<a class="product--wrapper product-single__thumbnail media-wrapper image-link {% if media == featured_media %} active-thumb{% endif %}"
data-media-id="{{ section.id }}-{{ media.id }}"
data-product-thumbnail
style="padding-top: {{ 1 | divided_by: media_aspect_ratio | times: 100 }}%;">
<img class="product--image product-single__thumb media lazyload"
{%- render 'lazysizes', img: media, img_type: 'responsive' -%}
alt="{{ thumbnail_alt }}"
data-media-id="{{ media.id }}">
{%- if media.media_type == 'video' or media.media_type == 'external_video' or media.media_type == 'model' -%}
<div class="product-single__thumbnail-badge">
{% render 'svg-definitions' with media.media_type %}
</div>
{%- endif -%}
</a>
</div>
{% endfor %}
</div>
{%- endif -%}
</div>
{%- elsif product.images.size < 1 or emptyState -%}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
<hr class="hr-divider hr-rev product-single-divider medium--hide large--hide">
</div>

<!-- right grid item -->
<div id="ProductMeta-{{ section.id }}" class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths{% if emptyState %} large--sticky medium--sticky sticky-check-header{% endif %} {% if sold_out %}variant-soldout{% endif %}">
<div class="product-single__meta">

{%- assign showProductProperties = false -%}

{%- if section.settings.show_product_vendor and product.vendor != blank -%}
{%- assign showProductProperties = true -%}
{%- elsif section.settings.show_product_type and product.type != blank -%}
{%- assign showProductProperties = true -%}
{%- elsif section.settings.show_product_sku and sku != blank -%}
{%- assign showProductProperties = true -%}
{%- endif -%}

{%- if showProductProperties -%}
<div class="product-header-wrapper spacer-bottom">
<ul class="inline-list">
{%- if section.settings.show_product_vendor and product.vendor != blank -%}
<li>
<a href="{{ product.vendor | url_for_vendor }}" class="product-single__vendor text-small">
<span class="{{ settings.icon }} icon-middle">store</span>
<span itemprop="brand">{{ product.vendor }}</span>
</a>
</li>
{%- endif -%}

{%- if section.settings.show_product_type and product.type != blank -%}
<li>
<a href="{{ product.type | url_for_type }}" class="product-single__vendor text-small">
<span class="{{ settings.icon }} icon-middle">folder</span>
{{ product.type }}
</a>
</li>
{%- endif -%}

{%- if section.settings.show_product_sku -%}
<li>
<span class="product-single__sku text-small{% if sku == blank %} hide{% endif %}">
<span class="{{ settings.icon }} icon-middle">settings</span>
<span>SKU: </span>
<span class="variant-sku" itemprop="sku">{{ sku }}</span>
</span>
</li>
{%- endif -%}
</ul>
</div>
{%- endif -%}

<div class="grid grid-xsmall flex-nowrap product-title-container">
<div class="grid__item flex-fill">
<h1 class="product-single__title{% if section.settings.product_title_large %} page-title{% endif %}" itemprop="name">{{ title }}</h1>
</div>
{%- render "dbtfy-wish-list", type: "button", product: product -%}
</div>

{%- unless emptyState -%}
{%- render "review-badge" with product as product, position: "product_page", class: "spacer-bottom" -%}

{%- render "dbtfy-sales-countdown" with product as product, current_variant: current_variant -%}
{%- endunless -%}

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
<link itemprop="availability" href="http://schema.org/{%- if product.available -%}InStock{%- else -%}OutOfStock{%- endif -%}">

{%- if current_variant.inventory_quantity > 0 and current_variant.inventory_management == "shopify" -%}
<meta itemprop="inventoryLevel" content="{{ current_variant.inventory_quantity }}">
{%- endif -%}

{% if product.available %}  
<div class="price-container text-money text-large spacer-bottom flex align-center{% if current_variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
<span id="ProductPrice"
class="product-single__price{% if on_sale %} on-sale text-secondary{% endif %}"
itemprop="price"
content="{{ price | divided_by: 100.00 }}"
{% if on_sale %}
aria-label="{{ 'products.general.sale_price' | t }}"
{% else %}
aria-label="{{ 'products.general.regular_price' | t }}"
{% endif %}>
<span class="money">{{ price | money }}</span>
</span>

<span id="ComparePrice"
class="product-single__price--compare-at text-muted text-strike{% unless on_sale %} hide{% endunless %}"
aria-label="{{ 'products.general.regular_price' | t }}">
<span class="money">{{ compare_at_price | money }}</span>
</span>

{%- render "dbtfy-discount-saved" with product as product -%}

<div class="product-single__unit">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- endcapture -%}

{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if current_variant.unit_price_measurement -%}
{%- if current_variant.unit_price_measurement.reference_value != 1 -%}
{{- current_variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ current_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span data-unit-price><span class="money"></span>{{ current_variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
</div>
</div>
{% endif%}  
  
 
{%- if live_view_or_delivery_time and live_view_or_delivery_time_under_price -%}
<div class="card card-body spacer-auto spacer-bottom">
{%- if settings.dbtfy_live_view_position == 'under_product_price' -%}
{%- render "dbtfy-live-view" -%}
{%- endif -%}

{%- if settings.dbtfy_delivery_time_position == 'under_product_price' -%}
{%- render "dbtfy-delivery-time" -%}
{%- endif -%}
</div>
{%- endif -%}

{%- if emptyState -%}
<div class="product-single__add-to-cart">
<button type="button" class="btn btn--primary btn--add-to-cart full">
<span class="btn__text">
<span class="{{ settings.icon }} button-cart-icon">{{ settings.icon_cart }}</span>
<span class="btn__add-to-cart-text">
{{ 'products.product.add_to_cart' | t }}
</span>
</span>
</button>
</div>
{%- else -%}
{%- capture "form_classes" -%}
product-single__form {% if product.has_only_default_variant %} product-single__form--no-variants{% endif %}
{%- endcapture -%}

{%- capture "form_id" -%}AddToCartForm--{{ section.id }}{%- endcapture -%}

{%- render "dbtfy-color-swatches" with product as product -%}

{%- form 'product', product, class: form_classes, id: form_id, data-product-form: '' -%}
{%- unless product.has_only_default_variant -%}
<div class="grid grid-small">
{%- for option in product.options_with_values -%}
{%- assign is_color_option = false -%}

{%- if content_for_header contains 'debutify' and product.available and product.variants.size >= 1 and settings.dbtfy_color_swatches -%}
{%- assign swatch_list = settings.dbtfy_color_swatches_color | split: "," -%}

{%- for swatch in swatch_list -%}
{%- assign swatch_option_name = swatch | handleize -%}
{%- assign option_name = option.name | handleize -%}
{%- if option_name == swatch_option_name -%}
{%- assign is_color_option = true -%}
{% endif %}
{%- endfor -%}
{%- endif -%}

{% assign first_option_value = current_variant.options[forloop.index0] | escape %}

<div class="grid__item radio-wrapper product-form__item"{%- if is_color_option -%} hidden{%- endif -%}>
<label class="single-option-radio__label"
for="ProductSelect-option-{{ forloop.index0 }}"
data-option-name="{{ option.name | escape }}">
{{ option.name | escape }}: <span class="variant-label-option-value">{{ first_option_value | escape }}</span>
</label>

{%- if section.settings.product_selector == 'radio' -%}
<fieldset class="single-option-radio inline-list"
id="ProductSelect-option-{{ forloop.index0 }}">
{%- assign option_index = forloop.index -%}

{%- for value in option.values -%}
{%- assign variant_label_state = true -%}

{%- if product.options.size == 1 -%}
{%- unless product.variants[forloop.index0].available -%}
{%- assign variant_label_state = false -%}
{%- endunless -%}
{%- endif -%}

<input type="radio"
{% if option.selected_value == value -%} checked="checked"{% endif %}
{% unless variant_label_state %} disabled="disabled"{% endunless %}
value="{{ value | escape }}"
data-index="option{{ option_index }}"
name="option{{ option.position }}"
class="single-option-selector__radio {% unless variant_label_state %} disabled{% endunless %}"
id="ProductSelect-option-{{ section.id }}-{{ option.name | handleize }}-{{ value | escape }}">

<label for="ProductSelect-option-{{ section.id }}-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{{ value | escape }}</label>
{%- endfor -%}
</fieldset>
{%- else -%}
<select name="option{{ option.position }}"
class="single-option-selector__radio single-option-selector-{{ section.id }} product-form__input select--small"
id="SingleOptionSelector-{{ forloop.index0 }}"
data-index="option{{ forloop.index }}">
{%- for value in option.values -%}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value | escape }}</option>
{%- endfor -%}
</select>
{%- endif -%}
</div>
{%- endfor -%}
</div>
{%- endunless -%}

<select name="id"
id="MainProductSelect-{{ product.id }}"
class="product-single__variants no-js product-form__item"
data-section-id="{{ section.id }}">

{% for variant in product.variants %}
{%- assign product_qty = 0 -%}

{% if variant.inventory_management == "shopify" %}
{% if variant.inventory_policy == "continue" %}
{%- assign product_qty = 99999 -%}
{% else %}
{% if variant.inventory_quantity > 0 %}
{%- assign product_qty = variant.inventory_quantity -%}
{% else %}
{%- assign product_qty = 0 -%}
{% endif %}
{% endif %}
{% else %}
{%- assign product_qty = 99999 -%}
{% endif %}

<option
{% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
{% unless variant.available %}disabled="disabled"{% endunless %}
data-sku="{{ variant.sku }}"
data-inventory-policy="{{ variant.inventory_policy }}"
data-inventory-quantity="{{ product_qty }}"
value="{{ variant.id }}">
{%- if variant.available -%}
{{ variant.title }} - {{ variant.price | money_with_currency }}
{%- else -%}
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{%- endif -%}
</option>
{% endfor %}
</select>

{%- assign hide_quantity_box = true -%}

{%- if section.settings.quantity_enabled or settings.dbtfy_quantity_breaks or settings.dbtfy_inventory_quantity -%}
{%- assign hide_quantity_box = false -%}
{%- endif -%}

{%- if section.settings.quantity_enabled or settings.dbtfy_quantity_breaks or settings.dbtfy_inventory_quantity -%}
<div class="product-single__quantity spacer-bottom" {%- if hide_quantity_box -%}hidden{%- endif -%}>
{%- assign quantity_id = 'product-' | append: product.id -%}

{%- if section.settings.quantity_enabled or settings.dbtfy_quantity_breaks -%}
<label class="inline-label" for="{{ quantity_id }}" {% if section.settings.quantity_enabled == false and settings.dbtfy_quantity_breaks %}hidden {% endif %}>{{ 'products.product.quantity' | t }}</label>
{%- endif -%}

{%- render "dbtfy-inventory-quantity", product: product -%}

{%- if section.settings.quantity_enabled -%}
{%- render "quantity-selector", type: "product", id: quantity_id -%}
{%- elsif settings.dbtfy_quantity_breaks -%}
<div class="qty-container"></div>
{%- endif -%}
</div>
{%- endif -%}

<div class="product-single__add-to-cart">
<button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--primary btn--add-to-cart full"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
<span class="btn__text">
<span class="{{ settings.icon }} button-cart-icon">{{ settings.icon_cart }}</span>
<span class="btn__add-to-cart-text">
{%- if current_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
</span>
</button>

{%- if settings.enable_payment_button -%}
{{ form | payment_button }}
{%- endif -%}
</div>
{%- endform -%}
{%- endif -%}
</div>

{%- render "dbtfy-trust-badge", position: "product_page" -%}

{%- if live_view_or_delivery_time and live_view_or_delivery_time_under_button -%}
<div class="card card-body spacer-auto spacer-top">
{%- if settings.dbtfy_live_view_position == 'under_add_to_cart_button' -%}
{%- render "dbtfy-live-view" -%}
{%- endif -%}

{%- if settings.dbtfy_delivery_time_position == 'under_add_to_cart_button' -%}
{%- render "dbtfy-delivery-time" -%}
{%- endif -%}
</div>
{%- endif -%}

{%- if product_tabs_position == "under_addtocart" or product_tabs_position == "above_description" and product_description_position == "under_addtocart" -%}
{%- render "dbtfy-product-tabs" with product as product, class: 'spacer-top' -%}
{%- endif -%}

{%- if product_description_position == "under_addtocart" and has_description -%}
<div id="productDescription" class="product-single__description rte spacer-bottom-none spacer-top" itemprop="description">
{{ product.description }}
</div>
{%- endif -%}

{%- if product_tabs_position == "under_description" and product_description_position == "under_addtocart" -%}
{%- unless has_description -%}
{%- assign tab_spacing_class = "spacer-top" -%}
{%- endunless -%}

{%- render "dbtfy-product-tabs" with product as product, class: tab_spacing_class-%}
{%- endif -%}

{%- render "dbtfy-social-discount", type: "button" -%}

{%- render "social-sharing", share_button: "btn btn-square-xsmall", container_class: "spacer-top" -%}

{%- if section.settings.show_product_tags and product.tags.size > 0 -%}
<div class="product-tags spacer-top">
<ul class="inline-list">
<li class="tag-label">
<span class="{{settings.icon}}" aria-hidden="true">local_offer</span>
{{ 'blogs.article.tags' | t }}
</li>
{%- for tag in product.tags -%}
<li>
<a class="btn btn-reveal-primary btn--xsmall" href="/collections/all/{{ tag | handleize }}">{{ tag }}</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}

{%- if section.settings.show_product_collections and product.collections.size > 0 -%}
<div class="product-tags spacer-top">
<ul class="inline-list">
<li class="tag-label">
<span class="{{settings.icon}}" aria-hidden="true">layers</span>
{{ 'collections.general.catalog_title' | t }}
</li>
{%- for collection in product.collections -%}
<li>
<a class="btn btn-reveal-primary btn--xsmall" href="{{ collection.url }}">{{ collection.title }}</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}

{%- if section.settings.show_full_details and request.page_type == 'index' -%}
<div class="spacer-top">
<a class="product-single__full-details text-link"{% unless emptyState %} href="{{ product.url }}?variant={{ current_variant.id }}"{% endunless %}>
{{ 'products.product.full_details' | t }}
<span class="{{ settings.icon }}" aria-hidden="true">arrow_forward</span>
</a>
</div>
{%- endif -%}
</div>
</div>

{%- render "dbtfy-sticky-addtocart" with product as product, current_variant: current_variant -%}
</div>

</div><!-- /.wrapper -->
</div><!-- /.box -->
</div><!-- /.product-single -->

{%- if show_info_section -%}
<div class="section-description box {{ section.settings.description_style }} {{ section.settings.text_alignment }} {{ section.settings.text_alignment_mobile }}">
<div class="wrapper">
<div class="grid">
<div class="grid__item{% unless section.settings.description_full %} large--eight-twelfths push--large--two-twelfths{% endunless %}">
{%- if product_tabs_position == "separate_section" or product_tabs_position == "above_description" and product_description_position == "separate_section" -%}
{%- render "dbtfy-product-tabs" with product as product -%}
{%- endif -%}

{%- if product_description_position == "separate_section" and has_description -%}
<div id="productDescription" class="product-single__description rte spacer-bottom-none" itemprop="description">
{{ product.description }}
</div>
{%- endif -%}

{%- if product_tabs_position == "under_description" and product_description_position == "separate_section" -%}
{%- render "dbtfy-product-tabs" with product as product -%}
{%- endif -%}
</div>
</div>
</div>
</div>
{%- endif -%}

{%- render "dbtfy-addtocart-animation" -%}

{%- unless emptyState -%}
<script type="application/json" id="ProductJson-{{ section.id }}">
{
"available": {{ product.available | json }},
"compare_at_price": {{ product.compare_at_price | json }},
"compare_at_price_max": {{ product.compare_at_price_max | json }},
"compare_at_price_min": {{ product.compare_at_price_min | json }},
"compare_at_price_varies": {{ product.compare_at_price_varies | json }},
"content": {{ product.content | json }},
"created_at": {{ product.created_at | json }},
"description": {{ product.description | json }},
"featured_image": {{ product.featured_image | json }},
"handle": {{ product.handle | json }},
"id": {{ product.id | json }},
"images": {{ product.images | json }},
"media": {{ product.media | json }},
"options": {{ product.options | json }},
"price": {{ product.price | json }},
"price_max": {{ product.price_max | json }},
"price_min": {{ product.price_min | json }},
"price_varies": {{ product.price_varies | json }},
"published_at": {{ product.published_at | json }},
"requires_selling_plan": {{ product.requires_selling_plan | json }},
"selling_plan_groups": {{ product.selling_plan_groups | json }},
"tags": {{ product.tags | json }},
"title": {{ product.title | json }},
"type": {{ product.type | json }},
"variants": {{ product.variants | json }},
"vendor": {{ product.vendor | json }},
"has_only_default_variant": {{ product.has_only_default_variant | json }}
}
</script>

<script type="application/json" id="ModelJson-{{ section.id }}">
{{ product.media | where: 'media_type', 'model' | json }}
</script>
{%- endunless -%}

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

geeza · ‎04-27-2021

thank that one has worked on the product page.

geeza · ‎04-27-2021

how can I do the product did page and the grid on the homepage?

many thanks

dmwwebartisan · ‎04-27-2021

please share snippets/product-grid-item.liquid file code .

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

geeza · ‎04-27-2021