Show 1st variant on collections page (rather than the cheapest) or choose which variant is displayed

[Hayne]

Hello,

Some of our products have variants listed as $0.00 as they are a special order item (mostly the larger sizes). The collections page is automatically showing the product price as $0.00 because it is the cheapest.

I already have an app that changes this price to show P.O.A on the product page and an add to quote button but I’m trying to find a workaround for the collections page.

So far I have considered the following options:

1. Hide all prices on the collections page - I don’t really want to do this as most products have a price for most variants

2. Remove the variants where we don’t have a price and say that they are available in the description - again I don’t want to do this because it won’t clearly show the sizes we can sell and the add to quote functionality (app) won’t work.

3. Find an app or code so that the price of the first variant shows on the collection page or manually choose which variant is displayed for that product.

I have seen this thread where it shows you how the code can be edited to show the first variant price but I can’t find it in my theme code. I have pasted the code from my theme that looks similar at the bottom of this post.

As you can tell, I have no coding/shopify experience and the developer I am working with is telling me that he can’t find documentation on a custom code that will work.

Can anyone help?

collection-product.liquid

{% for product in collectionBestseller.products limit: 2 %}

{% if settings.language_enable %} {{ product.title | split: '|' | first }} {{ product.title | split: '|' | last }} {% else %} {{ product.title | split: '|' | first }} {% endif %}

{% if on_sale %} {% if product.price_varies %} {% assign sale_price = product.price | money %} {{ 'products.product.on_sale_from_html' | t: price: sale_price }} {% else %}

{{ product.price | money }}

{% endif %} {% else %} {% if product.price_varies %} {% assign price = product.price | money %} {{ 'products.general.from_text_html' | t: price: price }} {% else %} {{ product.price | money }} {% endif %} {% endif %} {% if sold_out %} {{ 'products.product.sold_out' | t }} {% endif %} {% if on_sale %}

{{ product.compare_at_price | money }}

{% endif %}

{% endfor %}

[marcoswata]

Try this.

Replace this piece of code:

{% if product.price_varies %}
{% assign price = product.price | money %}

With:

{% if product.price_varies %}
{% assign price = product.price_max | money %}

[IonPillowFight]

You can also follow these steps:

• Step 1: Go to Online store > Themes > Actions > Edit code.

• Step 2: Go to snippets > card-product.liquid and look for
  Code: {% render ‘price’, product: card_product, price_class: ‘’, show_compare_at_price: true %}

• Step 3: Replace this code with

Code: {{ card_product.variants.first.price | money }}

** In case you want to include the currency code in your code replacement, you can modify it like this:

Code: {{ card_product.variants.first.price | money_with_currency }}

Thank you and good luck.

[Jahid-KlinKode]

Hi @Hayne , want to display variant details on your Shopify collection pages? Watch the solution in this YouTube video:

Display Variants Name and Price on Collection Pages in Shopify

[Alav]

Count find that code. same issue with the prestige theme. can you help? is this the right place on my theme: 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,bröße,tamanho,tamaño,koko,サイズ’ | split: ‘,’ -%}

{%- assign size_chart_page = ‘’ -%}
{%- assign product_popovers = ‘’ -%}

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

{%- form ‘product’, product, class: ‘ProductForm’ -%}

{%- unless product.has_only_default_variant -%} {%- 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 -%}

{%- if section.settings.show_color_swatch and color_label contains downcase_option -%}
{%- assign is_option_with_color_swatch = true -%}
{%- else -%}
{%- assign is_option_with_color_swatch = false -%}
{%- endif -%}

{%- if is_option_with_color_swatch -%} {%- assign downcase_value = option.selected_value | downcase -%}

{{ option.selected_value }}
{{ ‘product.form.colors_count’ | t: count: option.values.size }}
{%- else -%}
{{ option.name }}: {{ option.selected_value }}
{%- endif -%}

{%- include ‘icon’ with ‘select-arrow’ -%}

