Why does custom liquid adopt Shopify CSS properties?

Vincentla
New Member
6 0 0

Hey! From what I have understood the Liquid markup language can read html without a problem and I happen to have this html code that I want to implement onto my website. However when I add it as custom liquid it appears to have different properties and takes the css from shopify. I believe this is what causes my problem since in theory it should look just like it does when running the html code , right? In this case how would I prevent this behaviour?

Replies 2 (2)

Moira
Shopify Staff
2040 223 323

Hey @Vincentla!

 

Shopify's Liquid markup language can indeed read HTML, but there are some key differences between how Liquid and HTML handle code. One of the primary differences is how we handle variables and data.

 

When you add HTML code as a custom Liquid snippet, it's important to keep in mind that Liquid will interpret any variables or data included in the code, which can cause unexpected behavior. Additionally, Liquid may apply its own CSS styles to the code, which can cause the code to look different than it does when run as pure HTML.

 

To prevent this behavior and ensure that your code appears as intended, you can try a few different approaches:

 

  1. Use an HTML file: Instead of copying and pasting the HTML code into a Liquid snippet, create an HTML file and upload it to your Shopify theme. You can then use a Liquid include statement to include the HTML file on your Shopify site. This will ensure that the HTML code is not affected by Liquid's variables or CSS styles.

  2. Wrap the code in a {% raw %} tag: If you want to keep the HTML code as a Liquid snippet, you can wrap the code in a {% raw %} tag. This will tell Liquid to ignore any variables or data within the tag, and treat it as pure HTML. For example:

{% raw %}
<div class="my-custom-class">My HTML code</div>
{% endraw %}

 3. Use CSS to style the code: If you're having trouble with Liquid overriding your CSS styles, you can try using more specific CSS selectors to target the HTML code. For example, you could add a custom class to the HTML code, and then use that class in your CSS to apply the desired styles. This can help ensure that your CSS styles are applied correctly, even when Liquid is involved.

 

Ultimately, the best approach will depend on the specifics of your code and how it needs to be integrated with your site. But hopefully these tips will help you get started!

Moira | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog

Vincentla
New Member
6 0 0

Thank you for this amazing response! I tried using the Raw tags but it sadly didn't make a difference. I'm gonna be pasting my code down below and you can have a look at it.

 

Below is the expected output: (From local server that reads HTML)

1b95d502bb2b6cce22da4a056540184d.gif

And this is how it looks in shopify as liquid: (The sliders are also not moving as they should)

0912c595b1c789679dc3fc544fad3a13

 

 

 

{% raw %}
    <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
        
            <style>
                .my-slider {
                    width: 100%;
                    height: 100%;
                    background-color: rgb(255, 255, 255);
                }
        
                #Slider-container {
                    max-width: 100%!important;
                    padding-bottom: 30px!important;
                    padding-top: 30px!important;
                    padding-bottom: 10px;
                    width: 80%;
                    margin-left: auto!important;
                    margin-right: auto!important;
                    max-width: 1200px!important;
                    padding-top: 30px!important;
                /* background-color: blue;*/
                }
        
                .my-slider div {
                    padding-top: 7px!important;
                    padding-bottom: 7px!important;
                    border-style: solid!important;
                    border-width: 1px!important;
                    border-color: #ebebeb!important;
                    border-right-width: 1px!important;
                    border-bottom-width: 0px!important;
                    border-left-width: 0px!important;
                    border-top-width: 0px!important;
                }
        
                .my-slider div {
                    text-align: center!important;
                }
        
                .Side-by-side {
                    display: inline-block!important;
                    /*padding: 1rem 1rem;*/
                    vertical-align: center!important;
                }
                
                .my-slider div img {
                    margin-left: 0!important;
                    margin-right: 0!important;
                    margin-top: 0!important;
                    margin-bottom: 0!important;
                    width: 1.5rem!important;
                    height: 1.5rem!important;
                }
            </style>
        </head>
        <body>
            <div id="Slider-container">
                <div class="my-slider">
                    <div>
                        <img class="Side-by-side" src="https://ucarecdn.com/f85760e8-48e8-4bc0-b10b-3668892a0fca/-/format/auto/-/preview/100x100/-/quality/lighter/" alt="">
                        <p class="Side-by-side">30 dagars retur</p>
                    </div>
                    <div>Slide 2</div>
                    <div>Slide 3</div>
                    <div>Slide 4</div>
                </div>
            </div>
        </body>
        
        <script>
            let slider = tns({
        "container": ".my-slider",
        "autoplay": true,
        "autoplayHoverPause": true,
        "autoplayTimeout": 3500,
        "items": 3,
        "autoplayButtonOutput": false,
        "controls": false,
        "nav": false,
        "slideBy": 1,
        "swipeAngle": false,
        "speed": 500,
        });
        </script>
    </html>
{% endraw %}