---
title: "public"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/public'
  md: 'https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/public.md'
---
# 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{#Ki4xs}

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.

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

* * *
## Reference static resources{#bFGoI}

### Extract the resource path{#aNX5n}

Static resources can be accessed using the [asset\_url](https://developer.shopline.com/docs/sline/filter/asset-url.md) filter, which returns a URL for a remote static resource. The following shows an example.

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

### Reference CSS files{#l7rLl}

You can use the [stylesheet](https://developer.shopline.com/docs/sline/tag/stylesheet.md) tag to render a `<link>` tag. The following is an example of referencing the `base/index.css` resource in a theme layout file.

```html
<!-- 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{#PKlTl}

You can use the [script](https://developer.shopline.com/docs/sline/tag/script.md) tag to render a `<script>` tag. The following is an example of referencing the `base/index.js` resource in a theme section file.

```html
<!-- 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{#pMiyE}

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

```html
<!-- 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>
```