How To Convert Hex to RGBA Value Using Shopify Liquid

Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.

Shopify Theme Settings Input Fields support a color picker field. But the output value is a color hex code. If you want to convert this value to RGB, Shopify liquid is supporting that.

Eg: {{ '#ff3f00' | color_to_rgb }} output rgb(255, 63, 0)

Does Shopify liquid support converting Hex to RGBA with opacity? Not, it doesn’t. But you can combine some Shopify liquid codes to do that.

Please follow the below steps to learn how to convert Hex to RGBA with opacity using Shopify liquid code.

  • Creating a new snippet is called color_to_rgba
  • Using this code to convert a hex value to a RGBA value

    Ouput: rgba(255, 63, 0, 0.8)

I hope this article is helpful to you.

Looking for Shopify Experts?

Hura Apps can help you take your store to the next level

Our team of experienced designers and developers can help you create a beautiful, high-converting Shopify store that will drive sales and increase customer satisfaction. From custom design to app development and optimization, we have the skills and expertise to help you achieve your eCommerce goals.

Get in touch

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *