Advanced styling
Gradients, image backgrounds, shadows, different values per device, and custom CSS that can never leak outside your design.
Backgrounds
Sections and columns get a Background style: Color only, Gradient or Image.
From the background color (white if none) to the Gradient end color, in a Gradient direction: Top to bottom (default), Left to right or Diagonal. Without an end color, no gradient is drawn.
Background image URL (an http or https URL; copy it from your Media Library), Image size (Fill, Fit, Original), Image position (Center, Top, Bottom) and Image overlay (None, Darken, Lighten) to keep text readable.
- Checkout with a gradient summary column
Content position
Columns get Content position (Layout tab): Top (default), Middle, Bottom or Spread out. Use it, for example, to push a button to the bottom of a column that matches its neighbour's height.
Shadows
Sections, rows, columns and elements get a Shadow: None, Soft, Medium or Strong. Combine it with a corner radius for card-style summaries.
Values per device
In the Responsive tab, Values per device repeats each responsive number with (Tablet) and (Mobile) versions: section top and bottom padding, minimum height and side padding; row column gap, gap between stacked columns and padding; column padding and minimum height; corner radius on sections, rows and columns; and element space above, space below and inner padding. Tablet means up to 1024 px wide and mobile up to 767 px. Leave a device value empty to inherit the desktop one.
Custom CSS
Custom CSS properties (per item)
Every section, row, column and element has Custom CSS properties on the Advanced tab: one declaration per line (for example "letter-spacing: 1px;"), applied to that item only. Up to 30 declarations are used, and !important is removed.
letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0,0,0,.08);
Page custom CSS
Page settings → Advanced → Custom CSS takes full rules such as .my-class { color: #333; }, up to 6,000 characters. Every selector is automatically limited to this page's design, so you can't accidentally restyle your theme:
.my-trust-strip { background: #f4f7ff; border-radius: 12px; }
& h2 { letter-spacing: -0.02em; }
& or :root means the design itself. Add your own class to an item on the Advanced tab ("Additional CSS class(es)") to target it.
@media, @import), url() (except a quoted http(s) background-image URL), comments, selectors starting with + or ~, and selectors with unusual characters (such as /) are dropped silently. One unusual selector drops its whole rule, so if a rule doesn't apply, simplify the selector. Use per-device values instead of media queries.