How to display "Free" instead of price 0,00 in Narrative theme?

How to make customers see “Free” instead of price with only zeros? I managed to make the change to the product page, but how about for collection list? I’m using Narrative theme.

@Teppo - did you make the code changes in product page? similar changes will be required to make to collection page

@suyash1 I made the change to product-unit-price.liquid.

Could you help me, to which snippet and which part should I make the change?

@Teppo - can you please share collection page template code or add me as collaborator? or you if you want then you too can check collection template file,

we will need to check what code is fetching price on collection page and make changes to it,

@suyash1

{%- assign limit = section.settings.products | times: section.settings.rows -%}
{%- assign totalProducts = collection.products.size -%}

  {% paginate collection.products by limit %}

  {% if section.settings.collection_hero_image and collection.image %}
    

      

      
    

  {% endif %}

  
    

      

        
      

    

    {%- assign desktopColumns = section.settings.products -%}
    {%- assign mobileColumns = '1' -%}

    {%- capture gridClasses -%}
      {% if desktopColumns == '3' and totalProducts > 2 %}medium-up--one-third {% else %}medium-up--one-half {% endif %}
      {% if mobileColumns == '2' %}small--one-half {% endif %}
    {%- endcapture -%}

    
      

        {% for product in collection.products %}
          {% include 'product-card', product: product, grid_style: section.settings.grid_style %}
        {% endfor %}
      

    

    {% if collection.products.size == 0 %}
      

{{ 'collections.general.no_matches' | t }}

    {% endif %}

    {% if paginate.pages > 1 %}
      
        {% include 'pagination' %}
      

    {% endif %}
  

  {% endpaginate %}

@Teppo - please check this

product-card

i think it has the product details on your collection page, can you please give me collection page link too?

@suyash1

Here is the product-card code:


  

    {% if product.featured_media %}
      {% include 'card-image', type: product.featured_media.preview_image, grid_style: grid_style %}
    {% endif %}

    

      {% if section.settings.show_vendor %}
        
{{ product.vendor }}

      {% endif %}

      ### {{ product.title }}

      {% if product.available %}
        
          {%- assign variant = product.selected_or_first_available_variant %}
          {% if product.compare_at_price > product.price %}
            {% comment %}
              Product is on sale
            {% endcomment %}
            {% if product.price_varies %}
              {% assign sale_price = product.price | money_without_trailing_zeros %}
               {{ 'products.product.price' | t }} 
              {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
            {% else %}
              {{ 'products.product.sale_price' | t }}
              {{ product.price | money_without_trailing_zeros }}

              {{ 'products.product.regular_price' | t }}
              
                {{ product.compare_at_price | money_without_trailing_zeros }}
              
              {%- if variant.available and variant.unit_price_measurement -%}
                {% include 'product-unit-price', variant: variant %}
              {% endif %}
            {% endif %}

          {% else %}
            {% comment %}
              Not on sale, but could still have varying prices
            {% endcomment %}
            {% if product.price_varies %}
              {% assign price = product.price | money_without_trailing_zeros %}
              {{ 'products.product.from_text_html' | t: price: price }}
            {% else %}
              {{ product.price | money_without_trailing_zeros }}
              {%- if variant.available and variant.unit_price_measurement -%}
                {% include 'product-unit-price', variant: variant %}
              {% endif %}
            {% endif %}
          {% endif %}
        

      {% else %}
        
          {{ 'products.product.sold_out' | t }}
        

      {% endif %}
    

    {% if product.compare_at_price > product.price %}
      {% assign sale_text_length = 'products.product.on_sale' | t | size %}
      
        {{ 'products.product.on_sale' | t }}
      
    {% endif %}
  

And link to collection page (that contains the free products) is:
https://shop.edufication.com/collections/personal-development

@Teppo - please check this screenshot, the selected line is I think in - product-unit-price , i think this theme is using multiple files and connecting them to show us collection. Please check product-unit-price too

@suyash1

Here is product-unit-price:

{%- unless available -%}
  {%- if variant.title -%}
    {%- assign available = variant.available -%}
  {%- else -%}
    {%- assign available = true -%}
  {%- endif -%}
{%- endunless -%}

  {%- capture unit_price_separator -%}
    / {{ 'general.accessibility.unit_price_separator' | t }} 
  {%- endcapture -%}

  {%- capture unit_price_base_unit -%}
    
      {%- if variant.unit_price_measurement.reference_value != 1 -%}
        {{- variant.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ variant.unit_price_measurement.reference_unit }}
    
  {%- endcapture -%}
  {{ 'products.product.unit_price' | t }}
  {{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}

@Teppo - it is not fetched from this file, I think we now need to debug by putting some random text, can you please put some random text in card info file inside card-price div tag?

anything like here, or test and save, then we check it on browser where it is appearing to find out where exactly the control flow is going, I know this is time taking, but if you want then you can add me to collaborator, I will check it

@suyash1 You can send a collaborator request.

https://edufication-online-store.myshopify.com/

I sent the request

@Teppo - please check screenshot, selected line is showing the price , so now using same logic as you did in product page , compare price with 0, if it is 0 then free else show price

@suyash1 I think I got it to work now.

@Teppo - I can see word free now… if you need anything later then you can contact me on email given below.