Show each vendor logo on own vendor collections

Store Design
, , , , , ,

Topic summary

A Shopify store owner is trying to display vendor-specific logos on collection pages, but currently all vendor logos appear on every collection instead of just their relevant ones.

Current Issue:

  • The implemented code shows logos across all vendor collections rather than matching each logo to its corresponding collection
  • The code uses a naming convention of vendor-<vendor-handle>.png for logo files

Attempted Solution:

  • One responder suggested ensuring the image naming convention matches vendor handles exactly
  • Recommended verifying that image files are properly uploaded to Shopify files
  • Emphasized that collection titles must match the vendor handles used in filenames

Current Status:

  • The original poster attempted the suggested fix by modifying the logoUrl variable
  • However, the issue persists with the same results
  • The problem appears to be in the JavaScript logic that replaces ‘REPLACE’ with the dynamic vendorHandle variable

Technical Context:
The code includes CSS styling for logo positioning (bottom-right corner with responsive sizing) and JavaScript to dynamically insert logos into collection image containers. The discussion remains unresolved.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Dear friends,

I have the following code, it shows the logo on all other vendors collections, I am looking for your support to append each vendor logo only to revelant collections. Thank you.

URL: https://ba0ven-x1.myshopify.com/

Code:

{% comment %}
VENDOR LOGO FOR COLLECTIONS

  • Shows correct vendor logo for each collection
  • Maintains all your original styling
  • Works with vendor-handle.png naming
    {% endcomment %}
.refined-corner-logo-collection { position: absolute; bottom: 4px; right: 4px; width: 96px; background: rgba(255,255,255,0.94); border-radius: 8px 0 8px 8px; box-shadow: 0 -2px 6px rgba(0,0,0,0.12), 0 -4px 12px rgba(0,0,0,0.08); padding: 8px; z-index: 100; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: right bottom; } .refined-corner-logo-collection img { width: 100%; height: auto; display: block; border-radius: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)); transition: transform 0.35s ease; } /* Mobile responsiveness */ @media screen and (max-width: 749px) { .refined-corner-logo-collection { width: 72px; padding: 6px; } } @media screen and (max-width: 480px) { .refined-corner-logo-collection { width: 60px; padding: 4px; } } /* Hover effects */ @media (hover: hover) { .refined-corner-logo-collection:hover { transform: scale(1.06); background: rgba(255,255,255,0.98); box-shadow: 0 -3px 8px rgba(0,0,0,0.18), 0 -6px 16px rgba(0,0,0,0.12); } .refined-corner-logo-collection:hover img { transform: scale(1.04); } } /* Collection container styling */ .collection-hero__image-wrapper, .collection-banner, .collection-image__container { position: relative !important; overflow: visible !important; }
2

To show each vendor logo only on their relevant collections, make sure your image naming convention matches the vendor handle exactly. In your script, replace ‘REPLACE’ in the logoUrl with the dynamic vendorHandle correctly. Ensure the image files, like vendor-<vendor-handle>.png, are uploaded in your Shopify files so the path resolves correctly. Double-check that each collection title exactly matches the vendor handle used in the image filenames.

3

Hi,

Did so, but still getting the same results:

const logoUrl = {{ 'vendor-' | append: 'REPLACE' | append: '.png' | file_url }}.replace(‘vendorHandle’, vendorHandle);

Thank you