Theme.liquid java script

Shopify Discussion

Topic summary

Attempt to speed up a Shopify theme by merging all asset JS into application.js.liquid and replacing multiple script tags with a single (set to async/defer) caused broken sections when three scripts were removed: vendor.min.js, animations.min.js, and slideshow.js.

Advice focused on load behavior and dependencies: use either async or defer (not both), preserve the original script order, and note that many scripts are invoked from sections/snippets, so consolidating can break dependencies. Testing each file incrementally helped identify conflicts.

A key finding was duplicate loading: vendor.min.js, animations.min.js, and slideshow.js were being included twice. Recommendation: if they must remain in theme.liquid to keep functionality, remove their code from application.js.liquid to avoid conflicts, rather than removing them from theme.liquid.

For performance (since minifying/combining didn’t help), suggested focusing on: Largest Contentful Paint (LCP: time to render the main content), avoiding Cumulative Layout Shift (CLS: unexpected layout movement), and reducing JavaScript execution time. Also verify script sequencing and eliminate duplicates.

Code excerpts and screenshots were shared to show placement. No final resolution; next steps are to deduplicate critical scripts, maintain correct order, and target LCP/CLS/JS execution issues. The thread remains open.

Summarized with AI on December 21. AI used: gpt-5.
1

In my Assets Folder

i have created a file
application.js.liquid

and then transfer all codes from .js files on assets folder to my application file which i have created

then in theme.liquid file i have delete all .js scripts and paste this code in the last of theme.liquid

this code

but when i do this webiste few section got broke beccasue of these three codes

{{ ‘slideshow.js’ | asset_url | script_tag }}
{{ ‘animations.min.js’ | asset_url | script_tag }}

{{ ‘vendor.min.js’ | asset_url | script_tag }}

when i delte this website got broke when i leave this website is ok how to solve this problem please i am doing all this to increase my speed in getmetrix

learningdesign_0-1724385798420.png
learningdesign_0-1724385798420.png848×838 35.8 KB

2

Hi @learningdesign , You should use “async” or “defer” in the script tag do not use both. Replace the below script with your code. Also, Check the sequence of the code. Add the code to your file in the same sequence.

If this does not work please provide me the storefront URL.

1 Like
3

yes the sequence is correct with your code also it did not work

4


{%- capture dir -%}
{%- case request.locale.iso_code -%}
{%- when ‘ae’ or ‘ar’ or ‘arc’ or ‘bcc’ or ‘bqi’ or ‘ckb’ or ‘dv’ or ‘fa’ or ‘glk’ or ‘ha’ or ‘he’ or ‘kwh’ or ‘ks’ or ‘ku’ or ‘mzn’ or ‘nqo’ or ‘pnb’ or ‘ps’ or ‘sd’ or ‘ug’ or ‘ur’ or ‘yi’ -%}
rtl
{%- else -%}
ltr
{%- endcase -%}
{%- endcapture -%}

{% render 'thunder-injects' %} {% render 'head-preload' %}

{% if settings.favicon != blank -%}

{%- endif %} {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}

{% if page_description %}

{% endif %}

{%- unless settings.heading_font.system? and settings.body_font.system? -%}

{%- endunless -%}

{% render ‘social-meta-tags’ %}

{{ ‘app.css’ | asset_url | stylesheet_tag }}
{{ ‘product-grid.css’ | asset_url | stylesheet_tag }}

{% render ‘head-variables’ %}

{%- if tinyscript -%}{{ content_for_header }}{%- else -%}{% render ‘tiny-script-control’ %}{%- endif -%}

{% include ‘hulk_po_vd’ %}

{{ 'accessibility.skip_to_text' | t }}
{% sections 'header-group' %}
{{ content_for_layout }}
{% sections 'footer-group' %} {% render 'cart-drawer' %} {% render 'product-drawer' %} {% render 'search-drawer' %}

{{ ‘vendor.min.js’ | asset_url | script_tag }}
{% if settings.animations %}
{{ ‘animations.min.js’ | asset_url | script_tag }}

{% endif %}
{{ ‘product.js’ | asset_url | script_tag }}
{{ ‘slideshow.js’ | asset_url | script_tag }}
{{ ‘app.js’ | asset_url | script_tag }}

