Appearance
Curved text
This guide describes setting up the Curved text section.
Use the section to provide messages for visitors by displaying text that's aligned to an arc or "curve" on your store's pages.
The previous video demonstrates how to add a Curved text section.
For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks
Set up a Curved text section
To set up a Curved text section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Curved text section.
Note
The section can be added into any page, except Checkout and Giftcard pages. To add the section into the current page, select Add section > Curved text. Refer to Shopify help: Add a section
From the side menu, select Curved text.
Select a setting described in the following table.
| Section setting name | Description |
|---|---|
| Text | In the Text box, enter text to display inside the section. Use this text to share information with your customers about your brand, describe a product, make announcements, or welcome customers to your store. |
| Link | In the Link box, enter a URL or select a link to a store page. The link opens when a visitor selects the section's text. |
| Link > Connect dynamic source | To display a link from a dynamic source, select the Connect dynamic source icon beside the Link box, and then choose a metafield to add. Refer to Shopify help: Metafields |
| Design > Wave height | Adjust the Wave height slider between 200px and 800px to set a height for the wave or arc of text inside the section. |
| Design > Wave width | Adjust the Wave width slider between 200px and 800px to set a width for the wave or arc of text inside the section. |
| Design > Speed | Adjust the Speed slider to set a scroll speed between 0.5x and 2x for text inside the section. |
| Text > Mobile font size scale | Adjust the slider Mobile font size scale to set a size between -2n and 7n for text inside the section. This setting applies to mobile display devices. Refer to Typography. |
| Text > Desktop font size scale | Adjust the slider Desktop font size scale to set a size between -2n and 10n for text inside the section. This setting applies to desktop display devices. Refer to Typography. |
| Text > Font | Select the Font radio buttons to set the section's text to use the same font as Heading or Body text. If you select the Heading option, text effects are not applied to the section's text. |
| Animation > Enable animation | Select the Enable animation checkbox to show/hide text animation effects. With this setting enabled, an animation scrolls the text repeatedly across the section in a wave motion. |
| Animation > Pause on hover | Select the Pause on hover checkbox to turn on/off Pause mode. With Pause mode enabled, when the cursor moves over the section, the text animation stops scrolling or "pauses". |
| Animation > Direction | Select the Direction radio buttons to set the animation to move the section's text from Right to left or Left to right. |
| Color > Color scheme | Use the Color scheme dropdown to set the section's color scheme to Primary, Secondary, Tertiary, or Quaternary. Refer to Colors. |
| Use gradient for background | Select the checkbox Use gradient for background to turn on/off using a gradient as the section's background. |
| Custom CSS | In the textbox, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS. |
| Remove section | Select Remove section to delete the section from the current page. |