Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I use VSCode to customise a default Shopify theme (Dawn) and installed Shopify Liquid plugin.
It formats on save but it putting `px` on a new line, preventing the style from being effective.
The code below is one of the examples.
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}
px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}
px;
}
I guess it is not due to `printWidth` but rather using moustache in the style as it always happens when I use it within style tag but I don't know how to fix this issue.
Please help me...
It sounds like you are having an issue with the Shopify Liquid plugin for VSCode formatting the code in a way that is causing the styles to be ineffective. This is likely happening because the plugin is inserting a new line after the px units in the style declarations, which is not allowed in CSS.
To fix this issue, you can update the settings for the Shopify Liquid plugin to prevent it from inserting new lines after certain characters or patterns. You can do this by opening the user settings for the plugin in VSCode and adding the following configuration:
"liquid.format.insertSpaceAfterKeywords": ["px"],
This will prevent the plugin from inserting a new line after the px units in your style declarations, ensuring that the styles are applied correctly.
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025