This guide will help you add custom CSS to the Oxify Cart Drawer on your store. Follow the steps below: In addition to custom CSS, the Oxify App also offers built-in cart customization features, such as full-screen blur effects, adjustable cart drawer width, and logo headers for branding. These features provide a comprehensive way to tailor your cart's appearance and functionality.
Steps to Add Custom CSS: Built-in Cart Customization Features:
Full-screen blur effect when the cart is opened.
Custom cart drawer width to adjust the layout.
Logo header on the cart for branding purposes.
Log in to your Shopify Admin Panel
Navigate to your store's admin dashboard.
Access the Oxify Cart Drawer App
Go to Apps in the left-hand menu.
Locate and open the Oxify Cart Drawer app.
Open the Cart Editor
Inside the Oxify Cart Drawer app, find and click on the Cart Editor option.
Enable the Custom HTML & CSS Feature
In the left-hand side panel, locate the option labeled Custom HTML & CSS.
Click on it to open the settings.
Toggle the feature ON to enable customization.
Add Your Custom CSS
Once the feature is enabled, a text box labeled Custom CSS will appear.
Input your desired CSS code into this box.
Save Your Changes
After adding your custom CSS, click the Save button to apply the changes to your cart drawer.
Sample Code
`.ia-rewards-banner-progress-wrapper {
border-color: #4a6274;
border-width: 1px;
border-style: solid;
}`Additional Notes: Adding custom CSS allows you to implement unique styling and align the cart's appearance with your brand identity, offering advanced customization options beyond the default settings.
Ensure the CSS code is properly formatted to avoid errors.
Refresh your storefront to verify that the customizations are applied successfully.
If you encounter any issues, contact our support team for assistance.
This guide should help you customize the Oxify Cart Drawer to match your store's design seamlessly, whether through built-in features or advanced custom CSS options.