Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Containers - the outermost element on a page.  A page is typically composed of multiple containers such as the header, footer, body containers, etc.

Info
titleWhen should I create new containers?

You'll want to create new containers for sections that you plan on reusing in other areas of your theme, otherwise, simply adding new sections for additional elements will be sufficient. (For those familiar with the older storefront themes, this is akin to adding new snippet templates.)


Section - within each container there are one or more sections.  A section is a logical grouping of child elements.  For example a header container may contain two different sections for a mobile menu bar and a desktop menu bar.  

...

The following tools are available.

IconDescription

Image Added

Delete this element (and all children) from the hierarchy

Image Added

Edit the settings for this element.

Image Added

Add a child element (only visible if the element supports children)

Image Added

Open/Close (only shown for Modals and Side-panels)

Image Added

Hover over this to display a drop down menu of more advanced tools listed below.

Image Added

Download the element hierarchy from this point as a CJSON file. This can be saved off and used later.

Image Added

Copy the element onto the clipboard.

Image Added

Cut the element out and place on the clipboard.

Image Added

Zero out the margin and padding for the element (and optionally a certain amount of levels lower)

Image Added

Wrap a new parent element around this element. Useful if you forgot to place a link around an image for example.

Image Added

Duplicate the entire element and children.

Image Added

Hide this element. The element will not show when the page loads until something, like a button, triggers the element to show.

Image Added

Add the element to the library. This allows you to save off groups of elements into a reusable building block.