Shopify Custom Liquid Component: Customizable "Buy It Now" Button Text for Specific Products

Overview

This custom liquid component enables Shopify store owners to dynamically modify the "Buy It Now" button text for specific products. By utilizing the MutationObserver API, the button's text updates only for the specified product(s). Perfect for creating tailored shopping experiences, such as promotional campaigns or unique call-to-action buttons.

Key Features

1. 🛒 Product-Specific Button Customization: Update the "Buy It Now" button text for specific product IDs without affecting other products.

2. 🎨 Dynamic DOM Monitoring: Leverages MutationObserver for efficient and performance-friendly DOM updates.

3. 🚀 SEO-Friendly Content Customization: Enhance conversions by using compelling call-to-action phrases tailored to your product offerings.

4. 🔧 Simple Integration: Edit Theme Code , find the section/main-product.liquid , using a customer liquid block.

How to Install the Component

Step 1: Add a Customer Liquid Block

1. Go to Shopify Admin > Online Store > Themes.

2. Select Edit Code for your current theme.

3. Under Sections, find the section called main-product.liquid.

Step 2: Paste the Code

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const productId = {{ product.id }};
        const targetProductId = {{ product_id | default: 'your-product-id' }}; // Set your target product ID dynamically
        const buttonText = "your-button-text"; // Set the desired button text

        if (productId == targetProductId) { 
            const observer = new MutationObserver(function(mutationsList, observer) {
                const paymentButton = document.querySelector('.shopify-payment-button__button');
                if (paymentButton) {
                    paymentButton.textContent = buttonText; // Update button text
                    observer.disconnect(); // Stop observing changes
                }
            });

            // Start observing the body for changes
            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        }
    });
</script>

Parameter Descriptions

Preview Your Changes

1. Save your changes and visit the product page for the specified product_id.

2. Verify that the "Buy It Now" button text has updated to your custom value.

Example Use Cases

• 🛍️ Highlight preorders: Replace "Buy It Now" with "Preorder Now."

• 🎉 Announce discounts: Update to "Claim Your Deal."

• 📦 Promote reservations: Use "Reserve Your Spot" for limited-stock items.

Conclusion

This custom liquid component is an excellent tool for Shopify merchants to deliver a personalized shopping experience. Use it to dynamically adjust button text based on product ID, ensuring your store stays engaging and relevant.

💌 Need help? Reach out to us at tentech.ai.2023@gmail.com for assistance.