{%- if settings.free_shipping -%}
{{ ‘free-shipping.js’ | asset_url | script_tag }}
{{ ‘free-shipping.css’ | asset_url | stylesheet_tag }}
{%- endif -%}
{%- if request.design_mode -%}
{{ ‘theme-editor.js’ | asset_url | script_tag }}
{%- endif -%}
{% render ‘back-to-top’ %}
{{‘tiny-img-link-preloader.js’ | asset_url | script_tag }}
{% render ‘thunder-preload’ %}

this is my theme.liquid code and my sequence is

Vendor
animation
product
slideshow
app
scroll-shadow
predictive-search
freeshipping
theme-editor
tiny-img-link-preloader

please check what i am doing wrong here

5

Hi @learningdesign , I checked that your JS is called at the end. Can you share the screenshot where you have added your code exactly in the theme.liquid?

1 Like
6

Screen shot with full code

learningdesign_0-1724412001316.png
learningdesign_0-1724412001316.png1048×895 51.2 KB


{%- capture dir -%}
{%- case request.locale.iso_code -%}
{%- when ‘ae’ or ‘ar’ or ‘arc’ or ‘bcc’ or ‘bqi’ or ‘ckb’ or ‘dv’ or ‘fa’ or ‘glk’ or ‘ha’ or ‘he’ or ‘kwh’ or ‘ks’ or ‘ku’ or ‘mzn’ or ‘nqo’ or ‘pnb’ or ‘ps’ or ‘sd’ or ‘ug’ or ‘ur’ or ‘yi’ -%}
rtl
{%- else -%}
ltr
{%- endcase -%}
{%- endcapture -%}

{% render 'thunder-injects' %} {% render 'head-preload' %}

{% if settings.favicon != blank -%}

{%- endif %} {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}

{% if page_description %}

{% endif %}

{%- unless settings.heading_font.system? and settings.body_font.system? -%}

{%- endunless -%}

{% render ‘social-meta-tags’ %}

{{ ‘app.css’ | asset_url | stylesheet_tag }}
{{ ‘product-grid.css’ | asset_url | stylesheet_tag }}

{% render ‘head-variables’ %}

{%- if tinyscript -%}{{ content_for_header }}{%- else -%}{% render ‘tiny-script-control’ %}{%- endif -%}

{% include ‘hulk_po_vd’ %}

{{ 'accessibility.skip_to_text' | t }}
{% sections 'header-group' %}
{{ content_for_layout }}
{% sections 'footer-group' %} {% render 'cart-drawer' %} {% render 'product-drawer' %} {% render 'search-drawer' %}

{{ ‘vendor.min.js’ | asset_url | script_tag }}
{% if settings.animations %}
{{ ‘animations.min.js’ | asset_url | script_tag }}

{% endif %}

{{ ‘slideshow.js’ | asset_url | script_tag }}

{%- if settings.free_shipping -%}

{%- endif -%}
{%- if request.design_mode -%}

{%- endif -%}
{% render ‘back-to-top’ %}

{% render ‘thunder-preload’ %}

7

Hi @learningdesign , As you have added all the JS in a single file it might cause an issue because of dependency. As you know apart from theme.liquid many JS are used in sections and snippets which may create a conflict. To resolve this issue you need to break down your Javascript code. Add the JS file code one by one to your file and check if any error occurs or your theme breaks. This way you will know which file or code is creating the conflict.

1 Like
8

I have already did that these 3 codes are breaking website

{{ ‘vendor.min.js’ | asset_url | script_tag }}
{{ ‘animations.min.js’ | asset_url | script_tag }}
{{ ‘slideshow.js’ | asset_url | script_tag }}

9

Okay, I have checked these files are called twice on your store! That can also create a conflict in your code. If you add them to your code then remove them from the theme.liquid so they don’t render twice on the site.

1 Like
10

if i remove these 3 scripts from theme. liquid my website got broke

you mean i need to delete it from the application.js.liquid file where i copy all code ?

11

If removing these codes from theme.liquid breaks your website then leave them as they are and remove its code from your application.js.liquid.

1 Like
12

Can you help me in any one of this error which will make my website speed little better becasue this minify js did not have any effect on my website

learningdesign_0-1724417394809.png
learningdesign_0-1724417394809.png1751×742 61.4 KB

13

Hi @learningdesign , You can fix the speed issue by fixing the large content paint “Largest Contentful Paint”, “Avoid Large layout Shifts”, and “Reduce Javascript Execution time” issues. It will help you improve your website speed.