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

GD
Tourist
19 0 2

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!

Replies 7 (7)
GD
Tourist
19 0 2

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.

tim
Shopify Expert
2925 143 1047

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 4

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!
FervEngineering
Excursionist
17 0 10

That cheat sheet link is bringing back a 404.

sillycube
Shopify Partner
590 16 90

@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

BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview
Cenco
Tourist
3 0 0

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