How can I correctly fetch and update a logo file name in the header.liquid file?

Technical Q&A
,
1

In header.liquid file, I’m trying to update “src=” value to the one that I will pass with an API call on specific days. At the moment, I’m just testing it by hardcoding a logo file name. My comments at the top of the code will help you understand my broad requirement. But I’m seeking help with only fetching the file name "

logo_l_170_7fa7b6c1-ceee-46f4-a228-70876fb68fec.jpg**"** correctly and updating src at this line
src=“{{ sourceLogoFile | file_img_url: ‘medium’ | img_tag: ‘PMM Logo’ }}” Currently, I only see this "

" width=“180” alt=“Reflect Perfection”> on the site. Here is the link to the development theme - https://8p6isrqx8kjp6x96-4826759279.shopifypreview.com

I believe the issue is somewhere at this line

src=“{{ sourceLogoFile | file_img_url: ‘medium’ | img_tag: ‘PMM Logo’ }}” The way I am fetching the file image url is wrong. Please help me.

{% comment %}
      Automation of logo updating follows the steps below.
      1. A Cronjob on POMS/PMM server runs once a day.
      2. An API call is made to Shopify to pass logo tag and logo event date info.
      3. The passed data is stored in shop level metafields generated by the API.
      4. Fields are a. shop.metafields.pmm.logo_tag b. shop.metafields.pmm.logo_date_info
      5. Get full logo file name from Shopify file section based on the logo_tag meta field content.
      6. Concatenate logo to logo_tag
    {% endcomment %}
    {% assign sourceLogoFile = 'logo_l_170_7fa7b6c1-ceee-46f4-a228-70876fb68fec.jpg' %}
    {%- if shop.metafields.pmm.logo_tag != "normal" -%}
      {% assign sourceLogoTagUppercase = shop.metafields.pmm.logo_tag | upcase %}
      {%- assign sourceLogoFile = 'logo' | append: sourceLogoTagUppercase | append: '.png' -%}
      {%- assign eventDate = '' -%}
      {%- if shop.metafields.pmm.logo_date_info != "normal" -%}
        {%- assign eventDate = shop.metafields.pmm.logo_date_info -%}
      {%- endif -%}
    {%- endif -%}
    {%- capture header_logo -%}
      
        {%- if section.settings.logo != blank -%}
          {%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}

          
               

Logo Image file: {{ section.settings.logo }}

          {%- if use_transparent_header and section.settings.transparent_logo != blank -%}
            
          {%- endif -%}
        {%- else -%}
          {{ shop.name }}
        {%- endif -%}
      
    {%- endcapture -%}
1 Like
2

Hello @pramodraam

It seems that the code you provided is not generating the correct image URL for the logo. To fix the issue, you can modify the code as follows:

{%- assign sourceLogoFileUrl = 'https://cdn.shopify.com/s/files/1/...' | append: sourceLogoFile %}

{%- capture header_logo -%}

{%- if section.settings.logo != blank -%}
{%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}

Logo Image file: {{ section.settings.logo }}

{%- if use_transparent_header and section.settings.transparent_logo != blank -%}

{%- endif -%}
{%- else -%}
{{ shop.name }}
{%- endif -%}

{%- endcapture -%}

In this code, a new variable sourceLogoFileUrl is introduced, which is a concatenation of the base image URL (e.g., https://cdn.shopify.com/s/files/1/…) and the sourceLogoFile variable. Make sure to replace ‘https://cdn.shopify.com/s/files/1/…’ with the correct base image URL for your Shopify store.

By updating the code in this way, the src attribute of the tag should use the correct image URL for the logo.