I've styled the mini cart in webflow where the part of the page outside of the cart gets blurred out to draw the user's eye towards the cart. This looks fine in Webflow designer, but when I preview it, the blur effect is only applied to a thinner part along the top of the screen (see images for reference).

I had this resolved earlier, but I can't see to trace back to that version. I checked the CSS, and it has the blur effect in there. This is driving me crazy.

This is probably more of a Webflow question, but open to feedback if it's relevant.

----

On a separate note, I'm wondering if there's a way to wrap multiple divs so that it wraps as if they're a continuous line of text. In the attached example with products, the product name, separator/hyphen, and price are placed in separate divs. This is done because they're all variable text, but I'd like them to behave differently. I believe I set this up correctly in Webflow, but it's not translating in Shopify.

Example #1 –

Current:
Mineral Wellness Soak with Eucalyptus
–
$10.00

Desired:
Mineral Wellness Soak with Eucalyptus
– $10.00

Example #2–

Current:
Fuß Balm
–
$42.00

Desired:
Fuß Balm – $42.00

Hi,

Ich use GSAP for the fade in of the element on the website. The problem is, that when I scroll through some pages, some content doesn´t load with GSAP. But when I open the live webflow site without the conversation, it´s working. Does somebody know if I need to change something?
Or does somebody know an alternative the have the fade in effect when scrolling. I already had the native fade un animamtion from webflow, but it was very buggy, so maybe there is another solution?

Here a video to show: https://drive.google.com/file/d/1se2VYMPJMasZdOatwsVI7AR6Alh5Te_-/view?usp=sharing
And this is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

/* Initial styles for load animations /[animation="load"] { opacity: 0; transform: translateY(40px);}/ Initial styles for scroll animations */
[animation="scroll"] {
opacity: 0;
transform: translateY(40px);
}

<script>
gsap.registerPlugin(ScrollTrigger);

// On page load animations
document.addEventListener("DOMContentLoaded", () => {
gsap.to('[animation="load"]', {
opacity: 1,
translateY: 0,
duration: 1,
stagger: 0.25,
ease: 'power2.out',
});
});

// Scroll into view animations
gsap.utils.toArray('[animation="scroll"]').forEach((element) => {
gsap.fromTo(element,
{ opacity: 0, translateY: 40 },
{
scrollTrigger: {
trigger: element,
start: 'top 98%',
end: 'bottom 2%',
},
translateY: 0,
opacity: 1,
duration: 0.8,
ease: 'power2.out',
}
);
});
</script>

is the dynamic content like this that can be setup have to be CMS based? or i can make components and set up for li-block

What would be the best approach to working on a site/theme while there's a splash page live?

In my product header, I have a group of accordions with custom metafield content. This is setup as rich text both in Webflow and Shopify, but in Shopify, it doesn't render as rich text. It all appears as one continuous block of content.

Is there a way to get this to appear with rich text properties. In the example below, I'd like the text to be bulleted out. I'm mainly looking for bulleting, paragraph spacing, and bolding where needed.

Shopify example: https://shop.skinbarandstudio.com/products/colorescience-total-eye-3-in-1-renewal-therapy-spf-35

Hi all, we're seriously considering diving deep in to Liquify for our eCommerce tech solution. But before that I wanted to ask the community some questions:

• Are there are any frustrating limitations you've encountered?
• Do external libraries work properly? (ie. GSAP, SwiperJS, Finsweet Attributes, etc)
• Does it handle websites with lots of collections well? (ie. blogs, knowledge centre, etc.)
• Once the webflow site is developed, does configuring liquify and connecting everything in Shoppify take a long time?

Hope this post is allowed, please let me know otherwise. Very much appreciate any insights!

I've just started the process of transferring a theme to a client and I've had an odd bug. It works fine on my testing environment, but every page is showing a 404 on the client environment. Is there hopefully something obvious I've misssed?

What do I need to change that the ceeation_date will be shown in the contact form?

Hi,

I used a Code Snippet from Shopify dynamic Button for the direct Checkout. I know it´s not liquify direct, but maybe somebody knows what to do.

