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.
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025