Changing font-size through type : range

New Member
1 0 1

Hey,  good morning to you all.

I am having some strange behaviour while trying to modify a font-size in a footer.

I am using the debut theme as my base and doing some customizations for learning purposes.

I use Firefox developer edition for my debugging

I had setup some settings in footer.liquid . In this settings I am allowing the customer to change the font-size of my footer menu.

I used the type range for that.

This is the way I used it :

    "type": "range",
    "id": "font_size_footer_menu",
    "min":  22,
    "max":  38,
    "step":  1,
    "unit": "px" ,
    "label": "Font size",
    "default":  22


The json goes fine through theme kit , no problem whatsoever

It also renders on the browser the slider for the range. Looking fine too.

But what is not being captured for some reason is the "px"  as a unit .

Look at what happens in  the browser :

using Firefox developer editionusing Firefox developer edition



font-size: 22;

The px does not render .

Isn´t that odd ?

If I include manually , using firefox inspector , the px at the end of css line than it works fine.


Any ideas on what I did wrong ?

I tried many diffenre things ramdonly like :

  • changed the unit to rem
  • reviewed the json file
  • put a space between the " and the px
  • put a space before the comma on json- (don´t laugh , I am a begginner ,please)
    "unit": "px" ,

 Maybe this is something someone already had in the past and have an easy fix.

Maybe I can not change the font size with the range in a footer menu ?

Well, hopefully someone can help out on this.

Much appreciated

Jeff Borges




Replies 3 (3)
6 1 2

Hello Jeff. We haven't investigated in depth on our side a way to render that px from the schema but what we usually do is the below workaround:

{{ settings.type_footer_headings | append:'px' }} 

 Do not know if you found a resolution on your own already but I post it here if anyone encounters this in the future.


New Member
1 0 0

The unit refers to the range display in the admin. This could be pixels, pounds, ounces, cars, etc ...



Shopify Partner
2298 413 538


That is the expected behavior. You can simply add "px" after the number.

font-size: {{ section.settings.font-size}}px; 

Kind regards,

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.