The direct checkout (f.e. works when I have something in the Cart, but doesn´t work when there isn´t something in the cart. So I think there is a problem with ids etc...

Here the code I used:
{% if product.available %}
<!-- Produktformular beginnt -->
{% form 'product', product, class: 'product-form' %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{{ form | payment_button }}
{% endform %}
{% endif %}

When I view the logs I have a few errors. When I look in the code, I don´t know what do change. Does these errors matter or not?

Is there a way to wrap products around text? In the attached screenshot, I have a subhead and body copy that takes up 2 column widths, and I'd like the products in this collection to start in columns 3 and 4 before wrapping to the next line.

In one section, I have a collection with just one item. I'd like to make the product item occupy the width of columns 3 & 4 so that it's wider than the regular product items. Is that possible as well?

Hi everyone, I've been trying for a hours to code a way of displaying the colors swatch of my product. I have two color display options, the first via a color-setting section that translates the name of a color to a HEX Code ,or in Image and then integrates it into a class (in case the customer wants to personalize their colors via specific names). The second option is to retrieve the color meta fields generated by shopify for products in certain product categories. It's in the second option that I'm having trouble assigning these colors to my product page.
I've tested this code ‘ <template x-if="option.toLowerCase() === 'color'">

{% for option in product.options_with_values %}
{% if option.name == 'Color' %}
{% for value in option.values %}
{% assign swatch_color = value.swatch.color %}
{% assign swatch_image = value.swatch.image %} {% endfor %}

<div
class="color-swatch"
style="{% if swatch_color %}background-color: {{ swatch_color }};{% elsif swatch_image %}background-image: url('{{ swatch_image }}');background-size: cover;{% endif %}"
></div>
{% endif %}
{% endfor %}


</template> ’ but as in the screen there's a display error.

I have tried many options, with AI, and I don't know the simpliest way to do it if someone can help me !
And I think that on this site you use the same logic, which I'd also like to incorporate. I haven't found any other discussions on colour swatch ..
https://bandwerk.de/products/vintage-band

Thank you !

When a product is sold out and I try to change the variants (e.g., size or color), the selected option doesn’t update correctly. It seems like there’s a bug in how the variant selection behaves.

Read-only: https://preview.webflow.com/preview/gooddesk-2-0?utm_medium=preview_link&utm_source=designer&utm_content=gooddesk-2-0&preview=714c6bed7cb355aab8979e48c6ad6e2a&pageId=65eebb01574038784679b79d&locale=en&workflow=preview

I tried using Webflow's default/native section ID for creating anchors, as well as Liquify's ID attribute, and yet both are being removed during conversion, and I'm ending up with a section ID like this: "shopify-section-template--23543634624785__contactcta"
Obviously prettier section IDs are preferable, especially for anchor links.
What can I do about this?
Thank you

Hi folks! I'm working on my first Shopify site, and I'm hoping Liquify Pro can bring my vision to life. I have this test page that I created (ignore the messy look), and I wanted to go through the conversion process before fully committing to this.

I followed the documentation in terms of setting up GitHub and exporting, and I've even used the Liquify Automated Support Service script. It didn't return any errors, but when I try uploading the Webflow zip to Liquify, I get the following error (see image).

The error doesn't tell me much, so any guidance on where to look would be helpful.

When I download pull the Github Code to my Computer and add some }, and push it back, will they stay at future conversions? Because they will be in code sections that have a liquify attribute

I used li-object="item.product_title" and li-object="item.variant_title" in the mini-cart. Is there a way to use these attributes in the normal cart? item. is already the name in the normal cart.

Thank you 🙂

I uploaded a Theme to Shopify for a client and he told me, that the normal Shopify Analytics doesn´t work with that theme. Is this possible or do I need to make some changes?

I've used the starter template, and run through Liquify and it works great.

During the conversion, I noticed it converts the reference to webflow.js into /assets/webflow.js.liquid.

Then, in the theme it references as {{ 'webflow.js' | asset_url }} and indeed it loads fine.

However, with my OWN webflow project I get a different behavior. I've generated a webflow from Relume, and I've added the webflow.js reference into the <head> in the site settings. On conversion, it does the same thing, creating an asset of 'webflow.js.liquid' - however, it won't load and it 404s. I'm not sure what the difference is or why it's not loading the same. Theme.liquid references it in the exact same way.

Is there anywhere where we can add global theme settings for clients like favicon, fonts, colors and such?

Hi - new to Liquify and kicking the tires. I would like to make sure that I understand this workflow correctly.

After the initial commit I make to my connected repo, any new pages that I create in my webflow project won't be converted into liquid page templates; but if I do create new sections (with the li-section tag) those will be merged and created in the published template, is that correct?

What about updating and changing those sections? Or, once published, do I have to do all of that in the theme files? If so, any guidance on keeping synched with my webflow project?

I can see both sides of this, but from a development workflow, this methodology has some gaps as well. When early in a project of developing a theme, much can change and it just means that the proper way to set this up is not necessarily a github flow, but to convert and manually upload the theme .zip.

Do I have that all about right?

Thanks

Anyone get a "branch isn't a valid theme" when trying to connect to a "main" repo? I tried doing this prior to starting the crawl and this happened. I decided to initiate the crawl anyways and check again but see liquify created a new repo option so I am waiting for it to finish.

Would I need another div or would ':inside' work? I am going for

{% assign limit = 3 %}
{% assign counter = 0 %}
{% for article in blogs['Release'].articles %}
{% if counter < limit %}
{% if article.image %}

Noticed this on my site https://huasna.com.

If I add more quantity, then is in stock to cart, the cart opens empty. Here’s a video showing the issue.

Liquify generates a srcset from an image tag - however, for some reason on my store it results in it displaying the image set in webflow, not the asset_url (which should be the second image of the product).

Why might this be happening? Attaching how my image tag looks like after the conversion.