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! 

Shogun currently has two versions of the Text Element: V1 and V2. V2 is being rolled out to stores over the next few weeks, but some stores may still have access to the V1 elements during this time, and any existing V1 elements won't be automatically updated to V2 to ensure stability.

You can tell which version of the Text element you currently have selected by checking the following details:

The Text V2 Element's most distinctive feature is that while it is selected and you're editing text, the Text Formatter will appear either above or below the text box in question. It will look like this:

The Text Formatter controls for V2 are instead kept in the Control Panel on the right of the Page Editor, and will look like this:

The instructions on how to use each element differ depending on which Version you are using, and have been separated out into V1 and V2 instructions below.

The text editor gives you a lot of options to style your text. You can choose from bold, italic, underlined and striked out.

You can also choose to give your text the sub- or super-script.

You can choose from some pre-define styles too! These include styles for headers and normal divs. These can be found in a dropdown menu of the toolbar.
​

Adding a Hyperlink to your text is super simple and can be useful for linking your users to other resources from within your text.

You can choose the Target of your hyperlink, you can have the link open in a new window or not.

It's possible to change the font that you are using in your Text Element. We provide the option to use built in fonts, or fonts that are pulled in from your theme. You can check out our Custom Font article for more information on how to add your own fonts.

Font size can be changed with the text editor. This can be useful when styling your content. 

You can edit the font weight in the text editor.

Using the Line Height option, the height of the line of your content can be modified to better suit your needs.

The Letter Spacing option allows you to change the letter spacing of your content.

Changing the text color and the background color of that text is super easy within Shogun using the Text Element.

It's possible to change the alignment of your text within the Text Element.

This can give you some great options to customize your content.

Adding numbered and bullet points to your page is a great way of listing content on your pages. The Text Element can help you with this.

Changing the text direction in Shogun is super simple. This can be helpful for supporting right-to-left languages.

Adding inline images to your Text Elements can be super helpful.

You can align this image to have your text wrap around this using the alignment options. First, select the image, and then select the alignment from the toolbar.

You can change the text element style to match your content, or to allow you to customize this to your needs. The 'Theme Style' will inherit the CSS from your theme, whereas the 'Custom Style' option will reset all of the styles of your text except for the font face that you are using.

For example, if the theme is set to hide bullet points on unordered lists, then the 'Theme Style' will also have hidden bullet points, but the 'Custom Style' will show the bullet points.
​

Styling can be controlled via the Main tab of the Control Panel on the right hand side of the editor, while a Text element is selected. The full selection of controls will appear here, but a smaller selection of commonly used controls will appear by your cursor as you type and highlight text in the element itself

Note that styles applied in the Control 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 Struckthrough (with a line crossing it out). Note that 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 font. The styles that can be selected are Paragraph, and Headings 1 through 6. Changing these values will automatically update the selected text to use the Heading or Paragraph 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, EG 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 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 (EG Normal, Bold and Extra Bold)

If you want to use a font from an external source such as your Ecommerce's 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 tab further down in the Control 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 are 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 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.