Shopify Liquid fine in Editor (Absent in published)

I have purchased the all in one reviews, connected the facebook review, looks great on Elfsight, got the liquid, followed the setup on shopify and Elfisight(though their visual help is dated), pasted the liquid into the page I needed the reviews to show up.

In editor it looks perfect as it should, even in the mobile version. But once saved, going to the actual page powercenter.dk it is nowhere to be found.

Tried the widget version they offered on Shopify and that too doesn’t show up. So I honestly don’t know what is going on here. Theme I’m using is Sense v. 13

So if anyone has a genius idea, I’d be so appreciative. Support from Elfsight is basically zero, got an email asking me to give them access to my shopify, I wrote back I upgraded just so they can, that’s nearly 3 hours ago. And it took over a day to get an answer. I am so frustrated that something like this isn’t moving forward, should just simply work.

  • Link to the page with the widget in question:
1 Like

Hi @Stephen_R and welcome to the Community :wave:

I deeply apologize for all the frustration caused by this situation!

I have to say that my colleagues from Support Team are better experts in the installation issues. I see that our support agent Ksenia is already working on your request. She’ll contact you as soon as possible :slightly_smiling_face:

thank you, I did reply to her and even upgraded my account on Shopify to allow her *your team to get access to my backend on shopify but it hasn’t been accepted yet. Where is your support team located? EU Time zones? Or US?

So basically this is what shopify has sent to me regarding the issue:

Jeff here. I carried out a couple of steps. I firstly did an inspect on the Storefront and could not see the sippet listed in the script.

I also checked on the elfsight syntax. The Liquid code snippet you’ve provided is for embedding an Elfsight widget into your Shopify store. Here’s a breakdown of the code:

  • The tag includes a source (src) attribute pointing to the JavaScript file needed for the Elfsight widget to function.
  • The data-use-service-core attribute is likely a custom data attribute used by the Elfsight platform for configuration purposes.
  • The defer attribute tells the browser to wait until the document has finished parsing before executing the script.
  • The
    tag is where the Elfsight widget will be loaded. The class attribute contains a unique identifier for the widget.
  • The data-elfsight-app-lazy attribute suggests that the loading of the widget should be deferred until it’s needed, which is a technique known as lazy loading.

Syntax recommendations (when the info is not displaying on storefront) - it’s suggested to place external scripts like this one in the theme.liquid file before the closing tag.

This is because scripts often need to be loaded early in the page lifecycle to function correctly.

If the Elfsight widget is not appearing on your storefront, there could be several reasons:

  • Script Loading: See above - The script might not be loading properly. Check the browser’s console for any errors related to the script.
  • Widget Initialization: The widget might not be initializing correctly due to missing or incorrect parameters.
  • Lazy Loading: If lazy loading is enabled, the widget might not load immediately upon page load. This is generally handled by the data-elfsight-app-lazy attribute, but there might be issues with the implementation.
    1. Verify the Script Tag: Ensure that the script tag includes the defer attribute, which tells the browser to wait until the page has finished parsing before executing the script. This helps improve performance and avoid blocking the rendering of the page.
    2. Check the Div Tag: Make sure that the div tag has the correct class that corresponds to your Elfsight widget and includes the data-elfsight-app-lazy attribute.
    3. Ensure Correct URL: Double-check that the URL in the script tag is correct and accessible. If there’s an issue with the URL, the script may fail to load.
  • Theme Conflicts: There might be conflicts with other scripts or styles in your theme that are preventing the widget from displaying correctly
  • Conflict with Other Scripts: Sometimes, scripts from other apps or custom code can interfere with Elfsight widgets. Try disabling other apps or custom scripts one by one to see if the issue resolves.
  • Outdated Elfsight App: Ensure that your Elfsight app is up-to-date. Outdated versions may have compatibility issues or bugs that prevent widgets from loading correctly.

If you’ve checked all these possibilities and the issue persists, I recommend reaching out to Elfsight’s support team. They’ll be able to provide more specific guidance and assistance. I see they also have an app on the App Store. It maybe worthwhile adding this to your apps and using their integration for a stress free experience.

I cannot believe a simple thing like this causes so much trouble. I’m thinking about canceling the membership on Elfsight if I don’t get any support today, I’ve reached out and the response time is really not very good. We’re stuck here with a non functioning product.

Hi @Stephen_R :wave:

Apologies for the delayed reply!

I see that Ksenia and our devs have resolved the issue for you. If you have any further questions, feel free to contact Ksenia, she’ll be happy to assist :slightly_smiling_face:

1 Like

Hey Max, you guys pulled through and you did a stellar job, cannot thank you enough, we were getting very close on resetting everything cause nothing was working. Turns out that the specific issue seems to be more connected to a system wide issue with Shopify Winter 24, so something on the backend of theirs is not publishing changes in themes, which is absolute torture. However your guys found a way to publish it never the less so we’re happy :slight_smile: Thanks and consider this case solved :slight_smile:

1 Like

Happy to hear that everything is great now!

In case you have any other questions or any assistance is needed, we are always here for you :wink: