How do I find the inspect element code to edit styles?

Store Design
, ,

Topic summary

A user is trying to locate CSS code in their Shopify store to modify styles visible in the browser’s inspect element tool, specifically CSS variables defined under :root. The code appears in an attached screenshot showing style properties.

Troubleshooting steps provided:

  • Check the theme.liquid file’s <head> section for inline <style> tags containing :root variables
  • Look in the css-variables.liquid snippet file, which typically contains CSS variable definitions
  • Use browser’s “View Source” (Ctrl+U) to trace where the CSS originates

Resolution:
The code was confirmed to be in the css-variables.liquid snippet. The user shared the complete file contents, which includes CSS variables for typography, colors, button styling, and responsive breakpoints. A solution was provided to either:

  1. Modify the CSS directly in the @media screen and (max-width: 768px) section of css-variables.liquid
  2. Adjust settings through the theme customizer interface

A separate user posted a similar request about modifying table padding and text labels on their product page.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello guys Please help me for this issue!

I am trying to find the line of code in my shopify store to edit styles in the picture below. I can’t find them.

You help will be highly appreciated

Untitled.jpg
Untitled.jpg1920×1080 206 KB

2

Hello @HazaraBoy ,
Please share your store URL.

1 Like
3

The inspector is telling you it’s directly in the rendered HTML view the source of the page directly with ctrl+u and look for where that CSS is, probably inside the tag, and take a look at what the surrounding code is like which can help find it when looking through theme files.

Then in some themes CSS variables are either in theme.liquid , or snippets like head.liquid, or a css-variables.liquid.

1 Like
4

here is the link of my webiste: https://naif-market.myshopify.com/

password: seubau

5

Hello @HazaraBoy ,
You can find this code in your theme.liquid file: https://prnt.sc/l-JIUM8-C1oI
go to your theme.liquid file & search for ‘root’, it is in tag
Hope it will help.
Have a good day..!!

1 Like
6

Thanks @Himanipanchal07 for your reply

but i can’t find it there

HazaraBoy_1-1668254199909.png
HazaraBoy_1-1668254199909.png1920×1080 274 KB

1 Like
7

Hi @HazaraBoy ,
Can you please share screenshot of line no: 30 to 45?
I think there will be snippet for this.

1 Like
8

HazaraBoy_0-1668254833324.png
HazaraBoy_0-1668254833324.png1920×1080 264 KB

1 Like
9

@HazaraBoy
It is coming from snippet ‘css-variables’, you can check into that.

1 Like
10

Unfortunately there also i can’t find it

Please check here is all the code

css-variables liquid

{%- style -%}
:root {
–typeHeaderPrimary: {{ settings.type_header_font_family.family }};
–typeHeaderFallback: {{ settings.type_header_font_family.fallback_families }};
–typeHeaderSize: {{ settings.type_header_base_size | default: ‘32’ | append: ‘px’ }};
–typeHeaderWeight: {{ settings.type_header_font_family.weight }};
–typeHeaderLineHeight: {{ settings.type_header_line_height | default: 1.4 }};
–typeHeaderSpacing: {{ settings.type_header_spacing | default: ‘25’ | divided_by: 1000.00 | append: ‘em’ }};

–typeBasePrimary:{{ settings.type_base_font_family.family }};
–typeBaseFallback:{{ settings.type_base_font_family.fallback_families }};
–typeBaseSize: {{ settings.type_base_size | default: 16 | append: ‘px’ }};
–typeBaseWeight: {{ settings.type_base_font_family.weight }};
–typeBaseSpacing: {{ settings.type_base_spacing | default: ‘50’ | divided_by: 1000.00 | append: ‘em’ }};
–typeBaseLineHeight: {{ settings.type_base_line_height | default: 1.4 }};

–colorSmallImageBg: {{ settings.color_small_image_bg | default: ‘#eee’ }};
–colorSmallImageBgDark: {{ settings.color_small_image_bg | default: ‘#eee’ | color_darken: 3 }};
–colorLargeImageBg: {{ settings.color_large_image_bg | default: ‘#1c1d1d’ }};
–colorLargeImageBgLight: {{ settings.color_large_image_bg | default: ‘#1c1d1d’ | color_lighten: 13 }};

–iconWeight: {{ settings.icon_weight | default: ‘5px’ }};
–iconLinecaps: {{ settings.icon_linecaps | default: ‘miter’ }};

{% if settings.button_style == ‘round-slight’ %}
–buttonRadius: 3px;
–btnPadding: 11px 25px;
{% elsif settings.button_style == ‘round’ %}
–buttonRadius: 50px;
–btnPadding: 11px 25px;
{% else %}
–buttonRadius: 0px;
–btnPadding: 11px 20px;
{% endif %}

{% if settings.edges == ‘round’ %}
–roundness: 15px;
{% else %}
–roundness: 0px;
{% endif %}

{% if settings.product_grid_style == ‘gridlines-thick’ %}
–gridThickness: 2px;
{% elsif settings.product_grid_style == ‘gridlines-thin’ %}
–gridThickness: 1px;
{% else %}
–gridThickness: 0px;
{% endif %}

–productTileMargin: {{ settings.product_grid_image_margin | default: ‘10’ }}%;
–collectionTileMargin: {{ settings.collection_grid_image_margin | default: ‘10’ }}%;

–swatchSize: {{ settings.swatch_size | default: ‘40’ }}px;
}

@media screen and (max-width: 768px) {
:root {
–typeBaseSize: {{ settings.type_base_size | default: 16 | minus: 2 | append: ‘px’ }};

{% if settings.edges == ‘round’ %}
–roundness: 15px;
–btnPadding: 9px 25px;
{% else %}
–roundness: 0px;
–btnPadding: 9px 17px;
{% endif %}
}
}
{%- endstyle -%}

11

There is no way i just copy and past the same code somewhere

12

@HazaraBoy
You can update this code

@media screen and (max-width: 768px) {
 :root {
    --typeBaseSize: {{ settings.type_base_size | default: 16 | minus: 2 | append: 'px' }};

 {% if settings.edges == 'round' %}
  --roundness: 15px;
  --btnPadding: 9px 25px;
 {% else %}
  --roundness: 0px;
  --btnPadding: 9px 17px;
 {% endif %}
 }
}

or go to customize-> theme settings → Update your settings as per your need

2 Likes
13

Can you help me with a similar challenge? Trying to figure out where I can change description to technical data and change the table-cell-padding-block to .5 rem
https://www.coastalcoffeecollective.com/products/new-product-copy