New opacity controls for theme colors

On May 1st, Shopify's online store editor is getting an upgrade with a new opacity slider in the color picker. This feature lets merchants create semi-transparent colors for their store themes. To ensure your theme works perfectly with this new capability, you may need to update your code.

What you need to update

Your theme needs to properly handle the alpha (transparency) value that comes with color settings. Here's how to make these changes:

1. Update your liquid color handling

When working with color values in your Liquid files, you need to capture the transparency information:

Old Method:

--color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};

New Method:

--color-background: {{ scheme.settings.background.red }} {{ scheme.settings.background.green }} {{ scheme.settings.background.blue }} / {{ scheme.settings.background.alpha }};

Or if you were using the rgb property, switch to rgba:

Old Method:

--header-background-color: rgb({{ scheme.settings.header.rgb }});

New Method:

--header-background-color: rgba({{ scheme.settings.header.rgba }});

2. Update your CSS

For better handling of transparent colors in CSS, use modern color syntax:

Old Method:

.example {
  color: rgba(var(--color-foreground), 0.75);
  background-color: rgb(var(--color-background));
}

New Method:

.example {
  color: color-mix(in srgb, rgba(var(--color-foreground)), transparent 25%);
  background-color: rgba(var(--color-background));
}

Tips for a smooth transition

• If your theme has hardcoded transparency values, consider using color-mix to preserve both your existing effects and the merchant's chosen transparency.
• Existing opacity settings in your theme can remain in place, but using color-mix will give you better control over how they interact with merchant-selected transparency.

Testing

You can test this new functionality before the May 1st release date on all development stores.

If you have any questions or require support, please reach out to the support team in your Partner dashboard.