Broken site

Hey @Seth, I get that it can be quite frustrating especially at the start, so I try my best to help you out:

In regards to the variant price: For now, just use x-text="price" instead of li-js-price="price". We're currently working on li-js-price="product.price", but I think it's not fully working as of right now

In regards to the HTML: I think you need to put the li-settings:html="Icon" on a div instead of a Webflow code embed. I tried it myself and that worked fine.

Is there anything else that I missed that's not working? :)

Hi @Seth , I totally understand you. It takes a bit of time to get used to it.
I can recommend the debugging page from our documentation: https://www.liquify.pro/docu/debugging
And don’t hesitate to ask here in Discord. Most of the time, you just need a second eye to find the issue.

So, li-js-price and li-object cannot be combined yet. It is also incorrect in our cloneable. Thanks for sharing; I’ve changed it. So just remove the li-object or, as Jan recommended, you can also use x-text="price" to get the current price of the selected variant.

I have put the li-settings:html bug on embeds on our list. We need to dig into this. For now, I also recommend using li-settings:html on a div.

Let me know if anything else needs adjustment!

Hi @Seth, can you send us the webflow export? Thanks 🙂

Thanks, that worked. Mostly struggling to understand Liquify's documentation. Maybe you could put together an AI chatbot to answer specific questions? I am looking into using metafields next, and it would be great to have a reference point!

You can try using our gpt: https://chatgpt.com/g/g-Ct5t51rih-liquify-copilot

Where do you struggle the most? so we can optimice the documention.

And can you also send us the webflow export with the html svgs so we can solve the problem on this. That would be super nice

That's awesome, didn't realize it existed! It's difficult to add anything not already done in the cloneable or discord, most likely because I'm unsure which attributes are necessary. It's hard to tell what each thing does and when it's needed. I think your target market is low/no-code designer-developers that need it to be as untechnical as possible. When I go to add anything custom, which is the purpose of using Webflow for a custom theme, it takes a lot of guesswork and creativity to create, and half the time I just can't figure it out.

Super excited about the potential though

Hi @Seth, thanks for your feedback! To unlock Liquify’s full potential, I highly recommend getting more comfortable with Liquid, the template language of shopify. There are plenty of youtube tutorials available on this topic. Liquify is incredibly powerful, so it can feel overwhelming at first, but don’t worry. If you get stuck, just ask here, and we’ll figure it out together. I promise you’ll make progress quickly!

Hi @jonas.halbstark , I get an error when trying the GPT

Seems to not work in the chatGPT app, only browser

Doesnt really give me the right answer though

yes, the gpt is sometimes on the wrong path.
But here is a documentation about the li-settings:custom attribute: https://www.liquify.pro/docu/getting-started#Liquid-Settings

you need this in order to get a color selector in shopify. Then you can use li-attribute:stxle="color: {{ section.settings.color }}" for example

Thanks! I didnt see color in there! I would like to create a color picker with standardised colors that are set beforehand, is that possible?

for this i would use the color settings. JSON Should look like this

{
"type": "color",
"id": "color",
"label": "Test Color",
"default": "#000000"
}

So you add a code emebde with the attribute li-settings:custom and the json above inside.

Ok cool, and how do I link/add it to my button?
I am used to Udesly where I could add an attribute to the button itself but I get this works a little different?

Like this

on the button you add this attribute: li-attribute:style="color: {{ section.settings.color }}"

for color we dont have a settings attribute yet. for this you can use the li-settings:custom attribute. Here is a list of all the possible settings you can apply: https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings

Thanks! I am going to look into it. Would maybe be cool if you add one element with color settings to the Template, so I can have a look how it is set up! Or am I overlooking this?

Like this?

yes 🙂

you can add a default color and a better lable if you want 🙂

and with the id you can reference it as an object -> {{ section.settings.color }}

Nice okay!

Thanks!

no problem 🙂

Ah I dont see the color picker in Shopify, probably made a mistake

These are the attributes on my button. Maybe the placement of my custom embed is not ok?

everything looks correct. can you send me the webflow export?

are u using the github connection?

can you check the logs?

No just uploading as Shopify theme! Havent used github before, but it is not a previous version.

How do I check the logs?

Ah here

Thats fine. The Attribute is quite new. Thats why it says there is an error

Okay! Will send you the theme file

Hey Jonas, do you know what's the problem?

can you send me also the webflow export @Kevin

For sure

found it. We had a recent change on the li-settings:custom. The value of the attribute needs to be fuild. So you need to do something like: li-settings:custom="color"

So basically add "color" here

On the custom embed

Yes

Ok the color picker shows up in the customiser now, but it doesnt actually change the button text color.

Maybe the mistake is here in this attribute?

The field is available, but seems not connected to the button

Think this is where I go wrong: You can now use the Setting inside your Section like this: style="font-size: {{ section.settings.font_size }}"

I am assuming the name of the attribute should just be style, but webflow doesnt allow this

Like it should be inline css?

the problem is that li-attribute and li-settings is not yet compatible on one element. I would use alpine js for this. thats the easyst way. so instead of li-attribute:style just write x-bind:style="color: {{ section.settings.color }}"

Changing a text color is super basic right?

I am a bit afraid I will have trouble adding basic options now haha

Can you explain why x-bind:style as name?

I was also wondering if I can use the Shopify navigation, but have only read the docs in "Getting started" so far

Btw if I end up using Liquify I dont mind making a payment for it, I noticed it is free now

at the moment we dont have a li-settings:color. We concentrated more on li-settings:custom because it gives you way more power on these special uscases

Alright ! Well once I figure it out its cool haha

so the problem is, that we webflow does not allow the style attribute on elements. Thats why we need a workaround for this. One way would be to use our li-attribute tag.. but thats currently not possible to use it on the same element as li-object.

We use alpine js a lot inside of liquify. x-bind:style is a alpine diractive and another way to get around the webflow limitation. https://alpinejs.dev/directives/bind

But i would actually use a custom element from webflow.. because there you can use the style attribute

Ah that is a good idea

By the way, I noticed that while uploading the sorting for the convertions is acending, and when its done its decending. So I accidentaly downloaded the wrong convertion and uploaded that one in Shopify haha

yes also noticed that. we working on it

I am gonna switch to Github anyways, but thought to let you know

Ok perfect

yes thats a very good idea!

Would be cool to have a little border around it with indication "Last convertion"

How long have you guys been working on this? Its very impressive dont get me wrong, I just have used Udesly before so it is a bit different and need to get used to how Liquify works

Still cant get it to work here unfortuately

on the first look i would say you can not use the style attributes. thats not possible inside html. So i would use only one: style="color: {{ section.settings.color }}; background-color: {{ section.settings.color }}"

if you use another li-settings:custom you need the add a new embed with the other settings inside

Ah not multiple style attributes? Right

yes

Makes sense!

Thanks, will try

Hmm did not make a difference

Can you send me the current Webflow Export?

Yes!

so one problem is the tag of the custom element. Can you change it to "a" instead of "button"

than we have a problem with that many tags on the element thats why the style attribute gets currently removed during the conversion. We are now working on this issue.
To solve it quickly for you now, i would try to create a structure like this: <div li-settings:checkbox="Show Button"><a li-settings:url="Button Link"><div class="button" li-settings:text="Button Text" style="color: {{ section.settings.color }}; background-color: {{ section.settings.color }}">Shop this look</div></a></div>

Okay so built the button element from mulitple elements instead, will try that!

That worked, awesome

Thanks Jonas!

Nice 🙂 we are working on the bugs!