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