Optimize Shopify CSS/JS Loading with Conditional Logic

Efficiently managing how CSS and JavaScript files are loaded on your Shopify store is crucial for improving performance and ensuring that only the necessary assets are loaded on each page. As Shopify developers, we know that loading unnecessary resources on every page leads to slower load times, which not only affects user experience and SEO but can significantly hinder the overall eCommerce experience.

Studies have shown that faster-loading websites lead to higher conversions and lower bounce rates, improving customer satisfaction and boosting sales. In fact, 53% of mobile users abandon a site that takes longer than 3 seconds to load.

In this post, we’ll explore how to conditionally load CSS and JS files based on the page template or URL path in your theme.liquid file. This technique will help you improve page speed by reducing the amount of unused CSS and JS, ensuring that your store is optimized for a seamless eCommerce experience.

Code Example & Explanation:

Let’s take a look at the code snippet and break it down step by step.

{% if template == 'index' %}
  {{ 'home.css' | asset_url | stylesheet_tag }}
{% endif %}

{% if template == 'index' or template contains 'page.about' %}
  {{ 'pages-shared.css' | asset_url | stylesheet_tag }}
{% endif %}

{% if template contains 'page.about' %}
  {{ 'page-about.css' | asset_url | stylesheet_tag }}
{% endif %}

{% if page.handle == 'find-a-store' %}
  {{ 'page-find.css' | asset_url | stylesheet_tag }}
{% endif %}

{% if request.path contains '/blogs' %}
  {{ 'page-blog.css' | asset_url | stylesheet_tag }}
{% endif %}

{% if template contains 'product' %}
  {{ 'product.css' | asset_url | stylesheet_tag }}
{% endif %}

{% if template == 'product' %}
  {{ 'product.css' | asset_url | stylesheet_tag }}
{% endif %}

{% if template contains 'product.custom-template' %}
  {{ 'product-custom-template.css' | asset_url | stylesheet_tag }}
{% endif %}

Step-by-Step Breakdown:

Load Styles for Homepage:

{% if template == 'index' %}
  {{ 'home.css' | asset_url | stylesheet_tag }}
{% endif %}

if template == 'index': This line checks if the current page is the homepage (using the index template). If true, the home.css stylesheet is loaded. This is useful for loading styles specific to your homepage, which may have unique layout and design requirements.

Load Styles for Two Type of Pages

{% if template == 'index' or template contains 'page.about' %}
  {{ 'pages-shared.css' | asset_url | stylesheet_tag }}
{% endif %}

if template == 'index' or template contains 'page.about': Here, we’re loading a shared stylesheet (pages-shared.css) for both the homepage and the “About” page (page.about). This reduces redundancy by reusing the same styles across multiple pages.

Load Styles for a Specific Page Template

{% if template contains 'page.about' %}
  {{ 'page-about.css' | asset_url | stylesheet_tag }}
{% endif %}

if template contains 'page.about': If the current page is the “About” page, we load page-about.css, which contains styles specifically tailored for this page. Using contains ensures this will work even if the template name has variations (e.g., page.about-custom).

Load Styles for a Page Handle

{% if page.handle == 'find-a-store' %}
  {{ 'page-find.css' | asset_url | stylesheet_tag }}
{% endif %}

if page.handle == 'find-a-store': This condition checks if the page’s handle is find-a-store, allowing us to load a specific CSS file for the store locator page. Page handles are great for targeting unique pages by their unique identifier.

Load Styles for URL Path Containing Specific Keywords

{% if request.path contains '/blogs' %}
  {{ 'page-blog.css' | asset_url | stylesheet_tag }}
{% endif %}

if request.path contains '/blogs': For blog pages, we’re using the request.path variable to conditionally load page-blog.css. This method checks if the URL contains /blogs, and applies blog-specific styles.

Load Styles for Specific Template Containing Product

{% if template contains 'product' %}
  {{ 'product.css' | asset_url | stylesheet_tag }}
{% endif %}

if template contains 'product': Finally, for product pages, we check if the template contains product and load product.css. This ensures that product-specific styling is only loaded on product detail pages.

Load Styles for Product

{% if template == 'product' %}
  {{ 'product.css' | asset_url | stylesheet_tag }}
{% endif %}

if template == 'product': This condition checks if the current page is a standard product page. If true, product.css is loaded, ensuring that general styles for all product pages are applied.

Load Styles for Specific Product Template

{% if template contains 'product.custom-template' %}
  {{ 'product-custom-template.css' | asset_url | stylesheet_tag }}
{% endif %}

if template contains 'product.custom-template': This condition loads product-custom-template.css if the page uses a custom product template. It’s useful for applying unique styles to specific product pages, such as limited-edition or special-layout products.

The difference between the product loading styles above:

• if template == 'product' checks if the current page is using the exact product template.
• if template contains 'product' checks if the current template name includes the word ‘product’ anywhere, which allows for matching variations like product.custom-template.

This makes contains more flexible for handling multiple template versions.

Best Practices:

When implementing conditional CSS and JS loading, keep the following tips in mind:

• Prioritize Performance: Load only the CSS and JS files needed for each page. Unnecessary resources slow down your site, leading to frustrated customers who are less likely to complete purchases.
• Reusable Styles: Consider creating shared CSS files for elements that appear across multiple pages (e.g., headers, footers) to minimize the number of files loaded.
• Security: Be mindful of potential security issues when using JavaScript. Always sanitize inputs and avoid inline JavaScript where possible.
• Scalability: As your Shopify store grows, it’s easy for conditional checks to get messy. Organize your conditions logically and use meaningful names for assets.
• Test on Multiple Devices: Ensure that your conditional logic works well on different devices and screen sizes, especially for mobile users, since they are the most affected by slower load times.

Common Mistakes to Avoid:

• Loading too many resources: Avoid excessive conditions that load too many small CSS or JS files, as this can increase HTTP requests. Consider bundling files when appropriate.
• Inefficient Conditions: If your conditions are too broad, you may end up loading resources unnecessarily. Use precise conditions like page handles or template names to fine-tune your asset loading.