The Style section on the Design panel's Style tab shapes how an element looks on screen. Select any element and open the Style section in the right-hand panel.
Fill
Fill sets the background of an element. Choose from several fill types:
Color — a solid color from the color picker or a linked Brand styles color
Gradient — a gradient with multiple stops
Image — a static image, a file from Assets, or a dynamic Shopify image
Video — a background video
For image fills, use the picker to browse Assets or, when Shopify is connected, files from your store, and upload new files directly. Image fills support sizing and focal-point controls so crops look right across breakpoints.
Video fills work differently: you add the video by pasting a URL in the Link field — there's no upload or file picker for the video itself. The simplest approach is to upload your video to Shopify (Content → Files), copy its file URL, and paste it here. You can also set an optional Thumbnail (poster image), an Overlay, and whether playback Controls appear.
Border
Border adds an outline around the element. Set the width, color, and line style. Borders follow the element's Radius, so rounded corners apply to the border too.
Text elements have a separate Border control in the Text section — that one strokes the letterforms rather than the element box.
Radius
Radius controls corner rounding. Switch between a single value for all corners and individual controls per corner.
Shadow
Shadow adds a shadow to the element. Set the color, X and Y offset, blur, and spread, and choose whether the shadow sits Outside the element (a normal drop shadow) or Inside it (an inset shadow).
Opacity
Opacity adjusts the element's transparency from 0 to 100%, using either the number input or the slider.
To hide an element without deleting it, use the eye toggle at the top of the Design panel (on the Style tab), or press Ctrl+Shift+H / Cmd+Shift+H. This is a separate control from opacity.
Blending and filters
Use Add on the Style section header to reveal advanced effects:
Blending — blend modes such as Multiply, Screen, and Overlay
Blur — blur on the element
Fill blur — a backdrop blur behind semi-transparent fills
Grayscale and Invert — color filters
Large blur values can affect performance, and the panel warns you when a value is high enough to matter.
Responsive fills and effects
Fill, border, radius, shadow, and filter values can differ per breakpoint. Switch the viewport width before editing to override styles for tablet or mobile — for example, a full-bleed image on desktop and a solid color on mobile.
Effects on interaction states
You can also override these properties per state. On the Interactions tab, add an effect such as Mouse hover or Mouse press, then override Fill, Border, Shadow, or filters for that state — enough to build a button that darkens on hover or a card that lifts when pressed.