# Rich Text

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Flg8MBgeTrohMijNQHlCL%2Frich%20text%201.jpg?alt=media&#x26;token=195e1097-740b-44dd-831a-d7dbcd06f1fe" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Fxj8tJ5wQzSNXt0ThKyFa%2Frich%20text%202.jpg?alt=media&#x26;token=1abd97e7-d880-446b-8c3d-50e26b3350e7" alt=""><figcaption></figcaption></figure>

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

<table><thead><tr><th width="329">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section Width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full width (100% of the viewport width).</strong></mark></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determine the left and right spacing of the full width layout.</td></tr><tr><td>Show top border</td><td>Toggle the top border.</td></tr><tr><td>Show bottom border</td><td>Toggle the bottom border.</td></tr><tr><td>Border color</td><td>Apply a color to the border top and bottom.</td></tr><tr><td>Enable negative top margin</td><td>Toggle to enablenegative top margin.<br><br><em><mark style="color:orange;">Note: Move this section to overlap the section above.</mark></em></td></tr><tr><td>Negative top margin</td><td>Determine the section negative spacing from the top.</td></tr><tr><td>Background color - Background gradient</td><td>Set color (or gradient) for the section background.</td></tr><tr><td>Background image</td><td>Upload/Select an image as the section background.</td></tr><tr><td>Enable column layout</td><td>Toggle Column</td></tr><tr><td>Alignment</td><td>Select the alignment of the content to be either to the Left, Center or to the Right of the section.</td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="310">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>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).</td></tr><tr><td>Tablet</td><td>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).</td></tr><tr><td>Mobile</td><td>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).</td></tr></tbody></table>

### Section bottom padding

<table><thead><tr><th width="310">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>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).</td></tr><tr><td>Tablet</td><td>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).</td></tr><tr><td>Mobile</td><td>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).</td></tr></tbody></table>

### Block settings

### \[BLOCK] Heading

<table><thead><tr><th width="330">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Heading</td><td>Enter in the heading for the block.</td></tr><tr><td>Heading Font Size</td><td>Heading font size</td></tr><tr><td>Heading Font Size Mobile</td><td>Heading font size on mobile</td></tr><tr><td>Line height</td><td>Determine the line height of the heading text.</td></tr><tr><td>Heading color</td><td>Apply a color to the heading for the block.</td></tr></tbody></table>

### \[BLOCK] Text

<table><thead><tr><th width="329">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Description</td><td>Enter the text for the description.</td></tr><tr><td>Description font size</td><td>Specify the font size of the description on desktop.</td></tr><tr><td>Description font size on mobile</td><td>Specify the font size of the description on mobile.</td></tr><tr><td>Description font weight</td><td>Select the font weight of the description to be either Normal, Medium, Semibold, Bold, Extra bold, or Black.</td></tr><tr><td>Description line height</td><td>Determine the line height of the description text.</td></tr><tr><td>Description top margin</td><td>Determine the spacing of the description from top.</td></tr><tr><td>Description color</td><td>Apply a color to the description for the block.</td></tr><tr><td>Content width</td><td>Determine the width of the content.<br><br><em><mark style="color:orange;">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.</mark></em></td></tr></tbody></table>

### \[BLOCK] Button

<table><thead><tr><th width="328">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Style</td><td><p>Select the style of the button:</p><p></p><p><mark style="color:orange;"><strong>Primary button</strong></mark><br><mark style="color:orange;"><strong>Secondary button</strong></mark></p></td></tr><tr><td>Label</td><td>Enter the text for the button.</td></tr><tr><td>Link</td><td>Enter URL for the button to redirect to.</td></tr><tr><td>Top margin</td><td>Determine the spacing of the button from top.</td></tr><tr><td>Show button underline</td><td>Toggle to show or hide button underline.</td></tr><tr><td>Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient</td><td>Set the text color, background and border color for both the normal and hover states of the buttons.</td></tr><tr><td>Width (unit % or px)</td><td>Determine the width of the button.<br><br><em><mark style="color:orange;">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.</mark></em></td></tr></tbody></table>

### \[BLOCK] Social media

<table><thead><tr><th width="329">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Top margin</td><td>Determine the spacing of the block from top.</td></tr><tr><td>Bottom margin</td><td>Determine the spacing of the block from bottom.</td></tr><tr><td>Icon color - Background color - Background gradient - Icon hover color - Background hover color - Background hover gradient - Border color</td><td>Set the color, background and ring color for both the normal and hover states of the icons.</td></tr></tbody></table>

### \[BLOCK] Subheading

<table><thead><tr><th width="329">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Subheading</td><td>Enter in the sub heading for the block.</td></tr><tr><td>Font weight</td><td>Select the font weight of the sub heading</td></tr><tr><td>Subheading font size</td><td>Determine the font size of the sub heading.</td></tr><tr><td>Subheading spacing top</td><td>Determine the spacing of the sub heading from top.</td></tr><tr><td>Subheading color</td><td>Apply a color to the sub heading.</td></tr></tbody></table>

### \[BLOCK] Content

<table><thead><tr><th width="328">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>First description</td><td>Enter the text for the description top.</td></tr><tr><td>Second description</td><td>Enter the text for the description bottom.<br><br><em><mark style="color:orange;">Note: This content will be displayed when clicking the 'read more' button.</mark></em></td></tr><tr><td>Alignment</td><td>Select the alignment of the block content to be either to the Left, Center or to the Right.</td></tr><tr><td>Description font size</td><td>Specify the font size of the description.</td></tr><tr><td>Description top margin</td><td>Determine the spacing of the description from top.</td></tr><tr><td>Description color</td><td>Apply a color to the description.</td></tr><tr><td>Content width</td><td>Determine the width of the content.</td></tr><tr><td>Read more</td><td>Enter the text for the Read More button.<br><br><em><mark style="color:orange;">Note: The Read more button is displayed when the second description setting is filled in.</mark></em></td></tr><tr><td>Read less</td><td>Enter the text for the Read Less button.<br><br><em><mark style="color:orange;">Note: This text will replace the text of the read more button when clicked.</mark></em></td></tr><tr><td>Button font size</td><td>Determine the font size of the "Read more/Read less" button.</td></tr><tr><td>Button font weight</td><td>Select the font weight of the "Read more/Read less" button.</td></tr><tr><td>Button top margin</td><td>Determine the spacing of the "Read more/Read less" button from top.</td></tr><tr><td>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</td><td>Set the text color, background and border color for both the normal and hover states of the "Read more/Read less" button.</td></tr><tr><td>Button width</td><td>Determine the width of the "Read more/Read less" button.</td></tr><tr><td>Button top padding</td><td>Set the top padding top for the "Read more/Read less" button.</td></tr><tr><td>Button bottom padding</td><td>Set the top padding bottom for the "Read more/Read less" button.</td></tr></tbody></table>