How to display vendor logo instead of text on Dawn template?

[craggs1978]

Hi, 

Could someone provide some code for template:Dawn so I can show the Vendor Logo instead of text

thank you!

[amorlett]

it's going to require some custom Json, or javascript  https://shopify.dev/api/admin-rest/2021-10/resources/product#[post]/admin/api/2021-10/products.json

[craggs1978]

Thats a little over my head!

[amorlett]

you will need to hire a Dev who knows json, or ruby 

[PaulNewton]

If your a merchant that needs this coded to specific business logic or integration with your theme styles then hire a professional.

Merchants may contact me with use-case details for an estimate paull.newton+shopifyforums@gmail.com 

The main catch with this theme customization is it needs scheme to relate specific images to specific vendors names.

For just a custom-liquid section|block,

If you have a set of collections that represent specific vendors and each collection has it's main image as the vendors logo(or a metafield definition filetype of image)  >> then create a linklist(aka menu) titled "vendors", and loop through that linklists menu entries to get each image. Alternatively setup the menu to point to the image files urls in the files admin. The point with this approach is so that vendor information is decoupled from theme code so as much info as possible is at the admin level.

Something like the following to get the raw info outputted

{% for link in linklists.vendors.links %}
    {% if link.type == "collection_link" %}
        <a href="{{ link.url }}">
            <span class="link__text">{{ link.title }}</span>
            <img src="{{link.object.image.url | image_url: width: 128 }}">
        </a>
    {% endif %}
{% endfor %}

Otherwise make a complete section like the following example section file , modify to have text settings if you need labels.

https://shopify.github.io/liquid-code-examples/example/logo-list 

Optionally mix with https://shopify.github.io/liquid-code-examples/example/vendor-link-list  for generating vendor context collection urls

[craggs1978]

I've got this but its not displaying the image

{% if product.vendor == 'Dermalogica' %}
<a href="https://www.heaventherapy.co.uk/dermalogica?utm=HTSkincare">
<img src="{{'https://cdn.shopify.com/s/files/1/0564/7361/6544/files/dermalogica.png?v=1648249973' | asset_img_url: 'small'}}">
</a>
{% elsif product.vendor == 'Dermalogica' %}
<a href="/">
<img src="{{ 'https://cdn.shopify.com/s/files/1/0564/7361/6544/files/dermalogica.png?v=1648249973' | asset_img_url: 'small' }}">
</a>
{% elsif product.vendor == 'Dermalogica' %}
<a href="/">
<img src="{{ 'https://cdn.shopify.com/s/files/1/0564/7361/6544/files/dermalogica.png?v=1648249973' | asset_img_url: 'small' }}">
</a>
{% endif %}

Where am I going wrong?

[amorlett]

try same thing but with lower case and also put your images in the assets folder you might want to try some random thing like <h1> working </h1> see if it shows up

{% if product.vendor == 'dermalogica' %}
<a href="/dermalogica?utm=HTSkincare">
<img src="{{'dermalogica.png' | asset_img_url: 'small'}}">
</a>
{% else%}
<h5> no logo</h5>
{% endif %}

[craggs1978]

thanks for your help, but unfortunately it didn't work

I've tried all lowercase and I've tried multiple things for the img src including the long URL and the shortened as you proposed?

Any other options?

[amorlett]

are you seeing the h5 in my example it should at least say no logo if not then your code is in the wrong section in the code

[craggs1978]

Yes I'm seeing the h5 text no logo on the product page

[craggs1978]

As in Logo still not showing

[craggs1978]

I'm currently using this which works really well

{% if product.vendor == 'Dermalogica' %}
<a href="https://www.dermalogica.co.uk/?rfsn=4898028.08a68b8" >
<img src="https://cdn.shopify.com/s/files/1/0564/7361/6544/files/dermalogica.png" width="300" height="43"></a>
{% else %}
<h5></h5>
{% endif %}

How do I add another Vendor to the code?

[rviparmar18]

Hello @craggs1978 ,

You can upload vendor images in files with vendor_name.png or vendor_name.jpg in lowercase.
For instance, if the vendor name is "The Tiny Trove," then the image name should be 'the-tiny-trove.png' or 'the-tiny-trove.jpg'.
Add the following code where you want to display the vendor image.

{{ product.vendor | handle | append:".png" }} OR {{ product.vendor | handle | append:".jpg" }}