When designing the elements of your Shopify store, you have the nearly infinite color spectrum at your fingertips. Colors that only have names on paint store color swatches. The conventional system of Hex values for colors, such as #FFFFFF or #000000 allows you to choose any number of variations of any number of different colors, like Slightly Dirty Shoes White, Mid-October Leaf Yellow, and Netflix Red. But what if, rather than just using rgb, you want to use an rgba color value that follows the format of (r, g, b, a)? These can be very useful for creating semi-opaque backgrounds by including the fourth alpha value. How can we take a hex color value from our color picker field and convert it to an rgba value with opacity too?

Like this!

First, we need to add an image picker field and a color picker field. Then, we add a background image to the image picker field and set the background-color field to #FFFFFF. We also add a range field to set the opacity, which we have set to 0.7 here in this example.

In our section template, we add this code:

{% assign bg_color = section.settings.bg_color | color_to_rgb %}       
{% assign opacity = section.settings.opacity %}       
{% assign opacityWithEndBracket = ', ' | append: opacity | append: ')' %}       
{% assign rgba = bg_color | replace: 'rgb', 'rgba' | replace:')', opacityWithEndBracket %}      

<img src="{{ section.settings.image | img_url: 'master' }}">

<div class="content" style="background-color: {{ rgba }}">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu accumsan nisl. Cras eget ex tristique, tempor diam non, viverra neque. Suspendisse eget leo enim. Praesent eu massa dignissim, pretium risus non, fermentum diam. Phasellus egestas vel lacus vel pulvinar. Aliquam pretium ornare odio. Curabitur gravida at urna ac ultrices. In maximus cursus lacus et vulputate. Mauris eleifend, quam at porttitor mattis, sem nulla accumsan lectus, ut volutpat tortor enim sit amet ex. Sed ac elit ac dolor mollis cursus. Mauris consequat arcu quis mauris aliquam, nec rhoncus ipsum sollicitudin. Sed non auctor eros, fringilla dictum ex. Quisque ornare eu leo vitae pellentesque. Fusce eros augue, lobortis nec turpis sit amet, placerat sagittis magna. Praesent mattis nulla dolor, ut interdum mauris blandit eget.

</div>

Next, we get the background color and opacity values from the fields and assign them to variables. These are the main two components needed, but the problem is, at its current state, our bg_color value outputs rgb(255, 255, 255) and our opacity outputs 0.7. To fix this, we need is to apply the following CSS:

background-color: rgba(255, 255, 255, 0.7)

What we will need next is some creative applications of string filters, courtesy of the Shopify, to reformat our separate color and opacity values into that single piece of CSS. To do this, we first create a variable called opacityWithEndBracket which we use for a string replacement in the default bg_color value. We then perform that string replacement, and switch rgb to rgba, and then replace the final bracket with our opacityWithEndBracket value, so that we essentially inject the opacity into the existing rgb value. Ultimately this changes this:

rgb(255, 255, 255)

To this:

rgba(255, 255, 255, 0.7)

Finally, to add it all together and tie the bow at the end, in our section template we can apply our new rgba variable to the div like this:

<div class="content" style="background-color: {{ rgba }}">

In order to apply the styles from our rgba variable.

If you have followed directions appropriately, then this should give you a background image with the semi-opaque div on top of it, like so:

You don’t have to just settle for Ketchup Smudge On a Sweater Red when you can also get that color at your preferred level of opacity!

Keep this customization a secret from paint stores please, otherwise they’ll launch into a flurry of creating a million more names for every opacity of every color, and we definitely don’t need to read a novel on every paint swatch. HOWEVER, we do want this level of control in our Shopify store, because why not? Let your imagination run free!

Looking for premium Shopify development experts at Slicedbread? Get in touch!