How to add custom logos to products based on the creator/affiliate

🛠️ Step 1: Create the Logo Placement Metaobject

This defines where and how the logo should appear on your product images — per category.

Fields to include:

• X Coordinate – Where the logo starts horizontally (in pixels or %)
• Y Coordinate – Where it starts vertically
• % Width – How wide the logo appears relative to the product image
• Product Category – Which types of products this placement is intended for
  Examples: Apparel, Supplements, Drinkware, Shoes
• As-Is Toggle – Boolean to indicate if the logo should be used exactly as uploaded (e.g., no resizing)

💡 Think of this metaobject as your “logo template,” customized per product category.

‍

🖼️ Step 2: Create the Logo Metaobject

This stores the actual logo assets and defines how they should be used.

Fields to include:

• Logo Image – Upload the .PNG or .SVG
• Placement Options – Relational list to the Logo Placement metaobject
• Logo ID – Unique identifier (you’ll use this later in the cart attribute)

‍

👤 Step 3: Add a Logos List Field to the Creator Metaobject

This connects specific logos to each creator.

• Add a field to your Creator metaobject
• Field type: List of Metaobject References
• Reference type: Logo

Now, each creator can have a curated set of logos tied to their profile — enabling dynamic rendering based on the referring creator.

‍

💻 Step 4: Add Script to Your Product Page

1. Variant Selector Logic

This JavaScript auto-selects the first available logo associated with the creator the shopper is linked to:

// Replace this with your creator detection logic (e.g., via URL param or cart attribute)const creatorId = window.creatorIdFromUrl || null;let selectedLogoId = null;fetch(`/metaobjects/creator/${creatorId}.json`)  .then(res => res.json())  .then(data => {    const logos = data.creator.logos || [];    if (logos.length > 0) {      selectedLogoId = logos[0].id;      // Optionally update a dropdown or hidden field      document.querySelector("#selected-logo-id").value = selectedLogoId;    }  });

‍

2. Logo Overlay on Gallery Image

This script overlays the selected logo onto the product’s featured image using its placement config:

function applyLogoOverlay(logoImageUrl, placement) {  const gallery = document.querySelector(".product-gallery img");  if (!gallery) return;  const overlay = document.createElement("img");  overlay.src = logoImageUrl;  overlay.style.position = "absolute";  overlay.style.left = `${placement.x}%`;  overlay.style.top = `${placement.y}%`;  overlay.style.width = `${placement.width}%`;  overlay.style.pointerEvents = "none";  overlay.style.zIndex = "10";  gallery.parentElement.style.position = "relative";  gallery.parentElement.appendChild(overlay);}// Call this after selecting the logoapplyLogoOverlay(logo.image_url, logo.placement);

‍


3. Add-to-Cart Attribute Injection

Modify your product form to include a cc-logo-section cart attribute if a logo is selected:

document.querySelector("form[action='/cart/add']").addEventListener("submit", function (e) {  const selectedLogoId = document.querySelector("#selected-logo-id")?.value;  if (!selectedLogoId) return;  const input = document.createElement("input");  input.type = "hidden";  input.name = "attributes[cc-logo-section]";  input.value = selectedLogoId;  this.appendChild(input);});

‍


✅ Final Result

Now, whenever a shopper lands on a product page from a unique creator link:

• Their associated logo appears over the product image
• That logo persists through to checkout via cart.attributes
• And you’ve created a custom-branded shopping experience — all using native Shopify metaobjects + CreatorCommerce magic

‍

💬 Questions?

Hit us up at [email protected] — or ping your partner manager for help debugging metaobjects or getting scripts live.