Styling issue

Store Design
,
1

Hi guys,

I have this custom CSS code for gradient style for the h3 text in my product template but i cannot use it in the shopify theme editor section’s custom CSS field as there is other code and i have reached 500 character limit.

How can I add this code to the styles.css file but fix it only to that specific product or product template so it does not affect the entire website h3 style?

Product template file name is: product.shorty.json

h3 {
background: linear-gradient(
90deg,
#161311 0%,
#2b241e 20%,
#b88a3c 40%,
#f4d98b 50%,
#c69a47 58%,
#9a7332 72%,
#d9b15d 100%
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}

2

You can use this:

body.template-suffix-shorty h3 {
  background: linear-gradient(
    90deg,
    #161311 0%,
    #2b241e 20%,
    #b88a3c 40%,
    #f4d98b 50%,
    #c69a47 58%,
    #9a7332 72%,
    #d9b15d 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

But I would put it in theme.liquid right above the </body> tag, just because I like liquid condition better, like this:

{% if template == 'product.shorty' %}
<style>
  h3 {
    background: linear-gradient(
      90deg,
      #161311 0%,
      #2b241e 20%,
      #b88a3c 40%,
      #f4d98b 50%,
      #c69a47 58%,
      #9a7332 72%,
      #d9b15d 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
</style>
{% endif %}
3

Hi @JustinasR

You can add the CSS to your style.css or base.css file and apply it only to the product.shorty template by using a template-specific class or wrapper.

First add a class in your product template using Liquid:

<div class="{% if template.suffix == 'shorty' %}product-shorty{% endif %}">
  
</div>

Then add your CSS to style.css or base.css

.product-shorty h3 {
  background: linear-gradient(
    90deg,
    #161311 0%,
    #2b241e 20%,
    #b88a3c 40%,
    #f4d98b 50%,
    #c69a47 58%,
    #9a7332 72%,
    #d9b15d 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

This way, the gradient effect will only appear on that specific product template and won’t affect the rest of your store.

If you have any questions or need any further assistance, please feel free to let us know.

4

Hey @JustinasR

The solutions which are provided above works too but if you’re looking for something quick and easy then just simply,

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
{% if template.suffix == 'shorty' %}
<style>
h3 {
background: linear-gradient(
90deg,
#161311 0%,
#2b241e 20%,
#b88a3c 40%,
#f4d98b 50%,
#c69a47 58%,
#9a7332 72%,
#d9b15d 100%
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
</style>
{% endif %}
Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

5

Hi JustinasRMerchant

You can do it without touching the 500-character custom CSS field at all.

Add a body class in the theme.liquid

Open layout/theme.liquid and find the tag. Add a conditional class:

If it already has classes (most themes do), just append to them:

template.suffix picks up the part after the dot, so product.shorty.json gives you shorty.

In your assets/styles.css (or whatever your main stylesheet is called), add:


.template-shorty h3 {
  background: linear-gradient(
    90deg,
    #161311 0%,
    #2b241e 20%,
    #b88a3c 40%,
    #f4d98b 50%,
    #c69a47 58%,
    #9a7332 72%,
    #d9b15d 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Because the selector is .template-shorty h3 instead of just h3, it only fires when the page’s has that class, i.e., only when a product is rendered using product.shorty.json.

Since it now lives in styles.css, delete it from the section’s custom CSS box to free up your character limit.

6

And of course, you should also be able to do it without theme code edits.

On this special template, add a “Custom Liquid” section inside Template area.
Paste your CSS code like this:

<style>
  . . . your CSS code . . .
</style>

The code will be applied only to products which have this template assigned.

Size limit for “Custom Liquid” section is much higher than “Custom CSS” setting, so you should have no problem with that.

Also, “Custom CSS” applies some restrictions on the code – “Custom Liquid” does not.

7

Hi,

Since several solutions already use inline CSS, another clean approach is to create a separate stylesheet and load it only when the product.shorty.json template is being used.

1. Create a dedicated CSS file

Go to:

Online Store > Themes > Edit code > Assets > Add a new asset

Create:

product-shorty.css

Add your gradient CSS:

.product-shorty-gradient {
  display: inline-block;
  background: linear-gradient(
    90deg,
    #161311 0%,
    #2b241e 20%,
    #b88a3c 40%,
    #f4d98b 50%,
    #c69a47 58%,
    #9a7332 72%,
    #d9b15d 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

2. Load it only on the Shorty product template

Open layout/theme.liquid and add this before </head>:

{% if request.page_type == 'product' and template.suffix == 'shorty' %}
  {{ 'product-shorty.css' | asset_url | stylesheet_tag }}
{% endif %}

3. Add the class to the required heading

Instead of styling every h3 on the template, add the class only to the heading that needs the gradient:

<h3 class="product-shorty-gradient">
  Your heading text
</h3>

This is safer than targeting all h3 elements because other section headings, product recommendations, app content, or accordion headings on the same template will remain unchanged.

It also keeps the code outside the 500-character Custom CSS field and prevents the additional stylesheet from loading on the rest of the store.

8

Hey @JustinasR ,

You can add the CSS to your styles.css (or base.css, depending on your theme), but avoid targeting all h3 elements globally, as that will affect every h3 across your store.

Instead, scope the CSS to your specific product template. For example:

.template--product-shorty h3 {
background: linear-gradient(
90deg,
#161311 0%,
#2b241e 20%,
#b88a3c 40%,
#f4d98b 50%,
#c69a47 58%,
#9a7332 72%,
#d9b15d 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}

If your theme doesn’t output the template--product-shorty class on the <body>element, inspect the page using your browser’s developer tools to find the correct template or body class. You can then replace the selector accordingly, or wrap the relevant section in a custom class and target that instead.

Thank You !