Working with advanced text and heading blocks
Advanced text and heading blocks give you precise control over how your site’s messaging looks. Unlike standard blocks, these allow you to adjust spacing, colors, and typography for mobile and desktop screens independently, ensuring your shop looks professional on every device.
How to customize your text and headings
- Add the block: Click the + icon in the editor and search for Advanced Text. This block handles both headings (H1–H6) and standard paragraph text.
- Select your HTML tag: In the block toolbar, choose the appropriate tag. Use H1 for your main page title, H2 or H3 for sub-sections, and P for general descriptions. This helps search engines understand your page structure.
- Adjust the style: Open the settings sidebar on the right. Under Typography, you can change the font size, weight, and line height. Use the Color Settings to match your text to your brand colors.
- Set mobile-specific sizes: Click the small mobile or tablet icon next to the font size setting. This lets you shrink large headings so they don’t wrap awkwardly on phone screens.
- Refine spacing: Scroll down to Spacing Settings. Here you can add "Margin" (space outside the text) or "Padding" (space inside the block) to prevent your text from feeling crowded.
Practical scenarios for your shop
- Highlighting a sale: Use an Advanced Text block set to a bold H2 tag. Change the text color to a bright brand accent color and add a slight bottom margin to separate it from the products below.
- Clear product descriptions: Use the P (paragraph) tag but increase the Line Height to 1.6 or 1.8. This makes long descriptions much easier for customers to read.
- Announcement banners: Create a small, centered text block at the top of your page with a background color and white text to highlight "Free Shipping" or "Holiday Hours."
Troubleshooting common issues
- Text looks different on my phone: Check the mobile toggle in the Typography settings. You may have set a specific size for desktop that is too large for smaller screens. Reset it or choose a smaller mobile size.
- Too much white space between lines: This is usually caused by a high Line Height or a large Bottom Margin. Check the Spacing Settings in the sidebar and lower the margin value to 0 or 10px.
- The font doesn’t match the rest of the site: By default, the block inherits your "Global Styles." If you’ve manually changed the font family in the block settings, click the Reset icon (the small circular arrow) to revert to your site’s standard look.
Summary
Advanced text blocks are the best way to ensure your shop’s typography is readable and aligned with your brand. By using the mobile-specific toggles and proper HTML tags, you improve both the customer experience and your site’s SEO.
Next steps to consider:
- Setting up your Global Typography and Colors
- Using Row Layouts to organize your text and images
- Creating high-converting product descriptions
