Custom CSS Hero Image Caption Card Transparency

Store Design

Topic summary

Goal: Make the hero caption card behind “Mix And Match” 10–15% more transparent on a ShowTime theme.

Context and links:

Latest update:

  • A helper requested the URL, then supplied implementation steps: Online Store → Edit Code → open theme.liquid → add custom CSS just above the tag.
  • The actual CSS snippet is missing in the post (the code block appears empty), though a “Result” screenshot was shared indicating the intended effect.

Status:

  • No confirmation from the store owner that the change worked.
  • Key missing detail: the exact CSS to adjust transparency (e.g., changing an overlay/background via rgba/opacity) isn’t visible.

Next steps / open items:

  • Poster needs the correct CSS snippet re-posted or clarified.
  • Confirmation needed on whether the transparency now meets the 10–15% target.
Summarized with AI on December 17. AI used: gpt-5.
4

Hey @kankrum

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1727984651492.png
Moeed_0-1727984651492.png1911×610 243 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like