How to Add custom Style tag in Liquid in Shopify
Drive 20-40% of your revenue with Avada
In Shopify, although Liquid has just launched since 2006, it plays an important role in Shopify business as the backbone of themes. Liquidity tags also are so essential for the Shopify web contribution. Considered as the programming logic, Liquid tags will be an effective tool to tell templates what to do. There are several main tags that the Shopify users should differentiate such as
- Iteration tags: It is considered as a useful tool to run blocks of code when they are repeated.
- Control flow tags: It is created to make the decision if blocks of Liquid code get executed or not.
- Theme tags: It will be the source to define theme layouts and snippets, specify the template and break up returned arrays into more than one page.
- Variable tags: this tool is for creating new variables.
All the Tags are included in {% %} characters, for example, {% schema %}, {% javascript %} and {% stylesheet %}. However, there are some certain tags which enable taking on parameters such as for and cycle.
One of the Liquid tags is style element, which is contained multiply in each HTML document. With a Shopify data attribute, the Liquid structure such as {% style %} tag interprets as an HTML <style> tag. The Shopify store owners can specify this kind of tags in HTML elements by render in a browser. Besides, the custom-style extension of the native <style> element allows defining styles in the main document that can take advantage of several special features of Polymers styling system.
When running on browsers, the custom-style document without non-native Shadow DOM will be needed to be sure that they do not leak into local DOM. This guiding article How to Add custom Style tag in Liquid in Shopify includes simple steps will guide the store owners to install the custom style tag in Liquid. Moreover, it also helps them approach the basic knowledge about Liquid tags as well as Liquidity in Shopify.
How to add custom Style tag in Liquid in Shopify
Step 1: Add a new snippet
After accessing the Shopify store app, firstly the users can edit the HTML/CSS page by tapping on the Snippets folder.
And then the store owners can look at the contents of the files.
In the second step, admins continue by clicking on Add a new snippet.
Step 2: Place style tag
At this step, admin can continue by placing color settings as a {% style %} tag. This step is editing theme which allows the store owners to make their stores beautiful with updated live color.
The <style> tag is used to define style information for an HTML document.
In this example, online sellers can set the background color:
{% style %}
.hero__background-color-container {
background-color: {{ section.settings.background_color }}
}
{% endstyle %}
Conclusion
There is a noticeable feature of custom-style that the Shopify store owners should care about. As part of Polymer elements, all features are available when defining styles. For example, <style> elements within <dom-module>. In addition, these types of custom-style extension just are used for defining document styles, and they are totally outside of local DOM.
Besides, online merchants can read more about Liquidity such as:
- Liquid handle: How to Strip/Slug a String
- Liquid Variables: assign, capture, increment, increment
- Liquid include: How to include a file in Liquid
- Liquid paginate: Split into multiple pages
- Liquid include: How to include a file in Liquid
- Liquid style: How to Add custom Style tag in Liquid
Liquid
