Custom CSS and JavaScript

/* Target all text fields */
[data-sh-field-type="text"] {
  font-size: 14px !important;
}
 
/* Target a specific item */
[data-sh-item="123"] {
  border: 2px solid gold !important;
}

.sh-item {
  background-color: #f5f5f5 !important;
  border-radius: 12px !important;
}

.sh-header-title {
  color: #1a1a1a !important;
  font-size: 2rem !important;
}
 
.sh-header-subtitle {
  color: #666 !important;
}

.sh-button {
  background-color: #0066cc !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
}
 
.sh-button:hover {
  background-color: #0052a3 !important;
}

.sh-badge {
  border-radius: 20px !important;
  font-weight: 600 !important;
}

.sh-search-field {
  border-radius: 8px !important;
  border: 2px solid #ddd !important;
}
 
.sh-search-field:focus {
  border-color: #0066cc !important;
}

/* Hide the filter sidebar */
.sh-sidebar {
  display: none !important;
}
 
/* Hide field labels */
.sh-field-label {
  display: none !important;
}

// Track when an item is clicked
document.querySelectorAll('.sh-item').forEach(item => {
  item.addEventListener('click', () => {
    console.log('Item clicked:', item.dataset.shItem);
    // Send to your analytics
  });
});

// Run code when the shareable is fully loaded
window.addEventListener('shareables:loaded', () => {
  console.log('Shareable loaded successfully');
});

// Add behaviour to all buttons
document.querySelectorAll('.sh-button').forEach(button => {
  button.addEventListener('click', (e) => {
    // Your custom logic here
    console.log('Button clicked');
  });
});