📘

Heads up!

Theme components are only used by the new designer launched in June 2016. Not sure which designer you're using? Check here.

Reusable sections of pages that can be used on various pages. Users will be able add, remove, and reorder components to pre-specified sections on certain pages. Each component has its own markup, styles, and settings. Some components are site-wide (e.g. promotional banner) while others are page specific (e.g. HTML area or video embed).

Usage

Pages that want to display a list of components should simply call the render_components macro with a unique identifier.

Containing elements dictate the direction of layout of the components (column or row).

{{ components_helpers.render_components('index'}}

<!-- Renders into... -->

<section id="comp1">
</section>

...

<section id="comp9">
</section>

📘

Components are only used in the underlying rendering system and new component types cannot be defined, though you can edit installed components.

Editing Installed Components

After a components are installed into a theme, all of their generated source code will be available in the components/ directory. Any edits to these files will not affect other components or the source component. This allows components to be safely edited without breaking others.

Definition

Components should be styled to fit in any size container (within reason). Each component has its own directory under components with these files:

Full Example: Testimonials

<section id="my-component" class="component-rich-text-center row">
	<div class="col-xs-10 col-xs-offset-1">
		<div class="content row">
			<div class="col-xs-12 text-center">
				{{ settings["my-component/content"] }}
			</div>
		</div>
    <div class="row">
			<div class="col-xs-12 text-center">
				<a type="button" class="btn" href="{{ settings['my-component/button_url'] }}">{{ settings["my-component/button_text"] }}</a>
			</div>
		</div>
	</div>
</section>

#my-component {
	background-color: {{ settings['my-component/background_color'] }};
}

#my-component .btn {
	background-color: {{ settings['my-component/button/color'] }};
	color: {{ settings['my-component/button/text_color'] }};
	font-family: {{ settings['my-component/button/font_face'] }};
}

#my-component .btn:hover {
	background-color: {{ settings['my-component/button/hover_color'] }};
	color: {{ settings['my-component/button/hover_text_color'] }};
}

Common Mistakes & Errors:

Error when saving and edited component file
When editing the CSS or HTML of a component in the code editor, you may only use the settings that belong to that specific component. For example my-component/button/color. If you try to use a setting found in another component, for example my-other-component/button/color you will be presented with an error message when you try to save the file.