Hello @dly_italia
1. Use Custom JavaScript to Extract Dominant Color (Alternative Analyzer)
If you're trying to analyze the background color of an image, you can use a lightweight JS library like Color Thief or Vibrant.js.
Step-by-Step (Color Thief):
Include the Color Thief library
Add this in your theme.liquid (inside <head> or at the end of <body>):
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.2/color-thief.umd.js"></script>
Add this JavaScript to extract color
<script>
document.addEventListener("DOMContentLoaded", function() {
const colorThief = new ColorThief();
// Loop through all product images
document.querySelectorAll('.product-card img').forEach((img, index) => {
if (img.complete) {
const color = colorThief.getColor(img);
console.log(`Image ${index + 1} Dominant Color: rgb(${color.join(',')})`);
// You can now use this color as needed
} else {
img.addEventListener('load', function() {
const color = colorThief.getColor(img);
console.log(`Image ${index + 1} Dominant Color: rgb(${color.join(',')})`);
});
}
});
});
</script>
What this does:
Loops through all product images on your collection/homepage
Extracts the dominant color of each image
You can then use it for background swatches, frames, hover effects, etc.
2. Workaround for Frame Positioning Issue
If the wrong product frame is being shown, it's likely due to an incorrect DOM relationship or lazy-loading timing.
Try this to ensure the right frame is attached:
document.querySelectorAll('.product-card').forEach(card => {
const image = card.querySelector('img');
const frame = card.querySelector('.color-frame');
if (image && frame) {
image.addEventListener('load', () => {
// Reposition or correct frame here
frame.style.display = 'block';
frame.style.top = image.offsetTop + 'px';
frame.style.left = image.offsetLeft + 'px';
});
}
});
Optional App-Based Solution (No Code)
If you don’t want to custom-code, try apps like:
Pixc Background Remover (works well for white backgrounds)
TinyIMG (for image optimization + cleanup)
Or use Canva/Remove.bg for pre-processing product images
Let me know if you have any questions!
