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

GD
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
GD
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
tim
Shopify Expert
2926 143 1021

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!
sahilbuddhadev
New Member
1 0 1

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

atFranCruz
Tourist
4 0 3

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!

That cheat sheet link is bringing back a 404.

0 Likes

@FervEngineering yes, there was a typo in the link 

@atFranCruz Just use <style></style> to wrap css inside and you can add liquid, e.g.

.btn-add-to-bundle, .btn-add-to-cart {
    background-color: {{ section.settings.button_color }};
  	color: {{ section.settings.button_text_color }};
  }

For {% stylesheet %} {% endstylesheet %}, it's used to render section-contained style. If you want to reuse the style for many themes, put the style here. More info about javascript and stylesheet tag

SPO - SEO App to research keywords & edit social link preview
BYOB - Build Your Own Bundles
0 Likes
Cenco
New Member
2 0 0

Good solution because it keeps up your liquid syntax highlighting. That's what I was looking for!

0 Likes