How can you fix the appearance of the product card in the preview customizer when it's using HTML, CSS, and JavaScript from the Refresh theme?
If you haven't read the article "How do you extract the product card JavaScript from the theme you're using?", please click the link. This article is a continuation of that one.
This tutorial is complete, but the layout in the customizer still appears messy
Here’s an example of the appearance:
We'll assist you in resolving this issue so the display matches the product card design from your theme.
This problem occurs because certain CSS styles are missing from the custom code in the preview customizer.
The solution to obtaining the code is by extracting the CSS code located within the <style data-shopify> tag inside the <head> section.
before
after
Below is the result after adding the necessary CSS to the custom code section of the preview customizer.
before:
after:
Here’s a sample of the CSS code:
@font-face {
font-family: Questrial;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("//store-for-mozilla.myshopify.com/cdn/fonts/questrial/questrial_n4.0ba6d2b6094954bab23732c75d3ecb4c47a5869c.woff2?h1=c3RvcmUtZm9yLW1vemlsbGEuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=990372135026e8e2538382162eca529e44108fd57912fc5182a8b6f25c2ac893")
format("woff2"),
url("//store-for-mozilla.myshopify.com/cdn/fonts/questrial/questrial_n4.5abce10d8846bb9326c9741eaffed9667c847692.woff?h1=c3RvcmUtZm9yLW1vemlsbGEuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=26abbd161008d3cf63e33fcc39d7cb0b299a52a49a2e1cc32986825509c00300")
format("woff");
}
@font-face {
font-family: Archivo;
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("//store-for-mozilla.myshopify.com/cdn/fonts/archivo/archivo_n7.6f363ab30b12ea00d5e6243ed0e977a11393a3ad.woff2?h1=c3RvcmUtZm9yLW1vemlsbGEuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=d17d60bf8d7796a12e95dcf7a00f48c6691d9d4cde38d663c1d4202fc09ebaaf")
format("woff2"),
url("//store-for-mozilla.myshopify.com/cdn/fonts/archivo/archivo_n7.846b40a5735bbd149ad44b083a19c3e5d88d8fab.woff?h1=c3RvcmUtZm9yLW1vemlsbGEuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=9ffc64f9d9a886bf052abef9bd90f0439a7f1c8f2b5404b2be2efb94249bb199")
format("woff");
}
:root,
.color-scheme-1 {
--color-background: 239, 240, 245;
--gradient-background: #eff0f5;
--color-foreground: 14, 27, 77;
--color-background-contrast: 161, 166, 196;
--color-shadow: 14, 27, 77;
--color-button: 71, 112, 219;
--color-button-text: 239, 240, 245;
--color-secondary-button: 239, 240, 245;
--color-secondary-button-text: 14, 27, 77;
--color-link: 14, 27, 77;
--color-badge-foreground: 14, 27, 77;
--color-badge-background: 239, 240, 245;
--color-badge-border: 14, 27, 77;
--payment-terms-background-color: rgb(239 240 245);
}
.color-scheme-2 {
--color-background: 255, 255, 255;
--gradient-background: #ffffff;
--color-foreground: 14, 27, 77;
--color-background-contrast: 191, 191, 191;
--color-shadow: 14, 27, 77;
--color-button: 14, 27, 77;
--color-button-text: 255, 255, 255;
--color-secondary-button: 255, 255, 255;
--color-secondary-button-text: 14, 27, 77;
--color-link: 14, 27, 77;
--color-badge-foreground: 14, 27, 77;
--color-badge-background: 255, 255, 255;
--color-badge-border: 14, 27, 77;
--payment-terms-background-color: rgb(255 255 255);
}
.color-scheme-3 {
--color-background: 14, 27, 77;
--gradient-background: #0e1b4d;
--color-foreground: 255, 255, 255;
--color-background-contrast: 18, 35, 99;
--color-shadow: 14, 27, 77;
--color-button: 255, 255, 255;
--color-button-text: 14, 27, 77;
--color-secondary-button: 14, 27, 77;
--color-secondary-button-text: 255, 255, 255;
--color-link: 255, 255, 255;
--color-badge-foreground: 255, 255, 255;
--color-badge-background: 14, 27, 77;
--color-badge-border: 255, 255, 255;
--payment-terms-background-color: rgb(14 27 77);
}
.color-scheme-4 {
--color-background: 71, 112, 219;
--gradient-background: #4770db;
--color-foreground: 255, 255, 255;
--color-background-contrast: 27, 57, 136;
--color-shadow: 14, 27, 77;
--color-button: 255, 255, 255;
--color-button-text: 71, 112, 219;
--color-secondary-button: 71, 112, 219;
--color-secondary-button-text: 255, 255, 255;
--color-link: 255, 255, 255;
--color-badge-foreground: 255, 255, 255;
--color-badge-background: 71, 112, 219;
--color-badge-border: 255, 255, 255;
--payment-terms-background-color: rgb(71 112 219);
}
.color-scheme-5 {
--color-background: 227, 36, 2;
--gradient-background: #e32402;
--color-foreground: 255, 255, 255;
--color-background-contrast: 101, 16, 1;
--color-shadow: 14, 27, 77;
--color-button: 255, 255, 255;
--color-button-text: 227, 36, 2;
--color-secondary-button: 227, 36, 2;
--color-secondary-button-text: 255, 255, 255;
--color-link: 255, 255, 255;
--color-badge-foreground: 255, 255, 255;
--color-badge-background: 227, 36, 2;
--color-badge-border: 255, 255, 255;
--payment-terms-background-color: rgb(227 36 2);
}
body,
.color-scheme-1,
.color-scheme-2,
.color-scheme-3,
.color-scheme-4,
.color-scheme-5 {
color: rgba(var(--color-foreground), 0.75);
background-color: rgb(var(--color-background));
}
:root {
--font-body-family: Questrial, sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-heading-family: Archivo, serif;
--font-heading-style: normal;
--font-heading-weight: 700;
--font-body-scale: 1.05;
--font-heading-scale: 1.0476190476190477;
--media-padding: px;
--media-border-opacity: 0.1;
--media-border-width: 0px;
--media-radius: 20px;
--media-shadow-opacity: 0;
--media-shadow-horizontal-offset: 0px;
--media-shadow-vertical-offset: 4px;
--media-shadow-blur-radius: 5px;
--media-shadow-visible: 0;
--page-width: 120rem;
--page-width-margin: 0rem;
--product-card-image-padding: 1.6rem;
--product-card-corner-radius: 1.8rem;
--product-card-text-alignment: left;
--product-card-border-width: 0.1rem;
--product-card-border-opacity: 1;
--product-card-shadow-opacity: 0;
--product-card-shadow-visible: 0;
--product-card-shadow-horizontal-offset: 0rem;
--product-card-shadow-vertical-offset: 0.4rem;
--product-card-shadow-blur-radius: 0.5rem;
--collection-card-image-padding: 1.6rem;
--collection-card-corner-radius: 1.8rem;
--collection-card-text-alignment: left;
--collection-card-border-width: 0.1rem;
--collection-card-border-opacity: 1;
--collection-card-shadow-opacity: 0;
--collection-card-shadow-visible: 0;
--collection-card-shadow-horizontal-offset: 0rem;
--collection-card-shadow-vertical-offset: 0.4rem;
--collection-card-shadow-blur-radius: 0.5rem;
--blog-card-image-padding: 1.6rem;
--blog-card-corner-radius: 1.8rem;
--blog-card-text-alignment: left;
--blog-card-border-width: 0.1rem;
--blog-card-border-opacity: 1;
--blog-card-shadow-opacity: 0;
--blog-card-shadow-visible: 0;
--blog-card-shadow-horizontal-offset: 0rem;
--blog-card-shadow-vertical-offset: 0.4rem;
--blog-card-shadow-blur-radius: 0.5rem;
--badge-corner-radius: 0rem;
--popup-border-width: 1px;
--popup-border-opacity: 0.1;
--popup-corner-radius: 18px;
--popup-shadow-opacity: 0;
--popup-shadow-horizontal-offset: 0px;
--popup-shadow-vertical-offset: 4px;
--popup-shadow-blur-radius: 5px;
--drawer-border-width: 0px;
--drawer-border-opacity: 0.1;
--drawer-shadow-opacity: 0;
--drawer-shadow-horizontal-offset: 0px;
--drawer-shadow-vertical-offset: 4px;
--drawer-shadow-blur-radius: 5px;
--spacing-sections-desktop: 0px;
--spacing-sections-mobile: 0px;
--grid-desktop-vertical-spacing: 28px;
--grid-desktop-horizontal-spacing: 28px;
--grid-mobile-vertical-spacing: 14px;
--grid-mobile-horizontal-spacing: 14px;
--text-boxes-border-opacity: 0.1;
--text-boxes-border-width: 0px;
--text-boxes-radius: 20px;
--text-boxes-shadow-opacity: 0;
--text-boxes-shadow-visible: 0;
--text-boxes-shadow-horizontal-offset: 0px;
--text-boxes-shadow-vertical-offset: 4px;
--text-boxes-shadow-blur-radius: 5px;
--buttons-radius: 40px;
--buttons-radius-outset: 41px;
--buttons-border-width: 1px;
--buttons-border-opacity: 1;
--buttons-shadow-opacity: 0;
--buttons-shadow-visible: 0;
--buttons-shadow-horizontal-offset: 0px;
--buttons-shadow-vertical-offset: 4px;
--buttons-shadow-blur-radius: 5px;
--buttons-border-offset: 0.3px;
--inputs-radius: 26px;
--inputs-border-width: 1px;
--inputs-border-opacity: 0.55;
--inputs-shadow-opacity: 0;
--inputs-shadow-horizontal-offset: 0px;
--inputs-margin-offset: 0px;
--inputs-shadow-vertical-offset: 4px;
--inputs-shadow-blur-radius: 5px;
--inputs-radius-outset: 27px;
--variant-pills-radius: 40px;
--variant-pills-border-width: 1px;
--variant-pills-border-opacity: 0.55;
--variant-pills-shadow-opacity: 0;
--variant-pills-shadow-horizontal-offset: 0px;
--variant-pills-shadow-vertical-offset: 4px;
--variant-pills-shadow-blur-radius: 5px;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: calc(var(--font-body-scale) * 62.5%);
height: 100%;
}
body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
}
@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}