Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Theme Editor color picker breaks liquid files in the assets folder when choosing branding colors #1654

Open
naxorn opened this issue Nov 8, 2022 · 5 comments
Open

Theme Editor color picker breaks liquid files in the assets folder when choosing branding colors #1654

naxorn opened this issue Nov 8, 2022 · 5 comments

Comments

@naxorn
Copy link

naxorn commented Nov 8, 2022

Issue

If a user chooses a dynamic source for the color picker in the Theme Editor, such as Brand > Primary Color 1, any .liquid files in the assets folder that rely on the setting will output {{ shop.brand.colors.primary[0].background }} instead of the css color.

Expected Behaviour

If the file theme/assets/test.css.liquid has the following

.some-class {
    background-color: {{ settings.theme_color }}; /* set as Brand > Primary Color 1 */
}

it should become

.some-class {
    background-color: #112233; /* set as Brand > Primary Color 1 */
}

Actual

Instead it does this

.some-class {
    background-color: {{ shop.brand.colors.primary[0].background }}; /* set as Brand > Primary Color 1 */
}

Steps to Replicate

  1. Create a color picker in the theme's settings, such as
{
  "type": "color",
  "id": "theme_color",
  "label": "Theme Color",
  "default": "#000000"
}
  1. Choose a dynamic color source, such as Brand > Primary Color 1
    image
  2. Create a test.css.liquid file in the assets folder of the theme
.some-class {
    background-color: {{ settings.theme_color }};
}
  1. Add the css file to the theme to get the link to the generated file, such as
{{ 'test.css' | asset_url | stylesheet_tag }}
  1. View the file and it will show {{ shop.brand.colors.primary[0].background }} instead of the css color, such as #112233
.some-class {
    background-color: {{ shop.brand.colors.primary[0].background }};
}
@alezzzzz
Copy link

alezzzzz commented Feb 2, 2023

Having this exact problem.

@willbroderick
Copy link

willbroderick commented Feb 6, 2023 •
edited

Also having this problem in our themes. Partner Support referred me to this GitHub Issue.

@nick-addison-applications
Copy link

Having the same issue. A quick way to fix this issue is to move the css variables into the <head> tag of layout/theme.liquid. The liquid variable: {{ shop.brand.colors.primary[0].background }} seems to work outside of the assets directory.

@naxorn naxorn mentioned this issue Jul 6, 2023
Open
@fevish
Copy link

fevish commented Jul 24, 2023

+1 I have the same issue. I'd like to follow best practices while working on client's themes without creating my own custom convention for calling brand colors/assets.

image

Shopify please fix!

@binarymonkey84
Copy link

I came across this bug myself too. Reported to Shopify Plus support who told me "heavily customised themes aren't supported", or something to that effect.

Nothing to do with customised themes, since I've replicated the same issue on other themes from the Shopify Theme Store installed as theme trials (e.g. not possible to change any of the original coding).

This is a clear bug on Shopify's side. You're supposed to be able to use Liquid in css.liquid files, all we're doing is reference a settings.my_setting_name, the problem is introduced by Shopify within Theme Customiser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@alezzzzz @willbroderick @fevish @binarymonkey84 @nick-addison-applications @naxorn