Adding Overlay on Featured Article Image in Blog Page. PRESTIGE THEME

Store Design
1

Hi everyone, I have no experience with the prestige theme and I’m having some problems trying to customize the blog pages.

As I mentioned in the title, I would like to add an overlay to the featured article’s image in my blog page (where are listed all the articles) in order to darken the image and make the white heading more visible.

featured-article-blog-image.PNG
featured-article-blog-image.PNG1846×810 266 KB

I’d like to add the overlay ONLY on the featured article image section. Thanks for the help!

2

Hello @manumaverick ,

Greetings!!

Please share here Store URL, So we can help you with this

3

The url is https://seishou-jp.com/

4

Hi @manumaverick

Kindly share your store URL?

5

Hello @manumaverick ,

Greetings!!!

Thanks for providing the store URL

Please follow the steps:

Please follow the steps:

  1. Online store->Themes->Actions->Edit Code->Assets->theme.css

  2. Paste the below code at the last of this file base.css

.ImageHero  .ImageHero__TextContent {
  padding: 16% 60px 0px;
  bottom: 0;
  top: 0;
  right: 0;
  background: #00000080;
}

DipenPanchal_0-1655295737548.png
DipenPanchal_0-1655295737548.png1919×930 283 KB

6

Hello @manumaverick !

You have explained what you’re looking to do really well - our own support team cannot help you make these changes, however, the developers of the theme might be the best people to consult on this!

Since you mentioned that it is the Prestige theme, I had a look on their listing in our Shopify Theme Store, and found their contact on their developer website here. You could even link this Community post to them, since you have all the details here.

Speaking of blogs, this is a fantastic way to organically improve your SEO! In case you’re interested, I have some other tips and info in this Beginner’s Guide to SEO from our Shopify Blog.

7

@SetuBridge_1 Exactly the solution I was looking for. Thanks very much!