Limitation for gradients on Impact theme

Impact theme supports gradient colors for many elements, including section background or heading. However, gradients have some limitations:

  • No metafield connection: as of today, Shopify does not offer any gradient metafield type. This means that if you use a gradient for either heading or background, you won't be able to change them dynamically through metafields. If you wish to create per-resource color, you will need to use solid colors instead.
  • No line-by-line transition for headings: Impact theme offers three different reveal effects for heading, including two effects that cut a text into multiple lines to reveal it. Unfortunately, due to browser technical limitations, combining line by line reveal effect and heading gradient is impossible. If you select the "line by line" apparition effect for the heading, it will only be applied to the heading with a solid color. Gradient heading will fall back to a fade effect.
  • Using a heading gradient combined with an outlined gradient heading: some section allows you to set the heading as an outlined heading to create interesting visual effects. However, due to browser technical limitations, combining a gradient background with an outlined heading that also has a gradient is impossible. You need to use a filled heading or a solid background color.
  • No margin collapsing when using different gradient backgrounds: Impact offers the ability to change the background of every section. The theme also has a smart detection approach that will automatically "collapse" consecutive sections with the same background so that no double margin is visible. However, this approach cannot work if you set the following gradients in two sections. For instance, if section 1 has a gradient from black to white, and section 2 a gradient from white to blue, while the section 1 ending color and section 2 starting color are the same (white), no collapsing will happen here as the gradient is different, so the theme cannot do smart detection.