0

I am trying to integrate some external code (CSS and JavaScript) into my Shopify store. The integration is mostly working, but it is overriding some of the existing styles of my Shopify theme, causing serious layout and ui issues. Here is what I have added to my Shopify theme files:

In 'theme.liquid' (within <head>):

<link rel="stylesheet" href="https://embed-scripts.s3.amazonaws.com/embed.css" type="text/css" />

In 'theme.liquid' (within <body>):

<div id="ecowiser-verified-root"></div>

<script defer type="module" src="https://embed-scripts.s3.amazonaws.com/embed.js"></script>

In 'footer.liquid':

<div id="ecowiser-verified" data-url="https://wiser.eco/brands/category/Clothing%20and%20Accessories/1036" data-badges="Gives Back, Vegan, Low Waste, Sustainable Materials, Sustainable Packaging"></div>

While the code works and displays correctly, the CSS file (embed.css) is causing some of my existing Shopify styles to be overridden, leading to UI inconsistencies.

What is the best way to include external CSS and scripts in Shopify without them affecting or overriding the existing theme styles?

I am looking for a solution that keeps both the existing Shopify styles and the external styles intact without conflicts

Improve this question
2
Related questions
1522
How to extend an existing JavaScript array with another array, without creating a new array
729
How to reset/remove CSS styles for a specific element or selector only
556
How to line-break from css, without using <br />?
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.