Skip to main content

How to Add Custom CSS/JS

Where can I add custom CSS and JavaScript code?​

You can add custom CSS and JavaScript code directly in the XB Wishlist app settings. This allows you to customize the appearance and behavior of wishlist elements without modifying your theme files.

Step-by-Step Instructions​

Step 1: Access the Custom Code Section​

  1. Go to your Shopify admin dashboard
  2. Navigate to Apps → XB Wishlist
  3. Click on Preferences in the left sidebar
  4. Select Custom code from the settings menu

Step 2: Add Custom CSS​

  1. Click on the Custom css tab
  2. Enter your CSS code in the editor
  3. Use CSS selectors to target wishlist elements
  4. Click Save to apply your changes

Step 3: Add Custom JavaScript​

  1. Click on the Custom javascript tab
  2. Enter your JavaScript code in the editor
  3. Use JavaScript to add interactive functionality
  4. Click Save to apply your changes
Custom CSS/JS Settings

Best Practices​

CSS Best Practices​

  • Use specific selectors to avoid conflicts with theme styles
  • Test your styles on different devices and browsers
  • Use CSS variables for consistent theming
  • Keep your CSS organized with comments

JavaScript Best Practices​

  • Always check if elements exist before manipulating them
  • Use event delegation for dynamic content
  • Avoid conflicts with existing JavaScript
  • Test your code thoroughly before deploying

Performance Considerations​

  • Minimize CSS and JavaScript code
  • Use efficient selectors
  • Avoid inline styles when possible
  • Consider the impact on page load speed

Troubleshooting​

Common Issues​

  1. Styles not applying: Check CSS specificity and selectors
  2. JavaScript errors: Use browser console to debug
  3. Conflicts with theme: Use more specific selectors
  4. Code not saving: Ensure you click the Save button

Debugging Tips​

  • Use browser developer tools to inspect elements
  • Check the console for JavaScript errors
  • Test in incognito mode to avoid cache issues
  • Validate your CSS and JavaScript syntax

Important Notes​

  • Custom code is applied globally to all wishlist elements
  • Changes take effect immediately after saving
  • Always backup your code before making major changes
  • Test thoroughly on different devices and browsers
  • Consider the impact on your site's performance