Ever installed an app on your Shopify store, only to find it sticks out like a sore thumb because it doesn’t match your carefully crafted theme?

We get it. Your store’s design is part of your brand identity, and every element should feel cohesive and intentional.

Here’s the good news: My Product Cares is designed with flexibility in mind. Our app seamlessly adapts to your store’s existing theme—but sometimes you might want to add your own personal touch.

Why My Product Cares Plays Nice with Every Theme

Built for Universal Compatibility

Unlike apps that impose their own rigid styling, My Product Cares uses minimal, lightweight CSS that’s designed to inherit your store’s existing theme styles. This means:

• Button styles automatically match your theme’s button design
• Typography follows your store’s font choices
• Colors adapt to your theme’s color scheme
• Spacing and layout respect your theme’s visual rhythm

This inheritance-based approach ensures that product registration forms, warranty claim pages, and customer dashboards feel like natural extensions of your store rather than foreign elements.

When “Almost Perfect” Needs a Tweak

Most of the time, this automatic styling works beautifully. But every Shopify theme is unique, and occasionally you might notice small inconsistencies:

• A button color that’s slightly off-brand
• Text alignment that doesn’t quite match your theme
• Spacing that feels a bit too tight or loose
• Form elements that could use a subtle style adjustment

These aren’t bugs—they’re just the reality of working with hundreds of different themes, each with their own design philosophy.

Your Custom CSS Toolkit

Simple Fixes You Can Handle

For straightforward styling adjustments, My Product Cares includes a Custom CSS section in your app settings (App Settings > General > Custom CSS) where you can add your own styles.

Here are some common tweaks you can make:

Make the fields left align

#mpr-product-inputs .form-group {
  text-align: left !important;
}
#mpr-product-inputs .mpr-input-tickbox .mpr-input-label, #mpr-product-inputs .form-group .mpr-input-label span.mpr-label-content {
  justify-content: left !important;
}
#mpr-product-inputs .form-group textarea, #mpr-product-inputs .form-group select, #mpr-product-inputs .form-group input {
  text-align: left !important;
}
#mpr-product-inputs .form-group,
#mpr-product-inputs .form-group input::placeholder {
 text-align: left !important;
}

Button color

#mpr-root .button.btn.btn-primary {
  background: #fb5d44;
  color: white;
  border: 1px solid #fb5d44;
}

Make the data picker bigger

.react-datepicker__month-container {
  width: 320px;
 font-size: 1.4rem;
}
.react-datepicker__month {
  margin: 0 auto;
}
.react-datepicker__header  .react-datepicker__day-name {
  width: 4rem !important;
}
.react-datepicker__month .react-datepicker__day {
  width: 4rem !important;
  height: 4rem !important;
  line-height: 4rem !important;
}

Make the yellow loading background grey

.ReactModalPortal .mpr-modal-overlay {
  background-color: grey;
}
.mpr-modal .mpr-modal-overlay {
 background-color: white;
}
.mpr-modal {
 margin-top: 300px;
}

The Power of Small Changes

You’d be surprised how much difference these small adjustments can make. A simple color change or font tweak can transform the app from “pretty good” to “perfectly integrated with my brand.”

The best part? These changes only affect the My Product Cares elements, so you won’t accidentally break your theme’s styling elsewhere.

When You Need the Professionals

Complex Design Challenges

Sometimes your vision goes beyond simple CSS tweaks. Maybe you want to:

• Completely redesign the registration form layout
• Create custom animations or interactions
• Implement advanced responsive design adjustments
• Match a highly customized theme with unique design elements
• Integrate with complex theme frameworks

For these more sophisticated customizations, we offer premium design services where our team works directly with you to create a perfectly integrated experience.

What Our Premium Service Includes

• Theme Analysis: We study your specific theme to understand its design patterns
• Custom Design: Create styles that don’t just match your theme—they enhance it
• Cross-Device Testing: Ensure perfect appearance on desktop, tablet, and mobile
• Future-Proof Coding: Styles that won’t break when you update your theme
• Ongoing Support: Help with adjustments as your brand evolves

Getting Started with Customization

DIY Approach

1. Navigate to App Settings > General > Custom CSS
2. Add your custom styles using the examples above as a starting point
3. Test changes on different devices and browsers
4. Make incremental adjustments until you achieve the perfect look

Professional Approach

If you need comprehensive design work, reach out to our team. We’ll schedule a consultation to understand your vision and provide a custom solution that makes My Product Cares feel like it was built specifically for your store.

The Bottom Line

Your brand consistency shouldn’t stop at your theme. With My Product Cares’ flexible styling system, you can ensure that every customer touchpoint—from product registration to warranty claims—feels authentically yours.

Whether you’re comfortable with a few lines of CSS or need a complete custom design solution, we’ve got you covered.

Ready to make some styling magic happen? Head to your App Settings and start experimenting with Custom CSS, or contact our team for premium design services.

Remember: Great design isn’t about perfection—it’s about creating an experience that feels right for your customers and your brand.