Rich Text

To add this section, please follow below steps:

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Click Add section and choose "Rich text".

Section settings

General

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.

Section top padding

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).

Section bottom padding

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).

Block settings

[BLOCK] Heading

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.

[BLOCK] Text

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.

[BLOCK] Button

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.

[BLOCK] Social media

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.

[BLOCK] Subheading

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.

[BLOCK] Content

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.