[Shopify]特定のstyleシートやJavaScriptファイルを一部のページにのみ適用する方法 - EC PENGUIN

[Shopify] How to apply a specific style sheet or JavaScript file to only some pages

September 21, 2020

I want to apply new-style.css only to newly created LP, but if I load it with theme.liquid normally, it will be applied to the entire site.

I thought I found the perfect method！

It is a method that can be used especially when you do not want to apply the JavaScript file to the whole stylesheet.

① How to apply to template with theme.liquid

First of all, it is a method to describe in the theme.liquid file.

“theme.liquid applies to all pages on your Shopify site.It ’s a very important and core liquid file.。

Generally, when adding a stylesheet or JS JavaScript file, describe it in the theme.liquid file like this.

// Apply stylesheet {{ 'new-style.css' | asset_url | stylesheet_tag }} // Apply JS file {{ 'new.js' | asset_url | script_tag }}

It's a different matter where to put it in theme.liquid, but the above code has applied the new-style.css and new.js files to the entire site.

But、、、

What I want to do this time is to apply it only to specific pages such as / pages / landing-page

The important thing is『What template is used for the page you want to apply』Based on this template, write it in theme.liquid.

point！

→What template is used for the page you want to apply

On the above page, page.new-lp is used as a template.

If you want to apply only to this page、

// Applies only to the template new-lp{%- if template contains 'new-lp' -%}
	{{ 'new-style.css' | asset_url | stylesheet_tag }}
{%- endif -%}

Is the solution。

If the template contains the text new-lp, it feels like applying new-style.css.

② Easier way to write on pages

If you just want to make it easier, write it directly in the liquid file on the page.

{{ 'new-style.css' | asset_url | stylesheet_tag }}

Like this, let's put it at the top of the template you want to apply from the code edit of the Shopify theme。

This method can also be applied, but if you are operating a large EC site or a site with multiple people, it is easier to understand at a glance which css and js files are applied in the theme.liquid file. think.

Precautions for application to specific pages / templates

From here, I have summarized the mistakes and precautions that may be made by the above method for your reference.

Attention ① When the template is applied to multiple Pages

Attention ①

new-lp templateSince new-style.css is applied to, the above style sheet is also applied to other pages that use the template. Basically, if the same template is used, the same style and js processing is required. There should be no problem because it should be.

If you want to apply different styles and JS processing on the same template, duplicate the template and apply it individually.

Note (2) CSSJS files are in the Asset folder

Attention ②

Please put the cssjs file you want to apply in the Asset folder because the following code specifies the url of Asset.

{{ ‘new-style.css’ | asset_url | stylesheet_tag }}

Attention ③ Do not mistake the stylesheet and script tag

Attention ③

Please note that the description of the last tag part is different between the css file and the JS file.

Style sheet
{{ ‘new-style.css’ | asset_url | stylesheet_tag }}

JS file
{{ ‘new.js’ | asset_url | script_tag }}

How was it。

There is no doubt that it will be easier to see if you can apply JavaScript JS files individually to the page as well as style sheets.In the case of a large site, it would be very long if you put them all in the same css file.

I'm glad if you can use it as a reference！