I am not sure whats happening…I am LITERALLY using the same pictures that I already have in my 3 previous blog posts (I just started this new blog) but no matter what, the blog post I would like to announce is completely different than all the rest! The pictures every single one (again that look fine on my other posts from last week) are toned down in color like someone removed the light from them? I already tried resising, making smaller all that stuff nothing is working whats happening?
Topic summary
A Shopify store owner encountered an issue where images in a new blog post appeared dull and desaturated compared to identical images used in previous posts. The same photos displayed correctly in earlier blog entries but lost color vibrancy in the newest article.
Root Cause Identified:
The problem stemmed from a CSS class called “light” with reduced opacity being applied to the blog content. This occurred because the user was drafting blog text externally, then using ChatGPT to format it into a polished post before publishing to Shopify.
Solutions Provided:
- Add CSS code to override the opacity issue in either the theme’s base.css file or (safer option) in the Article section’s Custom CSS settings
- Request ChatGPT to avoid using specific CSS classes like “light” or use only basic HTML formatting to prevent cross-platform styling conflicts
Key Takeaway:
Formatting generated for other platforms (like WordPress) may include CSS classes that conflict with Shopify’s existing styles. The issue was resolved with CSS adjustments and awareness of potential formatting conflicts when using AI-generated content.
1 Like
Hello @Homemadegarden ,
Can you please share your store URL?
To this blog post? Here it is…thank you. I just took the top picture, and ADDED it to one of my other 2 blog posts and the picture is FINE…but then it looks dull on the blog post link above
I am wondering because the OTHER TWO BLOG POSTS I have already released have LESS pictures on them…is there a MAX amount of picture space and do they adjust them if I use more than allowed…I am just guessing.
This:
Not going to suggest a fix, but looks like the blog content has a class which makes it semi-transparent.
You should be able to fix this “at the source”.
Looks like you’re creating this content not in Shopify’s editor?
1 Like
YES not sure why its muted a bit in mine
OH WOW…not sure where that came from but I will look thanks so much!!!
Go to online store> edit code> search base.css/theme.css file and this code at the end.
.light {
opacity: 0 !important;
}
1 Like
I’d say be cautious adding rule like suggested above – it may affect other areas.
As an acceptable safer option, add this code to the “Article” section “Custom CSS” setting – this will make it apply to this particular section only.
1 Like
OH GOSH THANK YOU SO MUCH I really appreciate this!!!
Well, what I have been doing is writing my long paragraph saying exactly what I want to say and talk about (I have content/pictures/videos for decades to talk about) and then I have been taking that large paragraph and asking chatgpt to summerise it into a well written blog post…should I not do that?
So you can ask Chat GPT what kind of formatting it used for the article and ask it to not use the light class.
May be it was formatting for another system, like Wordpress.
The problem is that same class name may mean different styling in different systems.
Sometimes, even if some styles are included in HTML code, the theme may already have the same class defined in its own stylesheet.
Use the tool, but stay alert. Probably ask it to use no classes, just base HTML to avoid surprises. Or do this as a fallback/test if something is not ok.
1 Like
THANK YOU THANK YOU THANK YOU! Much appreciated!
Thank you so much I will stay alert from now on I didn’t even know this was a thing that happened! THANK YOU AGAIN!!!
Hit the thumb up button then…
1 Like