Customizing settings with embedded CSS and style tags

Online Store and Theme Development
1

Question adding to your schema settings and then taking the set values and assigning them to the css…

As an example: I added a height setting to the announcement bar in the Dawn Theme in the schema for announcement-bar.liquid.

{
  "type": "range",
  "id": "announcement_bar_height",
  "min": 0,
  "max": 100,
  "step": 1,
  "unit": "px",
  "label": "t:sections.announcement-bar.settings.height.label",
  "default": 30
}

Is it fairly typical that once the theme is customized, and the customizer enters a value for the height, to take that value in the same section and embed it in a style tag in CSS class? E.g. do something like this? Or is there a way to do this without the style tags where I have css embeded in my liquid sections and css embeded in the asset style sheets for the same section? Is there a way to retrieve this value {{section.settings.announcement_bar_height}} outside of the announcement-bar.liquid section in base.css as example–where I don’t have to look in multiple places to see where CSS is applied?

.announcement-bar { height:{{section.settings.announcement_bar_height}}px; };
2

In general you’re correct. If you add settings to your section and want to use those values as CSS you’ll need to implement it in that scope. So via inline CSS, style tags or libraries like Tailwind.

I usually prefer to implement a style tag adding a CSS variable that I can then use in my CSS file.

<style>
  .block-id-{{ block.id }} .countdown { 
    --countdown-desktop-size: {{ block.settings.number_size }}px;
  }
</style>

//...HTML/liquid

//...Schema

.countdown {
  width: var(--countdown-desktop-size);
}

Or something like that. Could also be a section selector.

3

Thanks so much for your insights. I just couldn’t wrap my head around what I was doing, but you really explained very well and I totally get it now. I like your solution too!

1 Like
4

Thank you mate - happy to help :pray: