Skip to main content

CSS Styling

Customize Share Cart appearance with CSS.

Adding Custom CSS​

  1. Go to Online Store > Themes
  2. Click Actions > Edit code
  3. Open assets/theme.css or assets/custom.css
  4. Add your styles

Button Styling​

Basic Button​

.share-cart-button {
  background: #007bff;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  border: none;
  font-weight: 600;
}

.share-cart-button:hover {
  background: #0056b3;
}

Outline Button​

.share-cart-button {
  background: transparent;
  color: #007bff;
  border: 2px solid #007bff;
  padding: 10px 22px;
}

Full Width Mobile​

@media (max-width: 768px) {
  .share-cart-button {
    width: 100%;
  }
}

Dialog Styling​

Custom Dialog​

.share-cart-dialog {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  padding: 24px;
}

.share-cart-dialog-title {
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

Social Buttons​

.share-cart-social-button {
  padding: 10px 20px;
  border-radius: 6px;
  margin: 5px;
}

.share-cart-whatsapp {
  background: #25D366;
  color: white;
}

.share-cart-facebook {
  background: #1877F2;
  color: white;
}

Available CSS Classes​

  • .share-cart-button - Main share button
  • .share-cart-dialog - Dialog container
  • .share-cart-dialog-title - Dialog title
  • .share-cart-dialog-overlay - Dark overlay behind dialog
  • .share-cart-social-button - Social media buttons
  • .share-cart-link - Generated link display
  • .share-cart-copy-button - Copy link button

Important Notes​

  • Always test on mobile and desktop
  • Ensure good color contrast for accessibility
  • Clear cache after CSS changes