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

SettingsMeaning

Layout

Select the layout width of the whole section. The options are: Default (same as the body width), 1170px, 1770px, Full Width (the 100% of the viewport width).

Padding Container Full Width

Determine the left and right spacing of the Full Width layout.

Enable Border Top?

Toggle the top border.

Enable Border Bottom?

Toggle the bottom border.

Border Color

Apply a color to the border top and bottom.

Spacing Top / Spacing Bottom on Desktop, Tablet, Mobile

Determine the spacing of the section from its top and bottom sections on Desktop, Tablet and Mobile separately.

Background Color - Background Gradient

Set color (or gradient) for the section background.

Background Image

Upload/Select an image as the section background.

Enable Column?

Toggle Column

Alignment

Select the alignment of the header text to be either to the Left, Center or to the Right of the section.

Block settings

[BLOCK] Heading

SettingsMeaning

Heading

Enter in the heading for the block.

Heading Font Size

Specify the font size of the heading on desktop.

Heading Font Size Mobile

Specify the font size of the heading 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

SettingsMeaning

Description

Enter the text for the description.

Description Font Size

Specify the font size of the description on desktop.

Description Font Size Mobile

Specify the font size of the description on mobile.

Line Height

Determine the line height of the description text.

Description Spacing Top

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.

[BLOCK] Button

SettingsMeaning

Button Style

Select the style of the button:

  • Style 1 : normal button.

  • Style 2 : as a Link.

Button

Enter the text for the button.

Button Link

Enter URL for the button to redirect to.

Button Spacing Top

Determine the spacing of the button from top.

Button Color - Button Border Color - Button Background Color - Button Background Gradient - Button Color Hover - Button Border Hover - Button Background Hover - Button Background Gradient Hover

Set the text color, background and border color for both the normal and hover states of the buttons.

Button Width

Determine the width of the button.

[BLOCK] Social Media

SettingsMeaning

Spacing Top

Determine the spacing of the block from top.

Spacing Bottom

Determine the spacing of the block from bottom.

Icon color - Background Color - Background Gradient - Hover / Active Color - Hover / Active Background Color - Hover / Active Background Gradient - Ring Color

Set the color, background and ring color for both the normal and hover states of the icons.

[BLOCK] Sub Heading

SettingsMeaning

Sub Heading

Enter in the sub heading for the block.

Font Weight

Select the font weight of the sub heading

Sub Heading Font Size

Determine the font size of the sub heading.

Sub Heading Spacing Top

Determine the spacing of the sub heading from top.

Sub Heading Color

Apply a color to the sub heading.

[BLOCK] Content

SettingsMeaning

Description Top

Enter the text for the description top.

Description Bottom

Enter the text for the description bottom.

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 Spacing Top

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.

Read Less

Enter the text for the Read Less button.

Button Font Size

Determine the font size of the "Read more/Read less" button.

Font Weight

Select the font weight of the "Read more/Read less" button.

Button Spacing Top

Determine the spacing of the "Read more/Read less" button from top.

Button Color - Button Border Color - Button Background Color - Button Background Gradient - Button Color Hover - Button Border Hover - Button Background Hover - Button Background Gradient Hover

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 Padding Top

Set the top padding top for the "Read more/Read less" button.

Button Padding Bottom

Set the top padding bottom for the "Read more/Read less" button.

Last updated