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

craggs1978
New Member
8 0 0

Hi, 

 

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

thank you!

Replies 12 (12)

amorlett
Shopify Partner
186 12 31
craggs1978
New Member
8 0 0

Thats a little over my head!

amorlett
Shopify Partner
186 12 31

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

PaulNewton
Shopify Partner
6339 579 1345

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

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


craggs1978
New Member
8 0 0

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
Shopify Partner
186 12 31

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
New Member
8 0 0

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
Shopify Partner
186 12 31

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
New Member
8 0 0

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

craggs1978
New Member
8 0 0

As in Logo still not showing

craggs1978
New Member
8 0 0

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
Shopify Partner
24 0 9

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" }}

 

 

 

 
Ravi Parmar