The Text Element is one of the most powerful elements that Shogun has to offer - it's one of the most used elements within Shogun! To get started, drag one onto your page!

When a Text element is selected, its formatting controls appear in the settings panel on the right of the editor:

Styling is controlled from the Main section of the settings panel on the right-hand side of the editor while a Text element is selected. The full selection of controls appears here, but a smaller selection of commonly used controls appears by your cursor as you type and highlight text in the element itself.

Note, styles applied in the settings panel on the right will only be applied to text typed after your cursor from that point, or to currently selected text. To change the styling of existing text, simply select it first and then apply the changes.

The Text element can style text to be Bold, Italic, Underlined, or Strikethrough (with a line crossing it out). This may be overridden by the settings of your chosen font and its variant, as discussed under Font, below.

The Paragraph Style will change the designation of the selected text. The styles that can be selected are Body text and Heading 1 through 6. Changing these values will automatically update the selected text to use the Heading or body text style from your theme, though you can also adjust this afterwards.

Designating certain text as Headings is also important for accessibility and SEO, as search engine crawlers and screen readers will search for Heading elements to help them summarize the page. Remember that Headings should ideally be used in descending order, e.g., Heading 1 for a page title, Heading 2 for paragraph titles, and so on.

Shogun makes use of the Google Font library, so any font listed there is available by default. Just scroll through the fonts or type the name of the font you're looking for to apply it, or select Default to revert the font back to your theme's default for its Paragraph Style. From here, you can also change the size of your font, and switch between variants of your font if they exist (e.g., Normal, Bold, and Extra Bold).

If you want to use a font from an external source, such as your e-commerce platform files or the Adobe Font Library, you'll need to set it up in Shogun first. Click the button below for more information:

You can use our color picker to make your text any color you want, using either RGB values, Hex Code values, or a saved color you previously set. You can also change the Alpha value (the A value in the color picker) to give your text transparency.

The background color, indicated by a paintbrush, will apply a "highlight" behind your text of the designated color. Note that this only applies to the selected text - if you want to change the background color of the entire Text element, you can do so from the Background section further down in the settings panel.

Alignment can be set from one of four options. Left to right, they are:

Justified will default to left-aligned until there is enough text to cover multiple lines, at which point it will begin "Justifying" the text to keep it as square as possible.

The List & Indentation controls are, left to right:

The style of your bullet points and numbered list is inherited from your store's Theme. As indentation is increased, the relevant style of bullet point will be selected.

Numbered lists will start a new sub-list, beginning at 1, as the Indentation is increased. If indentation is decreased, the numbering will pick up where it left off, so long as it is still part of the same paragraph/list.

These controls will adjust the height between each line of text and the space between each letter, in pixels. They will automatically adjust as Font Size is adjusted, but you can also set these values manually if needed. These boxes accept decimals.

Clicking this button will reset your text back to the default state, removing any formatting (Alignment, text decoration, etc). This can also be helpful if your text has inherited any formatting from somewhere you copied and pasted it from.

The Main section also has a Proportionally resize text control and an Insert... option.

Pages built before Text V2 may still have older Text V1 elements, which show their formatting toolbar above or below the text box instead of in the settings panel. These elements keep working as before. If you'd like to use the controls described above, delete the V1 element and replace it with a Text element from the Elements panel.