CSS working well on VScode, but doesn't give same output in Shopify (using custom CSS)

Technical Q&A

Topic summary

A developer’s custom CSS works correctly in VSCode but fails to render properly in Shopify. The HTML includes a linked external CSS file (Icons-Test.css) and displays icon images with headings in a flex container.

Troubleshooting suggestions provided:

  • Verify the CSS file path is correct and the file exists in the Shopify theme
  • Check for CSS syntax errors or typos
  • Confirm CSS class names in the stylesheet match those in the HTML
  • Review Shopify theme settings to ensure custom CSS applies to relevant pages
  • Use browser developer tools to debug and identify issues

Key observation: The code contains reversed/mirrored text in both HTML and CSS sections, which may indicate a formatting or encoding issue that could be contributing to the problem.

Proposed solution: GemPages support suggests embedding the CSS directly inline using <style> tags instead of linking an external stylesheet, providing a code example with inline styles for the icon container and individual icon elements.

The issue remains unresolved pending the developer’s response to these suggestions.

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

Hello @EspressoEd ,

I checked your code and found that this code only works when you also have a CSS file named Icons-Test.css in your Shopify theme code.

You could please try adding the code like that:


        

            
                ### No Artificial Fragrances 
        

        
            
                ### Natural Actives 
        

        
            
                ### Biodegradable Ingredients 
        

        
            
                ### Cruelty-free
        

        
            
                ### Safe Preservatives 
        

        
            
                ### Recycleable Packaging

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team