---
title: "component"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/docs/sline/tag/component'
  md: 'https://developer.shopline.com/docs/sline/tag/component.md'
---

# component


    Used for rendering specified components and supports the following two types:
- Global components: stored in the [component](https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/components.md) directory and can be called across modules.
-  Private components: stored in the [sections](https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/sections.md) or [blocks](https://developer.shopline.com/docs/online-store-3-0-themes/theme-structure/blocks.md) directory and are restricted to use within the current module only.

If you need to use variables outside of the scope, you must pass them in using the `hash` parameter. There is no need to pass `hash` for the Sline global object.

    



```sline
{{#component file_path [hash...] /}}
```





    
        ## Required Params

        
            - `file_path` `string`: The file path for the component. Global components: Use an absolute path, which is the filename located under the `components/` directory. Private components: Use a relative path, starting with `./`.
        
    



    
        ## Optional Params

        
            - `hash...` `any`: Dynamic hash parameters, a collection of key-value pairs (formatted as key=value) that can be passed in without limitation on their number. These parameters are used to provide the necessary variable information to a component. Inside the component, these parameters can be accessed and utilized via the [props](https://developer.shopline.com/docs/sline/object/props.md) object.
        
    



    
        ## Examples

        
### Using a global component

            Call the global component `components/title.html`:

            
```sline
{{#component "title" /}}
```
            

            
        
### Using a private component

            Call `title.html` within the same directory from `sections/header/header.html`:

            
```sline
{{#component "./title" /}}
```
            

            
        
### Passing parameters to a component

            Pass the variable title from `sections/header/header.html` to `sections/header/title.html` within the same directory:

            
```sline
<!--! sections/header/header.html -->
{{#component "./title" title=section.settings.title show=true /}}

<!--! sections/header/title.html -->
{{#if show}}
    {{ title }}
{{/if}}
```