Default page
Overview:
The Main Page section is used to display standard Shopify pages such as About Us, Contact, FAQ, Policies, or custom content pages. It supports banners, headings, descriptions, typography controls, layout customization, responsive alignment, color schemes, and spacing settings to help merchants create flexible and visually structured content pages.
Section Configuration
Breadcrumb:
| Setting |
Description |
| Show Breadcrumb |
Displays breadcrumb navigation above the page content for improved navigation and SEO structure. |
| Breadcrumb Color Scheme |
Applies a predefined color palette to the breadcrumb section. |
Banner:
| Setting |
Description |
| Banner Image |
Uploads a banner image displayed at the top of the page. |
| Banner Media Ratio |
Controls the aspect ratio of the banner image such as adapt, square, portrait, landscape, or fit to box. |
| Banner Desktop Height |
Controls the height of the banner image on desktop devices when fit mode is enabled. |
| Banner Mobile Height |
Controls the height of the banner image on mobile devices when fit mode is enabled. |
Heading:
| Setting |
Description |
| Section Heading |
Defines the main page heading. |
| Heading Size |
Controls the size of the heading text. |
| Heading Weight |
Adjusts the font thickness of the heading text. |
| Heading Case |
Changes the text transformation style such as uppercase, lowercase, capitalize, or default. |
| Heading Tag |
Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes. |
| Heading Font Family |
Allows switching between default and body font family styles. |
| Heading Color Style |
Applies predefined color styling to the heading text. |
| Heading Link Style |
Controls the styling behavior of links used inside the heading content. |
Description:
| Setting |
Description |
| Description Text |
Displays supporting content or introductory text below the page heading. |
| Description Size |
Controls the size of the description text. |
| Description Weight |
Adjusts the font thickness of the description text. |
| Description Case |
Changes the text transformation style for the description text. |
| Description Font Family |
Allows switching between default and heading font family styles. |
| Description Color Style |
Applies predefined color styling to the description text. |
Layout
| Setting |
Description |
| Container Layout |
Determines whether the page section uses a contained, contained content, or full-width layout. |
| Container Width |
Controls the maximum width of the page section container on desktop devices. |
| Text Alignment (Desktop) |
Sets the horizontal alignment of page content on desktop devices. |
| Text Alignment (Mobile) |
Sets the horizontal alignment of page content on mobile devices. |
Color Scheme
| Setting |
Description |
| Section Color Scheme |
Applies a predefined color palette to the page section background and content. |
| Inverse Color Scheme |
Inverts the selected color scheme styling for contrast variations. |
| Gradient Mode |
Enables gradient styling for the section background, widgets, or both. |
| Enable Heading Gradient |
Enables gradient styling for section headings. |
Padding
| Setting |
Description |
| Top Padding |
Adds vertical spacing above the section. |
| Bottom Padding |
Adds vertical spacing below the section. |
