The text element in Instant allows you to add and style typography on your pages. This guide covers inserting text, connecting dynamic content from Shopify, styling options, and creating reusable text styles.
Adding Text to the Canvas
Step 1: Open the Insert Panel
Navigate to the Insert panel in the left sidebar.
Step 2: Access Text Elements
Hover over the Text item. A popover will appear showing available text elements.
Default Text Elements
Element | Description |
Heading | Pre-styled for titles and section headers |
Paragraph | Pre-styled for body text and longer content |
Text | Basic text element for custom styling |
Step 3: Drag to Canvas
Select the text element you want to use and drag it onto your canvas.
Sizing the Text Layer
Once on the canvas, the text layer can be sized like any other element. In the right sidebar under Size, you have access to:
Width Options
Unit | Behavior |
Fit | Width adjusts to fit the text content |
Fill | Width expands to fill available space |
Fixed | Set a specific pixel width |
Relative | Width as a percentage of parent container |
Height Options
The same units (Fit, Fill, Fixed, Relative) are available for height.
Constraints
Min Width / Max Width — Set minimum and maximum width boundaries
Min Height / Max Height — Set minimum and maximum height boundaries
Text Content and Styling
In the right sidebar under the Text header, you'll find all content and styling options.
Style
Select a pre-defined text style to instantly apply consistent typography to your text layer. Text styles can be created and managed in the Styles panel.
Content
Click the Content field to directly edit the text. Type or paste your content here.
Dynamic Content
Click the database icon next to the Content field to connect your text to Shopify data. A popup appears with all available dynamic content options.
Available Dynamic Fields
Category | Fields |
Product Info | Title, Description, Description (HTML), Vendor, Material, Category, Tags |
Pricing | Price, Compare Price, Saved Amount, Saved Percentage |
Variants | Variant Title, Variant SKU, Quantity Available, Selected Option 1/2/3 |
Localization | Country Code, Country Name, Currency Code, Currency Symbol, Language Code, Language Name |
Cart | Cart Count, Cart Original Total Price, Cart Set Total Price, Cart Total Discount, Cart Total Price |
Ratings | Product Rating, Products Rating Count |
Other | Search Product Boost, Related Product Settings, Minimal URL, Rich Text Fields |
Note: Rich text fields from Shopify can be simple text or multi-line content.
Content Options
Below the content field, you have detailed styling controls:
Color
Set the text color using the color picker.
Font
Click to open the font popover where you can:
Search — Find fonts from the complete font library
Used — View fonts already used in your layout
Upload — Add custom fonts (supported formats: TTF, WOFF, WOFF2)
Removing Custom Fonts
Custom fonts cannot be removed from the font popover. To remove a custom font from your project:
Navigate to Project Settings
Go to the Fonts section
Locate the custom font you want to remove
Click to remove it
Note: Removing a custom font will affect all text elements using that font. Make sure to update those elements with a different font before removing.
Weight
Select the font weight (light, regular, medium, bold, etc.).
Size
Set the font size in pixels or other units.
Alignment
Control horizontal text alignment (left, center, right, justify).
Distribute
Adjust text distribution within the text layer.
Spacing
Configure typography spacing:
Line Height — Vertical space between lines
Letter Spacing — Horizontal space between characters
Accent
Apply text decorations:
Underline — Add a line below the text
Strikethrough — Add a line through the text
Additional Properties
Click Add Property to access more styling options:
Property | Description |
Case | Transform text to uppercase, lowercase, or capitalize |
Line Break | Control how text wraps |
Balance | Enable text balancing for improved readability |
Border | Add a border around the text layer |
Shadow | Apply shadow effects to the text |
Text Styles
Create reusable text styles for consistent typography across your project.
Creating a Text Style
Navigate to the Styles panel in the left sidebar
Click the plus (+) button to create a new text style
In the text style popover, configure:
Setting | Description |
Name | Give your style a recognizable name |
Font | Select the typeface |
Weight | Choose the font weight |
Color | Set the text color |
Size | Define sizes for one or more viewports (responsive) |
Tag | Assign a default HTML tag |
Spacing | Configure line height and letter spacing |
Click Add Property to also define Case, Accent, Line Break, and Balance
Managing Text Styles
Click the more options button next to any text style to:
Edit — Modify the style name
Duplicate — Create a copy of the style
Remove — Delete the style
Text Attributes
For additional control, select your text element and navigate to the Settings tab in the right sidebar.
HTML Tag
Under the Attributes header, set the semantic HTML tag:
Tag | Use Case |
Paragraph | Body text, descriptions |
H1 | Main page title (one per page recommended) |
H2 | Section headings |
H3 | Subsection headings |
H4 | Minor headings |
H5 | Small headings |
H6 | Smallest heading level |
Custom Class
Add custom CSS classes to your text element for advanced styling.
Note: Custom classes are available from the Pro tier and up.
Quick Reference
Task | Location |
Insert text | Insert panel → Text → Drag element to canvas |
Edit content | Right sidebar → Text → Content field |
Connect Shopify data | Right sidebar → Text → Database icon |
Change font | Right sidebar → Text → Font |
Upload custom font | Font popover → Upload (TTF, WOFF, WOFF2) |
Apply text style | Right sidebar → Text → Style |
Create text style | Styles panel → Plus button |
Set HTML tag | Right sidebar → Settings → Attributes → Tag |
Add custom class | Right sidebar → Settings → Attributes → Custom Class (Pro+) |