The Statement section reveals a bold, multi-line message word by word or line by line. It can play as visitors scroll or animate when it enters the screen, with a solid color, an image for each line, or a video background. Available in Be Yours 10.0.0 or later.
Demo Usage
Beauty demo — Theme Features
The opening hero uses the standalone Statement section with lines including “Be Yours 10.0.0 is here.”, “Every section, your palette.” and “Three ways to open a page.” Scroll through the top of the page to see the reveal effect.
STEPS
1. Add the Statement Section
- From your Shopify admin, go to Online Store > Themes and click Customize.
- Open the page or template where you want to display the statement.
- Click Add section, open the Storytelling category, and select Statement.
- Click Save when finished.
2. Add and Configure Line Blocks
Every line of the statement is a separate Line block. The section supports up to 6 Line blocks.
- Select an existing Line block or click Add block > Line to add another line.
- Use Description to enter the words for that line.
- Set Emphasis to As the statement or Smaller.
- Enter an exact word from the line in Highlight word to emphasize it when highlighting is enabled.
- Choose an Image to appear behind the line when Background is set to Pictures, one per line.
- Drag blocks to change the order of the message.
Tip: Keep lines short so that the text remains easy to read on mobile.
3. Choose the Reveal Animation
| Setting | Description |
|---|---|
| Reveal | Choose As the page scrolls or When the section is in view. |
| Scroll length | Set how far visitors scroll through the pinned animation, from 150 to 350 vh. Only shown for As the page scrolls. |
| Height | Set the section height from 40 to 100 vh. Only shown for When the section is in view. |
| Reveal by | Animate each Word or each Line. |
| Statement size | Adjust the text scale from 3 to 14 vw. |
| Desktop content alignment | Align the statement Left or Center. |
| Uppercase | Display statement text in uppercase. |
| Unrevealed text opacity | Control how visible the text is before it is revealed (0–60%). |
| Make section full width | Extend the section to the full page width. |
As the page scrolls keeps the section pinned while the message reveals. When the section is in view runs the reveal without pinning the section.
4. Set the Background
Under Background, choose one of these options:
- Colour: Show the message on a solid background.
- Pictures, one per line: Use images selected in the individual Line blocks. In scroll mode, the background follows the active line. In view mode, the first available image is displayed.
- Video: Select a Shopify-hosted Video, with an optional Video on phones. For best results, use a mobile video of the same length as the desktop video.
Use Overlay opacity (0–80%) with image or video backgrounds to improve text contrast. This setting does not appear for the solid-colour background.
5. Add Content After the Statement
In After the statement, configure the optional content shown with the statement:
- Description: Add supporting text.
- Button label: Enter the call-to-action text; leave it empty to hide the button.
- Button link: Choose the destination for the button.
- Scroll cue text: Add a short scroll prompt, or leave it blank to hide the cue.
6. Customize Highlight and Colors
Highlight
- Turn on Enable highlight.
- Choose a Highlight style, such as Marker, Circle, Underline, Bold underline, Modern underline, Sketch underline, Squiggle, Heavy squiggle or Solid color.
- In each Line block, enter the word to highlight using Highlight word. The word must match the text in that line.
Colors
- Turn on Use color scheme and select a Color scheme to apply a predefined palette.
- Alternatively, leave it off to set individual colors for Background, Text, Solid button background, Solid button label and Highlight.
7. Notes and Troubleshooting
- No reveal effect? Check the Reveal mode and preview the section on the storefront by scrolling through it.
- The wrong background image appears? Check the image assigned to each Line block and whether the reveal is set to scroll or view mode.
- Video does not appear? Select a video in the Video setting. Without a desktop video, the section falls back to a solid-colour background.
- Highlighted word is missing? Confirm that Enable highlight is on and the Highlight word matches a word in the Line block. This section uses a dedicated highlight field rather than italic formatting.
- Text looks too large on phones? Reduce Statement size, shorten individual lines, or select Smaller for a line.
- Need more than six lines? The section supports a maximum of six Line blocks.
Version note: The standalone Statement section was introduced in Be Yours 10.0.0. See the Be Yours release notes.
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
How to Set Up the Scroll Video Section in Be Yours
How to Set Up the Store Directory Section in Be Yours