Rich Text
Last updated
Last updated
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Rich text".
| Settings | Meaning |
|---|---|
Section Width | Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) Width (1770px) Full width (100% of the viewport width). |
Padding for 'full width' option on desktop | Determine the left and right spacing of the full width layout. |
Show top border | Toggle the top border. |
Show bottom border | Toggle the bottom border. |
Border color | Apply a color to the border top and bottom. |
Enable negative top margin | Toggle to enablenegative top margin. Note: Move this section to overlap the section above. |
Negative top margin | Determine the section negative spacing from the top. |
Background color - Background gradient | Set color (or gradient) for the section background. |
Background image | Upload/Select an image as the section background. |
Enable column layout | Toggle Column |
Alignment | Select the alignment of the content to be either to the Left, Center or to the Right of the section. |
| Settings | Meaning |
|---|---|
Desktop | Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel). |
Tablet | Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel). |
Mobile | Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel). |
| Settings | Meaning |
|---|---|
Desktop | Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel). |
Tablet | Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel). |
Mobile | Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 150px, increasing arithmetically of 5px (pixel). |
| Settings | Meaning |
|---|---|
Heading | Enter in the heading for the block. |
Heading Font Size | Heading font size |
Heading Font Size Mobile | Heading font size on mobile |
Line height | Determine the line height of the heading text. |
Heading color | Apply a color to the heading for the block. |
| Settings | Meaning |
|---|---|
Description | Enter the text for the description. |
Description font size | Specify the font size of the description on desktop. |
Description font size on mobile | Specify the font size of the description on mobile. |
Description font weight | Select the font weight of the description to be either Normal, Medium, Semibold, Bold, Extra bold, or Black. |
Description line height | Determine the line height of the description text. |
Description top margin | Determine the spacing of the description from top. |
Description color | Apply a color to the description for the block. |
Content width | Determine the width of the content. Note: You can enter the width in units of % or px. For example: 60% or 800px. If content width is left blank, the the content width will be 100% of the container holding the content. |
| Settings | Meaning |
|---|---|
Style | Select the style of the button: Primary button Secondary button |
Label | Enter the text for the button. |
Link | Enter URL for the button to redirect to. |
Top margin | Determine the spacing of the button from top. |
Show button underline | Toggle to show or hide button underline. |
Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient | Set the text color, background and border color for both the normal and hover states of the buttons. |
Width (unit % or px) | Determine the width of the button. Note: Default is 270px. You can enter the width in units of % or px. For example: 30% or 270px. If width is left blank, the content width will be 100% of the container holding the content. |
| Settings | Meaning |
|---|---|
Top margin | Determine the spacing of the block from top. |
Bottom margin | Determine the spacing of the block from bottom. |
Icon color - Background color - Background gradient - Icon hover color - Background hover color - Background hover gradient - Border color | Set the color, background and ring color for both the normal and hover states of the icons. |
| Settings | Meaning |
|---|---|
Subheading | Enter in the sub heading for the block. |
Font weight | Select the font weight of the sub heading |
Subheading font size | Determine the font size of the sub heading. |
Subheading spacing top | Determine the spacing of the sub heading from top. |
Subheading color | Apply a color to the sub heading. |
| Settings | Meaning |
|---|---|
First description | Enter the text for the description top. |
Second description | Enter the text for the description bottom. Note: This content will be displayed when clicking the 'read more' button. |
Alignment | Select the alignment of the block content to be either to the Left, Center or to the Right. |
Description font size | Specify the font size of the description. |
Description top margin | Determine the spacing of the description from top. |
Description color | Apply a color to the description. |
Content width | Determine the width of the content. |
Read more | Enter the text for the Read More button. Note: The Read more button is displayed when the second description setting is filled in. |
Read less | Enter the text for the Read Less button. Note: This text will replace the text of the read more button when clicked. |
Button font size | Determine the font size of the "Read more/Read less" button. |
Button font weight | Select the font weight of the "Read more/Read less" button. |
Button top margin | Determine the spacing of the "Read more/Read less" button from top. |
Button label color - Button border color - Button background color - Button background gradient - Button label hover color - Button border hover color - Button background hover color - Button background hover gradient | Set the text color, background and border color for both the normal and hover states of the "Read more/Read less" button. |
Button width | Determine the width of the "Read more/Read less" button. |
Button top padding | Set the top padding top for the "Read more/Read less" button. |
Button bottom padding | Set the top padding bottom for the "Read more/Read less" button. |
