Blog

Add color/variant name after product title in Shopify horizon theme.

Add color/variant name after product title in Shopify horizon theme. Follow below steps along with video to implement this feature properly.

Find {{ product.title }} and replace it with below code:

    {{ product.title }} 
<span class="product-color-name" id="product-color-name-{{ section.id }}">
    {%- if product.selected_or_first_available_variant.options.size > 0 -%}
    - {{ product.selected_or_first_available_variant.title }}
    {%- endif -%}
</span>

    Add below css at the top:

    .product-color-name {
    color: #666;
    font-weight: normal;
    font-size: 0.9em;
    margin-left: 5px;
    display: none; /* Hidden by default, shown when color exists */
}

.product-color-name:not(:empty) {
    display: inline;
}

    Go to smi-product-detail-1-14.liquid and paste below js code before schema

    <script>
// Simple color name handler - add this to your theme
(function() {
    "use strict";
    
    let colorDisplay = null;
    let currentColor = '';
    
    function updateColorName(variant) {
        if (!colorDisplay) {
            colorDisplay = document.querySelector('.product-color-name');
            if (!colorDisplay) return;
        }
        
        // Get the color name from the variant
        // Option2 is typically the color variant
        let colorName = '';
        if (variant && variant.option2) {
            colorName = variant.option2;
        }
        
        if (colorName && colorName.trim() !== '') {
            currentColor = colorName.trim();
            colorDisplay.textContent = ` - ${currentColor}`;
            colorDisplay.style.display = 'inline';
        } else {
            colorDisplay.textContent = '';
            colorDisplay.style.display = 'none';
        }
    }
    
    // Listen for variant changes
    document.addEventListener('variant:change', function(e) {
        const variant = e.detail?.variant;
        if (variant) {
            updateColorName(variant);
        }
    });
    
    // Also handle initial load
    document.addEventListener('DOMContentLoaded', function() {
        // Check if color display exists
        colorDisplay = document.querySelector('.product-color-name');
        if (!colorDisplay) return;
        
        // Find initial variant
        const variantIdInput = document.querySelector('.product-variant-id');
        if (variantIdInput && variantIdInput.value) {
            const productData = document.querySelector('[data-product]');
            if (productData) {
                try {
                    const data = JSON.parse(productData.textContent);
                    const variant = data.variants.find(v => v.id == variantIdInput.value);
                    if (variant) {
                        updateColorName(variant);
                    }
                } catch(e) {}
            }
        }
    });
})();
</script>