Caddy allows you to add custom CSS to customize the look and feel of its components (e.g., upsell widgets, recommendation blocks). This flexibility ensures your store design aligns with your branding.
Steps to Add Custom CSS
1. Log into Your WordPress Admin Panel
- Navigate to your WordPress site where Caddy is installed.
- Use your administrator credentials to log in.
2. Access the Caddy Settings
- On the left-hand menu, locate and click on Caddy.
- Select the Settings tab within the Caddy plugin dashboard.
3. Find the “Styles” Tab
- Click the the Styles tab.
- Find the Custom CSS field.
- This field is specifically designated for adding your CSS code.
4. Add Your CSS Code
- Write or paste your custom CSS directly into the field.
- Ensure your CSS selectors target the specific Caddy components you want to style. You can inspect elements on your site using browser developer tools to find the correct classes or IDs.
5. Save Your Changes
- After adding your CSS, scroll to the bottom of the settings page and click Save Changes.
6. Verify Your Customizations
- Visit your store’s front end and refresh the page to see the changes.
- Test various components to ensure the CSS behaves as intended.
Best Practices
- Use Specific Selectors: Target specific Caddy components to avoid unintended style overrides.
- Test Responsiveness: Check your CSS on different devices (desktop, tablet, and mobile) to ensure consistent appearance.
- Backup CSS: Keep a copy of your custom CSS in case of updates or accidental overwrites.
Troubleshooting
Custom CSS Not Applying?
- Clear your browser cache.
- Ensure no other CSS is overriding your custom styles. Use the browser’s developer tools to debug.
Need More Help?
Reach out to our support team for assistance with advanced customization.