Can't use variable in between {% stylesheet %} tags in template?

Highlighted
New Member
19 0 0

Hi,

I have a template set up for storefront location pages. I'm successfully pulling in all of my data properly. Part of that data is a URL to a header background image that shows the individual storefronts. This stylesheet code works properly when hard coding the image URL. I've also tested to make sure the image URL is being pulled in by simply having the URL output onto the page. However, when I use the variable in place of the hard coded URL, within these stylesheet tags, it doesn't work. Do variables not work within the liquid stylesheet tags?

{% stylesheet %} 
	#landing-header { 
		background:url("{{bg_image}}") no-repeat center top fixed #fff;
		background-size:cover;
	} 
{% endstylesheet %}

Again, the variable works perfectly outside of the stylesheet tags. I've tested it by both printing out the URL on the page, and even putting it in an img tag to show the image. It just doesn't seem to be working when using the variable, as shown above.

Any suggestions would be appreciated. Thanks!

0 Likes
Highlighted
New Member
19 0 0

I actually solved this myself. You can use standard style tags instead of liquid stylesheet tags, and the variables will work. As long as it's in a template file, and not the page file.

0 Likes
Highlighted
Shopify Expert
2684 67 841

Just to confirm --  you can not use liquid inside theses tags:

Like the schema tag, javascript and stylesheet tags do not output anything, and any Liquid inside them will not be executed. Each section can have one javascript tag and one stylesheet tag.

https://help.shopify.com/themes/development/theme-editor/sections#javascript-and-stylesheet-tags 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
Highlighted
New Member
1 0 0

Add your global/default style in {% stylesheet %} tag and for dynamic style create HTML <style> tag. I used this method.

Please read here: https://help.shopify.com/en/themes/development/sections#javascript-and-stylesheet-tags

0 Likes
Highlighted
Tourist
4 0 1

It's already been a long time already, but I figure a lot of people would land here looking for a "Liquid" way of adding CSS styles.

You might be looking for {% style %} {% endstyle %} instead of {% stylesheet %} since the intention is to output CSS and not a file.

Reference: [https://www.shopify.com/partners/shopify-cheat-sheet] inside "Theme Tags.

 

Style Theme Tag from Shopify cheatsheetStyle Theme Tag from Shopify cheatsheet

 

 

Need some help with your website?
Contact me at fcruz.multicreativa@gmail.com, I would love to help you!
0 Likes