public

The public static resource directory is used to store static files required by the theme, including but not limited to:

CSS: files with .css suffix
JavaScript: files with .js suffix
Media assets: such as images (PNG/JPG/SVG), and fonts (TTF/WOFF)
Other files: such as JSON configuration files and PDF documents

Directory structure

To optimize resource management when developing themes, common static assets are generally placed in the public directory for global access. However, resources specific to sections or blocks are stored in their dedicated directories.

The following is an example showing part of the static resource directory extracted from a theme.

public
├── base              
│   ├── index.css 
│   └── index.js
└── images
    ├── image-password-login.png

Reference static resources

Extract the resource path

Static resources can be accessed using the asset_url filter, which returns a URL for a remote static resource. The following shows an example.

{{"base/index.css" | asset_url()}}  <!-- Outputs: https://**/public/base/index.css -->

Reference CSS files

You can use the stylesheet tag to render a <link> tag. The following is an example of referencing the base/index.css resource in a theme layout file.

<!-- layout/theme.html -->
<!DOCTYPE html>
<html>
  <head>
    <!-- Reference the CSS resource file -->
    {{#stylesheet "base/index.css" | asset_url() media="all" /}}
    
    {{#content "header" /}}  <!-- Header placeholder -->
  </head>
  <body>
    {{#content "layout" /}}  <!-- Content placeholder -->
    
    {{#content "footer" /}}  <!-- Footer placeholder -->
  </body>
</html>

Reference JavaScript files

You can use the script tag to render a <script> tag. The following is an example of referencing the base/index.js resource in a theme section file.

<!-- sections/contact-form/contact-form.html -->
{{#script "base/index.js" | asset_url() /}}	<!-- Reference the JS resource file -->
<div class="contact-form color-{{section.settings.color_scheme.id}}">
  <div class="page-width">
      ...
    </div>
</div>

Reference image files

The following is an example of referencing the image-password-login.png image resource on a store's password protection page.

<!-- sections/main-password/main-password.html -->
<div class="main__media">
  {{#if section.settings.image}}
    {{#component "image" data=section.settings.image /}}
  {{#else/}}
    <!-- Reference the image resource file -->
    <img src="{{`images/image-password-login.png` | asset_url()}}" alt="background_img" loading="lazy" />
  {{/if}}
</div>

Was this article helpful to you?

SHOPLINE

Legal