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

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
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
Shopify Expert
2648 60 642

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!
0 Likes
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