Shopify Question posted in
The Shopify help center can be found here.

Override CSS style in Shopify and Liquid

I have a Shopify product page where I need to set different font colors for the same product description in different sections.

In the section below, I need the font to be #333333.

<div>   
    <section>
        <p class="hero-description">{{ product.description }}</p>
    </section>
</div>

And in the section below, I need the font to be #ffffff.

<div>   
    <section>
        <p class="boxed-description">{{ product.description }}</p>
    </section>
</div>

I create the CSS respectively as:

p.hero-description{
    color:#333333!important;
}

And for the second section:

p.boxed-description {
    color:#ffffff !important;
}

However, when the Liquid code in {{ product.description }} is executed, it looks like below:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

The “p” tags are added automatically by Sopify CSS and takes the font color from the body then – which is a blue color and not the color I need the font in the defined sections to be.

enter image description here

I have tried the !important rule, but it does not override the default blue color.

How can I override the default font color in these 2 sections to what I need?

Tags:

2

Answers


  1. 0

    Why not structure your liquid like

    <div>   
    <section>
        <div class="boxed-description"><!-- or .hero-description -->
            {{ product.description }}
        </div>
    </section>
</div>

    And do your CSS like

    .hero-description,
.hero-description > p {
   color:#333333;
}
.boxed-description,
.boxed-description > p {
    color:#ffffff;
}

    Without the p element-level selector qualifying the rule. That way you can reasonably expect your classes to be present in the DOM, regardless of what the user input is from the rich-text-editor. Additionally, using the > p (direct ancestor) will help target the p tags added by shopify with a high degree of specificity, which will help override default CSS rules for a p tag.

    Login or Signup to reply.
  2. 0

    This might not be exactly what you need, but keep in mind that you can also add the strip_html filter in your liquid to prevent the additional <p> tags from getting added in the first place.

    e.g.) {{ product.description | strip_html }}

    Check out this Shopify Cheat Sheet for details on that.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search