Large Video with Text Box - Add opacity to text box, change colour, using Motion Theme

Shopify Discussion

Topic summary

A user needs to customize the text box overlay in the Motion theme’s “Large Video with Text Box” section, specifically wanting to:

Initial Request:

  • Adjust opacity of the text box background
  • Change the text box color (currently tied to the background color scheme)

Solution Provided:

A helper provided custom CSS code targeting .background-media-text__text:

  1. Color change: Use background: #000000; (hex color codes available at htmlcolorcodes.com/color-picker)

    • This successfully resolved the color customization issue

  2. Opacity adjustment: Use CSS rgba() function instead of hex

    • Format: background: rgba(255, 0, 0, 0.75);
    • RGB values from the color picker website
    • Alpha value controls transparency (0.0 = fully transparent, 1.0 = fully opaque)
    • Example provided shows 75% opacity with red background

Status: The user confirmed the color change works and plans to implement the opacity solution. Issue appears resolved with working code provided.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Motion Theme

Large Video with Text Box

Need opacity adjustment for the opaque text box,

Want to change text box colour that is tied to background colour scheme

Does anybody have a solution?

Thank you

Roserae · Customize Book Nook TJ Motion Theme · Shopify - Opera 25_10_2024 14_08_02.png
Roserae · Customize Book Nook TJ Motion Theme · Shopify - Opera 25_10_2024 14_08_02.png1193×566 94.2 KB

2

Hi Tixi,

I may be able to help. If you cannot change the color via the Theme Settings, you can apply this Custom CSS code to the “Large Image with text box” section:

.background-media-text__text {
background: #000000;
}

You can find your desired hex color on this website and insert it into the code.

Hopefully, that helps. Cheers!

3

Hi SteveC,

I entered your code into the custom CSS code section and it worked, I can now change the colour of the text box!!

Thank you for your input, it has answered half my query :slightly_smiling_face:

4

Great, happy to hear that the solution worked. What was the other half of you query?

5

I wanted to add a percentage of transparency to the text box background overlay of the video. For example, 75% transparency text background. Text remains at 100 %.

6

Understood! In that case, you can use a CSS rgba() function. The r, g, b (red, green and blue) can be found on the same website. The a (alpha) denotes the opacity 0.0 = fully transparent and 1.0 = fully opaque.

If you wanted a red background with 75% opacity, the code would like this:

.background-media-text__text {
background: rgba(255, 0, 0, 0.75);
}

Here is a screenshot from the site with RGB to insert.

RGB.png
RGB.png1368×240 6.18 KB

Insert that code into the custom CSS and you should get the results you are looking for! Cheers!

1 Like
7

Thank you, i will try this out!