Website add to cart button

Shopify Discussion
1

instead of ‘Add to Cart’, if we want to have a toggle to ‘Send Lead’ for each product, is that possible?

2

Hey @Alvizia ,

Hope you’re doing fantastic :grinning_face_with_smiling_eyes:

I’ve prepared a comprehensive solution for replacing your Shopify store’s “Add to Cart” buttons with “Send Lead” toggles. This will transform your store into a lead generation platform while maintaining a professional shopping experience.

Solution

The implementation involves three main components:

1. Frontend Toggle Button (Liquid Template)

Replace your existing “Add to Cart” button in your product templates with this code:

<div class="lead-toggle-container">
  <button 
    class="lead-toggle-btn" 
    data-product-id="{{ product.id }}"
    data-product-title="{{ product.title }}"
    data-product-price="{{ product.price | money }}"
    data-product-url="{{ product.url }}"
  >
    <span class="toggle-text">Send Lead</span>
    <span class="toggle-icon">?</span>
  </button>
  <div class="lead-status" id="lead-status-{{ product.id }}"></div>
</div>

### 2. CSS Styling

Add this CSS to your theme’s stylesheet:

.lead-toggle-container {
  margin: 20px 0;
}

.lead-toggle-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

.lead-toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.lead-toggle-btn.active {
  background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
}

.lead-status {
  margin-top: 10px;
  padding: 8px;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
}

.lead-status.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

### 3. JavaScript Functionality

Add this JavaScript to handle the toggle functionality:

document.addEventListener('DOMContentLoaded', function() {
  const leadButtons = document.querySelectorAll('.lead-toggle-btn');
  
  leadButtons.forEach(button => {
    button.addEventListener('click', function() {
      const productId = this.dataset.productId;
      const productTitle = this.dataset.productTitle;
      const productPrice = this.dataset.productPrice;
      const productUrl = this.dataset.productUrl;
      
      // Toggle active state
      this.classList.toggle('active');
      
      if (this.classList.contains('active')) {
        // Send lead
        sendLead({
          productId: productId,
          productTitle: productTitle,
          productPrice: productPrice,
          productUrl: productUrl,
          customerEmail: getCustomerEmail(), // You'll need to implement this
          timestamp: new Date().toISOString()
        });
        
        this.querySelector('.toggle-text').textContent = 'Lead Sent!';
        showLeadStatus(productId, 'Lead sent successfully!', 'success');
      } else {
        // Remove lead
        removeLead(productId);
        this.querySelector('.toggle-text').textContent = 'Send Lead';
        showLeadStatus(productId, '', '');
      }
    });
  });
});

function sendLead(leadData) {
  fetch('/apps/lead-tracker/leads', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Shop-Domain': Shopify.shop
    },
    body: JSON.stringify(leadData)
  })
  .then(response => response.json())
  .then(data => {
    console.log('Lead sent:', data);
    // Store in localStorage for persistence
    localStorage.setItem(`lead_${leadData.productId}`, JSON.stringify(leadData));
  })
  .catch(error => {
    console.error('Error sending lead:', error);
  });
}

function removeLead(productId) {
  fetch(`/apps/lead-tracker/leads/${productId}`, {
    method: 'DELETE',
    headers: {
      'X-Shopify-Shop-Domain': Shopify.shop
    }
  })
  .then(() => {
    localStorage.removeItem(`lead_${productId}`);
  })
  .catch(error => {
    console.error('Error removing lead:', error);
  });
}

function showLeadStatus(productId, message, type) {
  const statusElement = document.getElementById(`lead-status-${productId}`);
  statusElement.textContent = message;
  statusElement.className = `lead-status ${type}`;
}

function getCustomerEmail() {
  // If customer is logged in, return their email
  if (window.ShopifyAnalytics && window.ShopifyAnalytics.meta.page.customerId) {
    return window.ShopifyAnalytics.meta.page.customerEmail;
  }
  
  // Otherwise, prompt for email or use a form
  return prompt('Please enter your email to send lead:');
}

## Implementation Steps### Phase 1: Basic Setup1. Backup your theme before making any changes

  1. Edit your product template (sections/product.liquid or templates/product.liquid)
  2. Replace the add-to-cart form with the lead toggle code
  3. Add the CSS to your theme’s main stylesheet
  4. Test the visual appearance on different devices

Phase 2: Functionality1. Add the JavaScript to your theme’s main JS file

  1. Set up lead storage (localStorage for basic version)
  2. Implement email collection for non-logged-in users
  3. Test toggle functionality across different browsers

Phase 3: Data Management1. Create a lead management system (Shopify app or custom solution)

  1. Set up email notifications when leads are submitted
  2. Create a dashboard to view and manage leads
  3. Implement lead export functionality

## Advanced Features (Optional)### Lead Scoring

Add priority levels to leads based on product value or customer behavior:

function calculateLeadScore(product, customer) {
  let score = 0;
  if (product.price > 100) score += 20;
  if (customer.returning) score += 15;
  if (customer.emailEngagement > 0.5) score += 10;
  return score;
}

Email Integration

Connect with your email marketing platform (Klaviyo, Mailchimp, etc.):

function addToEmailList(leadData) {
  // Klaviyo example
  fetch('https://a.klaviyo.com/api/v2/list/LIST_ID/subscribe', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      email: leadData.customerEmail,
      properties: {
        interested_product: leadData.productTitle,
        price_point: leadData.productPrice
      }
    })
  });
}

The solution is scalable and can be enhanced with additional features like lead scoring, automated follow-ups, and integration with your existing marketing tools.

Let me know if you’d like me to explain any part of the implementation or if you need help with the setup process.

Best regards,

Shubham | Untechnickle