Video block

Video

Custom CSS & CSS Variables

We've provided an area in each block that will allow you to add your own custom CSS so you can match your brands style exactly. We decided to make this even easier by providing CSS variable for common changes to make this even easier 🎉

Here is a list of the Variables available in this block:

--border-radius
--background-color
--aspect-ratio
--play-button-size
--play-button-color

--margin-top
--margin-bottom
--padding
--size

Custom CSS example

Rounded corners on videos are quite popular right now, as are mesh gradients. Here's the easy way to customize your video block with custom CSS variables:

{
    --border-radius: 20px;
    --padding: 25px 0;
    --background-color: radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%);
}

Dynamic blocks with MetaObjects

For the most in-depth explanation check out the instructions for Image with text

1. MetaObject definition

We've create a simple way to create MetaObject definitions in the app. Here's an explanation of our one-click metaobject feature:

1. Product Metafield definition

2. Entry for the MetaObject

Hot tip 🔥

If there's not a good field for a display name, changing the handle will set the title of the entry - which makes it easier to find later 😁. Just remember, no spaces in the name

1. Connect the MetaObject entry to the Product

1. Connect specific field to the block