Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi
I'm trying to remove the prices for sold-out items on Prestige.
From my understanding, all I need is an if statement around the price code. But, I can't seem to find the price code. Any pointers would be appreciated.
I've looked under:
Snippet --> product-form.liquid & product-item.liquid.
(Product-form.liquid)
{%- comment -%}
Those are the option names for which we automatically detect swatch. For the color, we use them to display a swatch, while
for size, we use it to display a size chart (if applicable)
{%- endcomment -%}
{%- assign color_label = 'color,colour,couleur,colore,farbe,색,色,färg,farve' | split: ',' -%}
{%- assign size_label = 'size,taille,größe,tamanho,tamaño,koko,サイズ' | split: ',' -%}
{%- assign size_chart_page = '' -%}
{%- assign product_popovers = '' -%}
{%- assign show_option_label = false -%}
{%- assign selected_variant = product.selected_or_first_available_variant -%}
{%- form 'product', product, class: 'ProductForm' -%}
<div class="ProductForm__Variants">
{%- unless product.has_only_default_variant -%}
{%- for option in product.options_with_values -%}
{%- assign downcase_option = option.name | downcase -%}
{%- if section.settings.selector_mode == 'block' or color_label contains downcase_option and section.settings.show_color_swatch -%}
{%- assign show_option_label = true -%}
{%- endif -%}
{%- endfor -%}
{%- for option in product.options_with_values -%}
{%- assign downcase_option = option.name | downcase -%}
{%- capture popover_id -%}popover-{{ product.id }}-{{ section.id }}-{{ option.name | handle }}{%- endcapture -%}
<div class="ProductForm__Option {% if show_option_label %}ProductForm__Option--labelled{% endif %}">
{%- if show_option_label -%}
{%- assign size_chart_page = pages['size-chart'] -%}
<span class="ProductForm__Label">
{{ option.name }}:
{% if color_label contains downcase_option and section.settings.show_color_swatch %}
<span class="ProductForm__SelectedValue">{{ option.selected_value }}</span>
{% endif %}
{%- if size_label contains downcase_option and size_chart_page != empty -%}
<button type="button" class="ProductForm__LabelLink Link Text--subdued" data-action="open-modal" aria-controls="modal-{{ size_chart_page.handle }}">
{{- 'product.form.size_chart' | t -}}
</button>
{%- endif -%}
</span>
{%- endif -%}
{%- if color_label contains downcase_option and section.settings.show_color_swatch -%}
<ul class="ColorSwatchList HorizontalList HorizontalList--spacingTight">
{%- for value in option.values -%}
{%- assign downcase_value = value | downcase -%}
<li class="HorizontalList__Item">
{%- assign color_swatch_name = value | handle | append: '.png' -%}
{%- assign color_swatch_image = images[color_swatch_name] -%}
<input id="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" class="ColorSwatch__Radio" type="radio" name="option-{{ forloop.parentloop.index0 }}" value="{{ value | escape }}" {% if value == option.selected_value %}checked="checked"{% endif %} data-option-position="{{ option.position }}">
<label for="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" class="ColorSwatch ColorSwatch--large {% if downcase_value == 'white' %}ColorSwatch--white{% endif %}" data-tooltip="{{ value | escape }}" style="background-color: {{ value | replace: ' ', '' | downcase }}; {% if color_swatch_image != blank %}background-image: url({{ color_swatch_image | img_url: '64x64' }}){% endif %}">
<span class="u-visually-hidden">{{ value }}</span>
</label>
</li>
{%- endfor -%}
</ul>
{%- elsif section.settings.selector_mode == 'block' -%}
<ul class="SizeSwatchList HorizontalList HorizontalList--spacingTight">
{%- for value in option.values -%}
<li class="HorizontalList__Item">
<input id="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" class="SizeSwatch__Radio" type="radio" name="option-{{ forloop.parentloop.index0 }}" value="{{ value | escape }}" {% if value == option.selected_value %}checked="checked"{% endif %} data-option-position="{{ option.position }}">
<label for="option-{{ section.id }}-{{ forloop.parentloop.index0 }}-{{ forloop.index0 }}" class="SizeSwatch">{{ value }}</label>
</li>
{%- endfor -%}
</ul>
{%- else -%}
<button type="button" class="ProductForm__Item" aria-expanded="false" aria-controls="{{ popover_id }}">
<span class="ProductForm__OptionName">{% unless show_option_label %}{{ option.name }}: {% endunless %}<span class="ProductForm__SelectedValue">{{ option.selected_value }}</span></span>
{%- render 'icon' with 'select-arrow' -%}
</button>
{%- capture popover_html -%}
{%- if color_label contains downcase_option and section.settings.show_color_carousel -%}
{%- for value in option.values -%}
{%- if value == option.selected_value -%}
{%- assign initial_image_index = forloop.index0 -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- capture flickity_options -%}
{
"prevNextButtons": true,
"pageDots": true,
"initialIndex": {{ initial_image_index }},
"arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
}
{%- endcapture -%}
<div id="{{ popover_id }}" class="VariantSelector" aria-hidden="true">
{%- capture option_index -%}option{{ option.position }}{%- endcapture -%}
{%- assign option_indexes_excluded_color = '' -%}
{%- assign selected_variant_title_excluded_color = '' -%}
{%- for option_nested in product.options_with_values -%}
{%- if option_nested.position != option.position -%}
{%- assign option_indexes_excluded_color = option_indexes_excluded_color | append: option_nested.position | append: ',' -%}
{%- for option_nested_value in option_nested.values -%}
{%- if option_nested_value == option_nested.selected_value -%}
{%- assign selected_variant_title_excluded_color = selected_variant_title_excluded_color | append: option_nested_value -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- assign option_indexes_excluded_color = option_indexes_excluded_color | split: ',' | compact -%}
<div class="VariantSelector__Carousel Carousel" data-flickity-config='{{ flickity_options }}'>
{%- for value in option.values -%}
<div class="VariantSelector__Item Carousel__Cell {% if value == option.selected_value %}is-selected{% endif %}"
data-background-color="{{ value | split: ' ' | last | handle }}"
data-background-image="{{ value | handle | append: '.png' | asset_url }}"
data-option-position="{{ option.position }}"
data-option-value="{{ value | escape }}">
{%- for variant in product.variants -%}
{%- if variant[option_index] == value -%}
{%- assign variant_image = variant.image | default: product.featured_image -%}
{%- assign variant_title_excluded_color = '' -%}
{%- for option_index_excluded_color in option_indexes_excluded_color -%}
{%- capture sub_option_index -%}option{{ option_index_excluded_color }}{%- endcapture -%}
{%- assign variant_title_excluded_color = variant_title_excluded_color | append: variant[sub_option_index] -%}
{%- endfor -%}
<div data-variant-title="{{ variant_title_excluded_color | escape }}" class="VariantSelector__ImageWrapper AspectRatio AspectRatio--withFallback" aria-hidden="{% if selected_variant_title_excluded_color == variant_title_excluded_color %}false{% else %}true{% endif %}" style="max-width: {{ variant_image.width }}px; padding-bottom: {{ 100.0 | divided_by: variant_image.aspect_ratio }}%; --aspect-ratio: {{ variant_image.aspect_ratio }}">
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,800', image: variant_image -%}{%- endcapture -%}
{%- assign image_url = variant_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="VariantSelector__Image Image--lazyLoad Image--fadeIn" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ variant_image.alt | escape }}">
<span class="Image__Loader"></span>
</div>
{%- endif -%}
{%- endfor -%}
</div>
{%- endfor -%}
</div>
<div class="VariantSelector__Info">
<div class="VariantSelector__ChoiceList">
{%- for value in option.values -%}
{%- assign min_price_for_variant = product.price_max -%}
{%- for variant in product.variants -%}
{%- if variant[option_index] == value -%}
{%- assign min_price_for_variant = min_price_for_variant | at_most: variant.price -%}
{%- endif -%}
{%- endfor -%}
<div class="VariantSelector__Choice {% if value == option.selected_value %}is-selected{% endif %}">
<div class="VariantSelector__ChoiceColor">
{%- assign downcase_value = value | downcase -%}
{%- assign color_swatch_name = value | handle | append: '.png' -%}
{%- assign color_swatch_image = images[color_swatch_name] -%}
<span class="VariantSelector__ColorSwatch {% if downcase_value == 'white' %}VariantSelector__ColorSwatch--white{% endif %}" style="background-color: {{ value | replace: ' ', '' | downcase }}; {% if color_swatch_image != blank %}background-image: url({{ color_swatch_image | img_url: '64x64' }}){% endif %}"></span>
<span class="VariantSelector__ChoiceValue">{{ value }}</span>
</div>
<div class="VariantSelector__ChoicePrice" data-color-position="{{ option.position }}">
{%- if available_prices_for_option_value.size > 1 -%}
{%- capture formatted_min_price -%}<span>{{ min_price_for_variant | money_without_trailing_zeros }}</span>{%- endcapture -%}
<span class="Heading Text--subdued">{{ 'product.form.from_price_html' | t: min_price: formatted_min_price }}</span>
{%- else -%}
<span class="Heading Text--subdued">{{ min_price_for_variant | money_without_trailing_zeros }}</span>
{%- endif -%}
</div>
</div>
{%- endfor -%}
</div>
<button type="button" class="VariantSelector__Button Button Button--primary Button--full" data-action="select-variant">{{- 'product.form.select_model' | t -}}</button>
</div>
</div>
{%- else -%}
<div id="{{ popover_id }}" class="OptionSelector Popover Popover--withMinWidth" aria-hidden="true">
<header class="Popover__Header">
<button type="button" class="Popover__Close Icon-Wrapper--clickable" data-action="close-popover">{% render 'icon' with 'close' %}</button>
<span class="Popover__Title Heading u-h4">{{ option.name | escape }}</span>
</header>
<div class="Popover__Content">
<div class="Popover__ValueList" data-scrollable>
{%- for value in option.values -%}
<button type="button" class="Popover__Value {% if value == option.selected_value %}is-selected{% endif %} Heading Link Link--primary u-h6"
data-value="{{ value | escape }}"
data-option-position="{{ option.position }}"
data-action="select-value">
{{- value | escape -}}
</button>
{%- endfor -%}
</div>
{%- assign size_chart_page = pages['size-chart'] -%}
{%- if show_option_label == false and size_label contains downcase_option and size_chart_page != empty -%}
<button type="button" class="Popover__FooterHelp Heading Link Link--primary Text--subdued u-h6" data-action="open-modal" aria-controls="modal-{{ size_chart_page.handle }}">
{{- 'product.form.size_chart' | t -}}
</button>
{%- endif -%}
</div>
</div>
{%- endif -%}
{%- endcapture -%}
{%- assign product_popovers = product_popovers | append: popover_html -%}
{%- endif -%}
</div>
{%- endfor -%}
<div class="no-js ProductForm__Option">
<div class="Select Select--primary">
{%- render 'icon' with 'select-arrow' -%}
<select id="product-select-{{ product.id }}" name="id" title="Variant">
{%- for variant in product.variants -%}
<option {% if variant == selected_variant %}selected="selected"{% endif %} {% unless variant.available %}disabled="disabled"{% endunless %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
{%- endfor -%}
</select>
</div>
</div>
{%- else -%}
<input type="hidden" name="id" data-sku="{{ selected_variant.sku }}" value="{{ selected_variant.id }}">
{%- endunless -%}
{%- if section.settings.show_quantity_selector -%}
{%- if show_option_label -%}
<span class="ProductForm__Label">{{ 'product.form.quantity' | t }}:</span>
{%- endif -%}
<div class="ProductForm__QuantitySelector">
<div class="QuantitySelector QuantitySelector--large">
{%- assign quantity_minus_one = line_item.quantity | minus: 1 -%}
<button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="decrease-quantity">{% render 'icon' with 'minus' %}</button>
<input type="text" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="1" aria-label="{{ 'product.form.quantity' | t }}">
<button type="button" class="QuantitySelector__Button Link Link--secondary" data-action="increase-quantity">{% render 'icon' with 'plus' %}</button>
</div>
</div>
{%- else -%}
<input type="hidden" name="quantity" value="1">
{%- endif -%}
{%- if section.settings.show_inventory_quantity -%}
{%- assign hide_inventory_quantity_by_default = false -%}
{%- if selected_variant.inventory_management == blank or selected_variant.inventory_quantity <= 0 -%}
{%- assign hide_inventory_quantity_by_default = true -%}
{%- endif -%}
{%- if section.settings.inventory_quantity_threshold != 0 and selected_variant.inventory_quantity > section.settings.inventory_quantity_threshold -%}
{%- assign hide_inventory_quantity_by_default = true -%}
{%- endif -%}
<p class="ProductForm__Inventory Text--subdued" {% if hide_inventory_quantity_by_default %}style="display: none"{% endif %}>
{%- if section.settings.inventory_quantity_threshold == 0 -%}
{{- 'product.form.inventory_quantity_count' | t: count: selected_variant.inventory_quantity -}}
{%- else -%}
{{- 'product.form.low_inventory_quantity_count' | t: count: selected_variant.inventory_quantity -}}
{%- endif -%}
</p>
{%- endif -%}
</div>
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
ADD TO CART BUTTON
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- if section.settings.show_payment_button == false or product.selling_plan_groups.size > 0 -%}
{%- assign use_primary_button = true -%}
{%- else -%}
{%- assign use_primary_button = false -%}
{%- endif -%}
<button type="submit" data-use-primary-button="{% if use_primary_button %}true{% else %}false{% endif %}" class="ProductForm__AddToCart Button {% if selected_variant.available and use_primary_button %}Button--primary{% else %}Button--secondary{% endif %} Button--full" {% if selected_variant.available %}data-action="add-to-cart"{% else %}disabled="disabled"{% endif %}>
{%- if selected_variant.available -%}
<span>{% if product.template_suffix == 'pre-order' %}{{ 'product.form.pre_order' | t }}{% else %}{{ 'product.form.add_to_cart' | t }}{% endif %}</span>
{%- if section.settings.show_price_in_button -%}
<span class="Button__SeparatorDot"></span>
<span>{{ selected_variant.price | money_without_trailing_zeros }}</span>
{%- endif -%}
{%- else -%}
{{- 'product.form.sold_out' | t -}}
{%- endif -%}
</button>
{%- if section.settings.show_payment_button and product.template_suffix != 'pre-order' -%}
{{ form | payment_button }}
{%- endif -%}
{{ form | payment_terms }}
{%- comment -%}The availability container will be added automatically if there is store pickup available{%- endcomment -%}
{%- if section.settings.show_pickup_availability -%}
<div class="ProductMeta__StoreAvailabilityContainer"></div>
{%- endif -%}
{%- endform -%}
{%- if size_chart_page != empty -%}
{%- comment -%}If we have a size chart we capture the modal content (it must be displayed outside the form for proper positioning){%- endcomment -%}
{%- capture product_modals -%}
<div id="modal-{{ size_chart_page.handle }}" class="Modal Modal--dark Modal--fullScreen Modal--pageContent" aria-hidden="true" role="dialog" data-scrollable>
<header class="Modal__Header">
<h2 class="Modal__Title Heading u-h1">{{ size_chart_page.title }}</h2>
</header>
<div class="Modal__Content Rte">
<div class="Container Container--extraNarrow">
{{- size_chart_page.content -}}
</div>
</div>
<button class="Modal__Close RoundButton RoundButton--large" data-animate-bottom data-action="close-modal">{% render 'icon' with 'close' %}</button>
</div>
{%- endcapture -%}
{%- endif -%}
{%- if section.settings.show_payment_button and selected_variant.available == false -%}
<style>
#shopify-section-{{ section.id }} .shopify-payment-button {
display: none;
}
</style>
{%- endif -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
OFF SCREEN ELEMENTS
Implementation note: in the past (with "include") we could accumulate the data and output it outside the snippet
itself. However with the new "render" tag, everything that is captured inside cannot be used outside the snippet
itself. As a consequence we are moving them in JavaScript. This allows to make sure that those elements are upper
in the DOM tree, and do not show below the content
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
<div class="Product__OffScreen">
{{- product_popovers -}}
{{- product_modals -}}
</div>
{% comment %}
------------------------------------------------------------------------------
Product Data. This must be outputted for all products (including home page).
IMPORTANT: THIS CODE IS VITAL. DO NOT EDIT IT NOT REMOVE IT. MAKE SURE TO KEEP
THE EXACT SAME ATTRIBUTES.
------------------------------------------------------------------------------
{% endcomment %}
<script type="application/json" data-product-json>
{
"product": {{ product | json }},
"selected_variant_id": {{ selected_variant.id }}
{%- if section.settings.show_inventory_quantity -%}
,"inventories": {
{%- for variant in product.variants -%}
{%- assign inventory_message = '' -%}
{%- if section.settings.inventory_quantity_threshold == 0 -%}
{%- capture inventory_message -%}{{- 'product.form.inventory_quantity_count' | t: count: variant.inventory_quantity -}}{%- endcapture -%}
{%- else -%}
{%- capture inventory_message -%}{{- 'product.form.low_inventory_quantity_count' | t: count: variant.inventory_quantity -}}{%- endcapture -%}
{%- endif -%}
"{{ variant.id }}": {
"inventory_management": {{ variant.inventory_management | json }},
"inventory_policy": {{ variant.inventory_policy | json }},
"inventory_quantity": {{ variant.inventory_quantity | json }},
"inventory_message": {{ inventory_message | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
}
{%- endif -%}
}
</script>
(Product-item.liquid) (here I managed to make the price disappear on hover for the item, but the price still shows in the product description)
<div class="ProductItem {% if use_horizontal %}ProductItem--horizontal{% endif %}">
<div class="ProductItem__Wrapper">
{%- comment -%}
We are using LazySizes to efficiently choose the most appropriate image in the set. However, because internally LazySizes uses srcset, we need to make
sure that the image sizes we offer is not larger than the max size uploaded by the merchants.
{%- endcomment -%}
{%- if settings.product_image_size == 'natural' or use_horizontal -%}
{%- assign use_natural_size = true -%}
{%- else -%}
{%- assign use_natural_size = false -%}
{%- endif -%}
{%- if settings.product_show_secondary_image and product.media[1] != blank and use_horizontal != true -%}
{%- assign has_alternate_image = true -%}
{%- else -%}
{%- assign has_alternate_image = false -%}
{%- endif -%}
<a href="{{ product.url | within: collection }}" class="ProductItem__ImageWrapper {% if has_alternate_image %}ProductItem__ImageWrapper--withAlternateImage{% endif %}">
{%- if use_horizontal -%}
{%- assign max_width = 125 -%}
{%- else -%}
{%- assign max_width = product.featured_media.preview_image.width -%}
{%- endif -%}
{%- assign media_aspect_ratio = product.featured_media.aspect_ratio | default: product.featured_media.preview_image.aspect_ratio -%}
<div class="AspectRatio AspectRatio--{% if use_natural_size %}withFallback{% else %}{{ settings.product_image_size }}{% endif %}" style="max-width: {{ max_width }}px; {% if use_natural_size %}padding-bottom: {{ 100.0 | divided_by: media_aspect_ratio }}%;{% endif %} --aspect-ratio: {{ media_aspect_ratio }}">
{%- comment -%}
IMPLEMENTATION NOTE: The alternate image (not visible by default) should be the first in the DOM, as the spinner (Image__Loader element) is
displayed based on the immediately previously shown image.
{%- endcomment -%}
{%- if has_alternate_image -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,600,800,900,1000,1200', image: product.media[1] -%}{%- endcapture -%}
{%- assign image_url = product.media[1] | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="ProductItem__Image ProductItem__Image--alternate Image--lazyLoad Image--fadeIn" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ product.media[1].alt | escape }}" data-media-id="{{ product.media[1].id }}">
{%- endif -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,700,800,900,1000,1200', image: product.featured_media -%}{%- endcapture -%}
{%- assign image_url = product.featured_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="ProductItem__Image Image--lazyLoad Image--fadeIn" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" alt="{{ product.featured_media.alt | escape }}" data-media-id="{{ product.featured_media.id }}">
<span class="Image__Loader"></span>
<noscript>
<img class="ProductItem__Image ProductItem__Image--alternate" src="{{ product.media[1] | img_url: '600x' }}" alt="{{ product.media[1].alt | escape }}">
<img class="ProductItem__Image" src="{{ product.featured_media| img_url: '600x' }}" alt="{{ product.featured_media.alt | escape }}">
</noscript>
</div>
</a>
{%- if show_labels -%}
{%- capture product_labels -%}
{%- for tag in product.tags -%}
{%- if tag contains '__label' -%}
<span class="ProductItem__Label Heading Text--subdued">{{ tag | split: '__label:' | last }}</span>
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- if product.available -%}
{%- if product.compare_at_price > product.price -%}
<span class="ProductItem__Label ProductItem__Label--onSale Heading Text--subdued">{{ 'product.labels.on_sale' | t }}</span>
{%- endif -%}
{%- else -%}
<span class="ProductItem__Label ProductItem__Label--soldOut Heading Text--subdued">{{ 'product.labels.sold_out' | t }}</span>
{%- endif -%}
{%- endcapture -%}
{%- if product_labels != blank -%}
<div class="ProductItem__LabelList">
{{ product_labels }}
</div>
{%- endif -%}
{%- endif -%}
{%- if show_product_info -%}
<div class="ProductItem__Info {% unless use_horizontal %}ProductItem__Info--{{ settings.product_info_alignment }}{% endunless %}">
{%- if show_vendor -%}
<p class="ProductItem__Vendor Heading">{{ product.vendor }}</p>
{%- endif -%}
<h2 class="ProductItem__Title Heading">
<a href="{{ product.url | within: collection }}">{{ product.title }}</a>
</h2>
{%- if show_color_swatch -%}
{%- assign color_swatch_list = '' -%}
{%- capture color_swatch -%}
{%- assign color_label = 'color,colour,couleur,colore,farbe,색,色,färg,farve' | split: ',' -%}
{%- capture color_name -%}{{ section.id }}-{{ product.id }}{%- endcapture -%}
{%- for option in product.options_with_values -%}
{%- assign downcased_option = option.name | downcase -%}
{%- if color_label contains downcased_option -%}
{%- assign variant_option = 'option' | append: forloop.index -%}
{%- for value in option.values -%}
{%- assign downcased_value = value | downcase -%}
{%- capture color_id -%}{{ section.id }}-{{ product.id }}-{{ forloop.index }}{%- endcapture -%}
{%- for variant in product.variants -%}
{%- if variant[variant_option] == value -%}
{%- assign variant_for_value = variant -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
<div class="ProductItem__ColorSwatchItem">
{%- if variant_for_value.image -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,700,800,900,1000,1200', image: variant_for_value.image -%}{%- endcapture -%}
{%- assign variant_image_url = variant_for_value.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- assign color_swatch_name = value | handle | append: '.png' -%}
{%- assign color_swatch_image = images[color_swatch_name] -%}
<input class="ColorSwatch__Radio" type="radio" name="{{ color_name }}" id="{{ color_id }}" value="{{ value | escape }}" {% if option.selected_value == value %}checked="checked"{% endif %} data-variant-url="{{ variant_for_value.url }}{% if variant_for_value.image %}#Image{{ variant_for_value.image.id }}{% endif %}" {% if variant_for_value.image %}data-image-id="{{ variant_for_value.image.id }}" data-image-url="{{ variant_image_url }}" data-image-widths="[{{ supported_sizes }}]" data-image-aspect-ratio="{{ variant_for_value.image.aspect_ratio }}"{% endif %} aria-hidden="true">
<label class="ColorSwatch ColorSwatch--small {% if downcased_value == 'white' %}ColorSwatch--white{% endif %}" for="{{ color_id }}" style="background-color: {{ value | replace: ' ', '' | downcase }}; {% if color_swatch_image != blank %}background-image: url({{ color_swatch_image | img_url: '64x64' }}){% endif %}" title="{{ value | escape }}" data-tooltip="{{ value | escape }}"></label>
</div>
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}
{%- if color_swatch != blank -%}
{%- capture color_swatch_list -%}
<div class="ProductItem__ColorSwatchList">
{{- color_swatch -}}
</div>
{%- endcapture -%}
{%- endif -%}
{%- endif -%}
{%- if show_price_on_hover == nil -%}
{%- assign show_price_on_hover = settings.product_show_price_on_hover -%}
{%- endif -%}
{%- if show_price_on_hover and color_swatch_list != blank -%}
{{- color_swatch_list -}}
{%- endif -%}
{%if product.available%}
{%- if product.template_suffix != 'coming-soon' -%}
<div class="ProductItem__PriceList {% if show_price_on_hover %}ProductItem__PriceList--showOnHover{% endif %} Heading">
{%- if product.compare_at_price > product.price -%}
<span class="ProductItem__Price Price Price--highlight Text--subdued">{{ product.price | money_without_trailing_zeros }}</span>
<span class="ProductItem__Price Price Price--compareAt Text--subdued">{{ product.compare_at_price | money_without_trailing_zeros }}</span>
{%- elsif product.price_varies -%}
{%- capture formatted_min_price -%}{{ product.price_min | money_without_trailing_zeros }}{%- endcapture -%}
{%- capture formatted_max_price -%}{{ product.price_max | money_without_trailing_zeros }}{%- endcapture -%}
<span class="ProductItem__Price Price Text--subdued">{{ 'collection.product.from_price_html' | t: min_price: formatted_min_price, max_price: formatted_max_price }}</span>
{%- else -%}
<span class="ProductItem__Price Price Text--subdued">{{ product.price | money_without_trailing_zeros }}</span>
{%- endif -%}
</div>
{%endif%}
{%- if product.selected_or_first_available_variant.unit_price_measurement -%}
<div class="ProductItem__UnitPriceMeasurement">
<div class="UnitPriceMeasurement Heading Text--subdued">
<span class="UnitPriceMeasurement__Price">{{ product.selected_or_first_available_variant.unit_price | money_without_trailing_zeros }}</span>
<span class="UnitPriceMeasurement__Separator">/ </span>
<span class="UnitPriceMeasurement__ReferenceValue" {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value == 1 -%}style="display: none"{% endif %}>
{{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
</span>
<span class="UnitPriceMeasurement__ReferenceUnit">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span>
</div>
</div>
{%- endif -%}
{%- endif -%}
{%- if show_price_on_hover == false and color_swatch_list != blank -%}
{{- color_swatch_list -}}
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- if use_horizontal -%}
<a href="{{ product.url }}" class="ProductItem__ViewButton Button Button--secondary hidden-pocket">{{ 'collection.product.view_product' | t }}</a>
{%- endif -%}
</div>
Hey, @nc1345
Eunice here from Shopify, thanks for posting!
The Prestige theme is a third-party theme, so in this case, I advise you to contact the theme developer for support or check the theme's documentation to see if such customization is possible. You can find both the contact details for support and the theme documentation directly in the theme listing on the Shopify theme store.
Here's what you're looking out for:
There's more information on where to find support for themes here.
Alternatively, you could try this tutorial found on the Shopify Developers website. Because you're using a third-party theme, Shopify Support is unable to assist you with this tutorial. However, do feel free to give it a go! If you find the tutorial doesn't work for your theme you can erase any code added by rolling back your theme. If you're not sure how to roll back your theme check out this handy guide. Please note this tutorial is for hiding all of your product prices.
Another alternative is to hire a Shopify Expert who can create custom code for you to achieve your goal. Shopify Experts are trusted, third-party agencies and freelancers who offer services for Shopify merchants. They're experts so you don't have to be! To browse Experts, or to post a job, head on over to the Shopify Experts website. Here you will connect with Shopify Experts who you can hire for complicated or difficult tasks related to your business. When you contact a Shopify Expert, you're not committed to hiring them. You decide whether you want to work with them.
I hope this helps!
To learn more visit the Shopify Help Center or the Community Blog.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024