Shopify Theme Demo Mismatch? Fix Styling with Custom CSS

Hey store owners!

Ever bought a beautiful Shopify theme, installed it, and then thought, “Wait, why doesn’t it look like the demo?” You’re not alone. It’s a super common frustration, and it’s exactly what one of our community members, @pluitaj, recently wrestled with regarding their “Graceful” theme.

Pluitaj had purchased the “Graceful” theme, but the “Hover Cards” section on their homepage just wasn’t matching the stunning demo. Specifically, the image sizing and the hover effects were off, despite trying different image dimensions. This kind of issue can feel like a real roadblock when you’re trying to launch a polished store, but thankfully, the community stepped in with some brilliant detective work and actionable solutions.

Here’s a look at pluitaj’s initial design compared to the desired demo look, and their theme editor screen, which clearly shows the struggle with image sizing:

Pluitaj’s current design

The Graceful theme demo

Pluitaj’s theme editor screen

The Big Reveal: Theme Version Differences

The core of pluitaj’s problem, as expert community member @v.marychenka astutely discovered, was a mismatch in theme versions. Pluitaj’s store was running Soft 1.1.3, while the demo was still on 1.0.0. This might seem minor, but theme developers often tweak CSS rules between versions, leading to subtle – or not-so-subtle – visual discrepancies.

In this case, the demo’s card images could reach a height of 70rem, while pluitaj’s version was capped at 40rem. This explained why uploading different image sizes wasn’t making a difference; the theme’s code was dictating the maximum display height, regardless of the original image dimensions.

First Steps: What to Check Before Diving into Code

Before we jump into the CSS magic, there are a few foundational checks that the community highlighted. These are great general practices whenever your theme isn’t matching the demo:

Demo Content vs. Fresh Install: As @Moeed pointed out, fresh theme installs rarely come with the demo content pre-loaded. Always check your theme’s documentation for a “demo import” or “preset import” option. This can often set up much of the demo layout for you automatically.
Section & Block Configuration: @v.marychenka noticed that pluitaj only had one card in their section, while the demo had three. Make sure you’ve duplicated blocks within your sections to match the demo’s structure. Also, ensure all interactive elements, like buttons, have their links properly set. Here’s what the “Card” blocks look like in the editor:
Image Types & Dimensions (Initial Consideration): While CSS was the ultimate fix here, it’s always good to start with images that are close to what the demo uses. @v.marychenka noted the demo used “portrait PNG cutouts, 452 to 478 px wide and 776 to 790 px tall, on a radial gradient.” Using similar imagery can help, even if the CSS ultimately controls the display.

The Solution: Mastering Custom CSS for Demo-Perfect Styling

When theme settings don’t offer the control you need, and a theme version rollback isn’t practical (Shopify doesn’t typically offer older versions, and contacting developers can be slow, as pluitaj experienced), custom CSS is your best friend. It allows you to override the theme’s default styling and make it truly your own.

How to Add Custom CSS to Your Shopify Theme

Before making any code changes, always, always duplicate your theme! Go to Online Store > Themes, find your current theme, click Actions > Duplicate. This creates a safe backup.

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit (or your duplicated theme), and click Customize.
Navigate to the specific section you want to modify – in pluitaj’s case, the “Hover Cards” section.
In the section’s settings sidebar, scroll down to find the “Custom CSS” or “Custom Liquid” box. This is where you’ll paste your code.

The CSS Code to Replicate the Graceful Theme Demo

@v.marychenka provided fantastic, precise CSS to bring pluitaj’s “Hover Cards” section in line with the demo. This code addresses both the image height and the dynamic card width/hover effects. Here’s the code that ultimately resolved the issue, including adjustments for sizing and hover behavior:

@media (min-width: 1201px) {
  .card-gradient-enabled .content-top .card-card-image { bottom: 0; left: 0; }
  .card-gradient-enabled .content-top .card-card-image img { max-height: 70rem; max-width: 100%; }
  .fade-section .card-card.card-gradient-enabled { width: 29vw; }
  .fade-section .card-card.card-gradient-enabled:hover { width: 52vw; }
}
@media (min-width: 1400px) {
  .card-gradient-enabled .content-top .card-card-image { min-width: 48rem; max-width: 48rem; left: 15%; }
}

Initially, a simpler CSS snippet was suggested by @shopplaza_team to address image height, which looked like this:

.card-card-image img {
    max-height: 60rem;
}

This provided an improvement, as seen in their screenshot:

However, to fully match the demo’s intricate hover effects and precise image positioning, the more comprehensive code from @v.marychenka was necessary. Pluitaj even noted issues with the initial CSS, where “it doesn’t reach the bottom, and hovering over the 2nd and 3rd cards looks strange”:

This demonstrates why sometimes a “quick fix” isn’t enough, and a more comprehensive CSS approach is needed to achieve perfection.

What does this comprehensive code do?

The first @media (min-width: 1201px) block targets larger screens (desktops):

.card-card-image img { max-height: 70rem; max-width: 100%; }: This is the key to fixing the image height, allowing them to stretch taller, matching the demo.
.fade-section .card-card.card-gradient-enabled { width: 29vw; }: Sets the default width of the cards to 29% of the viewport width.
.fade-section .card-card.card-gradient-enabled:hover { width: 52vw; }: Creates that dynamic hover effect where the card expands to 52% of the viewport width.

The second @media (min-width: 1400px) block further refines styling for even larger screens:

.card-gradient-enabled .content-top .card-card-image { min-width: 48rem; max-width: 48rem; left: 15%; }: Adjusts the image container’s width and position for extra-large displays.

Pluitaj had shared their store URL and password publicly during the discussion. While it’s great for getting quick help, it’s a good security practice to avoid sharing your store’s password in public forums. If you need to grant access, use Shopify’s staff account feature or temporarily disable your storefront password after getting help. Remember, when you’re building out your store, whether you’re just starting a Shopify store or scaling an existing one, security should always be top of mind.

Beyond the Code: Community & Support

This discussion really highlights the power of the Shopify community. While Shopify Support is fantastic for platform-related issues, they typically won’t troubleshoot custom code snippets from forums. That’s where fellow merchants and experienced developers in the community truly shine, offering specific, code-level solutions that can transform your store.

So, if your newly purchased theme isn’t quite living up to its demo, take a deep breath! Check for theme version differences, verify your section configurations, and don’t be afraid to experiment with custom CSS. With a little digging and the right code, you can achieve that pixel-perfect look you fell in love with.

Bought a Shopify Theme? Here's Why Your Store Might Not Match the Demo (and How to Fix It!)