How to Set Up the Highlight Text Section in Concept

The Highlight Text section lets you create a bold storytelling area with inline headings, text, images, line breaks, and custom Liquid content.

docs__concept__how-to-set-up-the-highlight-text-section-in-concept__01.webp

This section is useful when you want to create a strong visual message, brand statement, campaign tagline, or editorial-style content block.

In Concept, the Highlight Text section can combine multiple blocks on the same line, so you can mix text and images together instead of using a standard paragraph layout.

How to Set Up the Highlight Text Section in Concept

Steps:

Add the Highlight Text section
  • From your Shopify admin, open Online Store > Themes.

  • Click Customize on your Concept theme.

  • Open the template where you want to display the section.

  • Click Add section.

  • Select Highlight Text.

  • Click Save.

After adding the section, you can configure the section heading, text alignment, highlight style, content blocks, colors, and spacing.

Configure the section heading
  • Open the Highlight Text section in the theme editor.

  • Use Heading to add an optional heading above the main highlight content.

  • Use Heading size to control the heading size.

  • Use Heading alignment to align the heading area.

  • Use Heading tag to select the HTML tag for the heading.

  • Use Subheading if you want to show smaller text above or near the heading.

  • Use Description to add supporting text below the heading.

  • Use Button label and Button link if you want to add a call-to-action button.

  • Enable Button external if the button opens an external link.

  • Enable Button icon if you want to show an arrow icon inside the button.

Set the main text alignment
  • Open the Text alignment setting to control the desktop alignment of the highlight content.

  • Open Text alignment mobile to control the alignment on mobile devices.

  • Choose the alignment that best matches your layout, such as left, center, or right.

  • Click Save.

These settings apply to the main content blocks inside the Highlight Text section.

Add Heading blocks
  • Inside the Highlight Text section, click Add block.

  • Select Heading.

  • Add the heading text.

  • Choose the Heading size.

  • Choose the Heading tag.

  • Configure the highlight style if you want part of the heading to be visually highlighted.

Heading blocks are displayed inline with other blocks, so they can be combined with text blocks, image blocks, and line breaks.

Add Text blocks
  • Inside the section, click Add block.

  • Select Text.

  • Add your text content.

  • Use Text font to choose the text style.

  • Use Text size to control the text scale.

  • Select Custom text size if you need more control over size, line height, letter spacing, or capitalization.

  • Enable Secondary color if you want the text to use a softer color style.

  • Configure the highlight style if you want part of the text to stand out.

Text blocks can be used together with heading blocks to create a flexible editorial-style sentence or phrase.

Add Image blocks
  • Inside the section, click Add block.

  • Select Image.

  • Upload or select an image.

  • Use Image width and Image height to control the image size on desktop.

  • Add a Link if the image should be clickable.

  • Add Accessibility info when the image has a link.

  • Use Mobile image if you want to show a different image on mobile.

  • Adjust Image width mobile and Image height mobile for smaller screens.

Image blocks are displayed inline with the text content, making them useful for icons, stickers, product cutouts, or decorative visuals.

Add Line break blocks
  • Inside the section, click Add block.

  • Select Line break.

  • Place the block where you want the content to move to a new line.

  • Enable Disable on mobile if you want the line break to apply only on desktop.

Line break blocks help you control the text flow when combining multiple inline blocks.

Add Custom Liquid blocks
  • Inside the section, click Add block.

  • Select Custom Liquid.

  • Add your Liquid, HTML, or custom content.

  • Click Save.

Use this block only when you need custom output that is not available through the standard Heading, Text, Image, or Line break blocks.

Configure highlighted text
  • Open the highlight settings in the section or inside a supported block.

  • Choose a Highlighted text style.

  • Available styles include options such as text, full text, half text, underline, marker, stencil, and scribble.

  • If you select Scribble, choose the scribble style you want to use.

  • Enable Highlighted reveal if you want the highlight effect to reveal with animation.

  • Use Color highlight or Gradient highlight to control the highlight color.

Highlighted text works with formatted text. Select the text you want to highlight in the editor and apply italic formatting to mark it as highlighted.

Configure colors and section layout
  • Use Text color to change the main text color.

  • Use Background color or Background gradient to change the section background.

  • Use Highlight color or Highlight gradient to style highlighted text.

  • Use Button text color, Button background color, and Button gradient to style the section button.

  • Adjust Padding top and Padding bottom to control section spacing.

  • Enable Divider to show a separator line.

  • Enable Narrow to keep the section content in a narrower container.

  • Enable Rounded to make the section container rounded.

Highlight Text behavior

  • The section can display multiple content blocks inline.
  • Heading, text, image, custom Liquid, and line break blocks can be combined in one layout.
  • Image blocks can use separate desktop and mobile images.
  • Line break blocks can help control how content wraps across lines.
  • Highlight styles can be applied at the section level or block level, depending on where the setting appears.
  • The section is designed for storytelling content, campaign text, brand statements, and decorative text layouts.

Troubleshooting

If the section does not appear, make sure the Highlight Text section has been added to the correct template.

If highlighted text does not show as expected, make sure the text you want to highlight is formatted correctly in the editor.

If the image appears too large or too small, adjust the image width and height settings in the Image block.

If the layout wraps in an unexpected way, add or move a Line break block.

If the mobile layout does not look right, check Text alignment mobile, Mobile image, and the mobile image size settings.

If the button does not appear, make sure Button label is filled in.

If custom Liquid does not render as expected, check the Liquid code added inside the Custom Liquid block.


Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.