Where to add

Customize → Theme settings → Custom CSS category → paste your rules in the textarea.

Tips

• Your CSS is loaded AFTER all theme styles, so you can override anything without using !important.
• Use the CSS variables Vesperia exposes (--color-background, --color-foreground, etc.) to keep your custom rules in tune with the chosen preset.
• For big rewrites (more than ~50 lines), prefer Edit code so you have proper syntax highlighting.

Example: tighten section spacing on mobile

@media (max-width: 749px) {
  .shopify-section { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

Example: hide a specific section

#shopify-section-template--XXXXXXXX-XXXXXXXX { display: none !important; }

Replace XXXX with the section’s actual ID. Inspect element to find it.

Example: change a CSS variable globally

:root {
  --color-accent: #B8923F !important;
}