Advanced styling for Easy themes

Easy themes provide several styling surfaces before you need an Advanced code storefront. Use the smallest surface that matches your change.

Surface	Scope	Limit	Best use
Theme Custom CSS	The complete storefront	65,536 UTF-8 bytes (64 KB)	Fonts, animations, and shared styles
Section CSS	One block	16,384 UTF-8 bytes (16 KB)	A unique layout or shape
Extra Classes	One block root	256 characters	Stable class names for CSS selectors
Custom HTML	One sandboxed iframe	262,144 characters	Self-contained HTML, CSS, and scripts
Announcement Bar	The shop header	160 text characters	Static or scrolling promotion text

Add theme-level CSS

Theme Custom CSS applies across the storefront. Shoppex scopes each selector to the storefront container. Theme CSS can declare global names with @keyframes and @font-face.

Open the Easy theme in the visual Builder.
Select the Theme tab.
Open Custom CSS.
Paste the CSS.
Preview the affected pages.
Publish the theme.

Animate a heading

First, select the heading block. Open Custom CSS & Class, then paste glitch-heading into Extra Classes. Paste this example into the theme-level Custom CSS field:

@keyframes cyber-glitch {
  0%, 88%, 100% {
    transform: translate(0);
    text-shadow: 2px 0 #00f5ff, -2px 0 #ff2bd6;
  }
  90% {
    transform: translate(-2px, 1px);
    text-shadow: 5px 0 #00f5ff, -5px 0 #ff2bd6;
  }
  92% {
    transform: translate(2px, -1px);
    text-shadow: -4px 0 #00f5ff, 4px 0 #ff2bd6;
  }
}

.glitch-heading h1,
.glitch-heading h2 {
  animation: cyber-glitch 2.8s steps(1, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .glitch-heading h1,
  .glitch-heading h2 {
    animation: none;
  }
}

The extra class gives the block a stable selector. The animation affects headings inside that block only.

Load a font outside the curated list

@font-face can load a font from a full HTTPS URL. This example loads Atkinson Hyperlegible from an external font CDN.

@font-face {
  font-family: "Atkinson Shop";
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/[email protected]/latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: "Atkinson Shop", system-ui, sans-serif;
}

The font host must permit cross-origin font requests. For your own asset, use its complete HTTPS URL.

Style one block

Section CSS stays inside one block. Shoppex adds the block ID to each selector before it renders the page.

Select the block in the Builder.
Open Custom CSS & Class in the block inspector.
Paste cyber-card into Extra Classes.
Paste the CSS into Section CSS.

body.cyber-card {
  clip-path: polygon(
    0 18px,
    18px 0,
    100% 0,
    100% calc(100% - 18px),
    calc(100% - 18px) 100%,
    0 100%
  );
  border: 1px solid #00f5ff;
  background: linear-gradient(135deg, #0b1020, #17102a);
  box-shadow: inset 0 0 24px rgb(0 245 255 / 12%);
}

body.cyber-card:hover {
  border-color: #ff2bd6;
}

In Section CSS, a leading body targets the block root. Here, body.cyber-card targets the root with your extra class. Extra Classes accepts letters, numbers, hyphens, and underscores. Separate multiple class names with spaces.

Know the CSS safety rules

Shoppex parses Custom CSS before it saves or renders the theme. Invalid CSS returns an error instead of partial output.

The sanitizer rejects	Use instead
`@import`	Paste the required CSS into Custom CSS.
Relative, `http://`, protocol-relative, and `data:` values in `url()`	Use a full `https://` URL or a local `#fragment`.
The `behavior` and `-moz-binding` properties	Use standard CSS properties.
The `expression()`, `image-set()`, and `-webkit-image-set()` functions	Use static values or one HTTPS asset URL.
A closing `</style>` tag	Put CSS only in the CSS field.
Escapes in property or function names	Write the property or function name directly.

Theme CSS permits @keyframes, @font-face, @page, and @property. Section CSS cannot contain these page-wide rules. Declare them in theme-level Custom CSS, then reference them from Section CSS. For example, Section CSS can use animation: cyber-glitch 2.8s infinite after theme CSS declares @keyframes cyber-glitch.

Add self-contained HTML

Use a custom-html block for a self-contained interface that needs HTML, CSS, or JavaScript. Shoppex renders the block in a separate sandboxed iframe.

Add a Custom HTML block to the page.
Paste the complete example into the HTML field.
Set Height mode to Auto.
Preview the page.

<div class="access-card">
  <p class="label">MEMBER ACCESS</p>
  <button type="button" id="reveal-code">Reveal access code</button>
  <p id="access-code" hidden>NEON-20</p>
</div>

<style>
  body {
    margin: 0;
    background: transparent;
    font-family: system-ui, sans-serif;
  }

  .access-card {
    padding: 24px;
    border: 1px solid #00f5ff;
    color: #f8fafc;
    background: #0b1020;
    clip-path: polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  }

  .label {
    color: #00f5ff;
    letter-spacing: 0.14em;
  }

  button {
    padding: 10px 14px;
    border: 0;
    color: #0b1020;
    background: #00f5ff;
    cursor: pointer;
  }

  #access-code {
    margin-bottom: 0;
    color: #ff2bd6;
    font-size: 28px;
    font-weight: 700;
  }
</style>

<script>
  const button = document.querySelector("#reveal-code");
  const code = document.querySelector("#access-code");

  button.addEventListener("click", () => {
    code.hidden = false;
    button.hidden = true;
  });
</script>

The sandbox permits scripts, forms, and popups. It does not grant same-origin or top-navigation access to the storefront page. Theme CSS does not enter the iframe. Include all required styles inside the Custom HTML content.

The custom-html block is forbidden on Checkout. Use it on storefront pages or merchant-created pages.

Scroll an announcement bar

The Announcement Bar widget has Static and Scrolling behavior. Scrolling mode repeats the message as a marquee and uses a static version for reduced-motion visitors.

Open the Widgets page.
Add an Announcement Bar.
Enter the following values.
Save the widget.

Text: NEW DROP // 20% OFF UNTIL MIDNIGHT
Link label: SHOP NOW
Link URL: /all-products
Behavior: Scrolling
Scroll speed: 30

The scroll speed uses seconds per cycle. The field accepts values from 8 through 40 seconds.

Continue the theme workflow

Use Editing with AI for chat-based or local AI changes. Use the Theme CLI to edit a ThemeDocument checkout with local files.

Themes

Code storefronts

Theme reference

Domains and fixes

Advanced styling for Easy themes

Add theme-level CSS

Animate a heading

Load a font outside the curated list

Style one block

Know the CSS safety rules

Add self-contained HTML

Scroll an announcement bar

Continue the theme workflow

​Add theme-level CSS

​Animate a heading

​Load a font outside the curated list

​Style one block

​Know the CSS safety rules

​Add self-contained HTML

​Scroll an announcement bar

​Continue the theme workflow

Add theme-level CSS

Animate a heading

Load a font outside the curated list

Style one block

Know the CSS safety rules

Add self-contained HTML

Scroll an announcement bar

Continue the theme workflow