{%- 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 -%}

{%- capture option_index -%}option{{ option.position }}{%- endcapture -%}

{%- for value in option.values -%} {%- for variant in product.variants -%} {%- if variant[option_index] == value -%} {%- assign variant_image = variant.image | default: product.featured_image -%} {%- break -%} {%- endif -%} {%- endfor -%}

{%- include 'image-size', sizes: '200,400,600,800', image: variant_image -%} {%- assign image_url = variant_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{%- endfor -%}

{%- for value in option.values -%} {%- assign available_prices_for_option_value = '' -%}

{%- for variant in product.variants -%}
{%- if variant[option_index] == value -%}
{%- assign available_prices_for_option_value = available_prices_for_option_value | append: variant.price | append: ‘,’ -%}
{%- endif -%}
{%- endfor -%}

{%- assign available_prices_for_option_value = available_prices_for_option_value | split: ‘,’ | compact | uniq | sort -%}

{%- if is_option_with_color_swatch -%} {%- assign downcase_value = value | downcase -%} {%- endif -%}

{{ value }}

{%- if available_prices_for_option_value.size > 1 -%} {%- capture formatted_min_price -%}{{ available_prices_for_option_value.first | money_without_trailing_zeros }}{%- endcapture -%} {%- capture formatted_max_price -%}{{ available_prices_for_option_value.last | money_without_trailing_zeros }}{%- endcapture -%} {{ 'product.form.from_price_html' | t: min_price: formatted_min_price, max_price: formatted_max_price }} {%- else -%} {{ available_prices_for_option_value.first | money_without_trailing_zeros }} {%- endif -%}

{%- endfor -%}

{{- ‘product.form.select_model’ | t -}}

{%- else -%}

{% include 'icon' with 'close' %} {{ option.name | escape }}

{%- for value in option.values -%} {{- value | escape -}} {%- endfor -%}

{%- assign size_chart_page_handle = settings.size_chart_page | default: ‘size-chart’ -%}
{%- assign size_chart_page = pages[size_chart_page_handle] -%}

{%- if size_label contains downcase_option and size_chart_page != empty -%}

{{- ‘product.form.size_chart’ | t -}}

{%- endif -%}

{%- endif -%} {%- endcapture -%}

{%- assign product_popovers = product_popovers | append: popover_html -%}

{%- endfor -%}

{%- include 'icon' with 'select-arrow' -%} {%- for variant in product.variants -%} {{ variant.title }} - {{ variant.price | money }} {%- endfor -%}

{%- else -%} {%- endunless -%}

{%- if section.settings.show_quantity_selector -%}

{%- assign quantity_minus_one = line_item.quantity | minus: 1 -%}

{% include ‘icon’ with ‘minus’ %}

{% include ‘icon’ with ‘plus’ %}

{%- else -%} {%- 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 -%}

{%- 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 -%}

{%- endif -%}

{%- comment -%}

ADD TO CART BUTTON

{%- endcomment -%}

<button type=“submit” class=“ProductForm__AddToCart Button {% if selected_variant.available and section.settings.show_payment_button == false %}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 -%}
{% if product.template_suffix == ‘pre-order’ %}{{ ‘product.form.pre_order’ | t }}{% else %}{{ ‘product.form.add_to_cart’ | t }}{% endif %}

{{ selected_variant.price | money_without_trailing_zeros }}
{%- else -%}
{{- ‘product.form.sold_out’ | t -}}
{%- endif -%}

{%- if section.settings.show_payment_button -%}
{{ form | payment_button }}
{%- 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 -%}

{{ size_chart_page.title }}

{{- size_chart_page.content -}}

{% include ‘icon’ with ‘close’ %}

{%- endcapture -%} {%- endif -%}

{%- if section.settings.show_payment_button and selected_variant.available == false -%}

#shopify-section-{{ section.id }} .shopify-payment-button { display: none; }

{%- endif -%}

{% 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 %}