Page template

We recommend reading the article related to the page https://docs.muup.co/article/4433-applying-templates

Select a setting described in the following table:

Setting	Description
Banner color scheme	Apply Color Scheme: • After creating your color schemes in theme settings — 'Colors' tab, you can apply them to different sections, blocks, and templates of your store. • In each section, block and template, you'll see a Color scheme dropdown. • Select the appropriate color scheme, ensuring consistency with your brand's identity.
Full width	Enable this option to make the image span the full width of the section.
Banner width	Sets the width of the banner when Full width is off: Wide width or Page width. Only shown when Full width is disabled.
Add top spacing below header	This option allows you to add extra spacing at the top of the banner. Only works if the "Floating sticky header" option is enabled in header settings.
Switch background	Within each color scheme, you can define a secondary background in addition to the main background. When you enable Switch background, the main background changes to the secondary background. You can see changes on page banner and page content (Check screenshots below the table).
Banner background image	You can set a background image for the banner to enhance its visual appeal. The background image will be displayed behind the content, adding depth and style to your banner.
Banner image 2	Add a second background image to the slide. After adding this image, you can also add a third background image to extend the slideshow. Multiple images will be displayed as slides that you can scroll through using the pagination indicators.
Banner image 3	Add a third background image to create a multi-slide background with pagination controls. After adding this image, you can also add a fourth background image to extend the slideshow.
Banner image 4	Add a fourth background image to create a multi-slide background with pagination controls.
Image overlay opacity	The "Image overlay opacity" setting allows you to adjust the transparency of the overlay that is applied to images. Use the slider to make changes.
Round image corners	Enable this option to apply a border radius to the banner image. The border radius value is controlled in Theme Settings → Content Containers → Large Content Corner Radius. Changing this setting will affect other elements that use the same corner radius value.
Show breadcrumbs	By enabling this option, breadcrumbs will be displayed above the page banner, providing navigation links to help visitors back to main page – homepage.
Breadcrumbs text color	Select the color for the breadcrumbs text from the following options: • Text • Text Secondary • Text Accent Each option adapts to the active color scheme, so the actual color may vary depending on the scheme applied. Only shown when Show breadcrumbs is enabled.
Custom heading	Using this field, you can create a custom page title that differs from the one assigned when the page was originally created. The field's top menu offers options to customize the text, including bold, italic, or adding a hyperlink. You can also click the dynamic source button to insert a dynamic source for displaying the page title. Note: Custom title replaces the main title. If you leave the field empty, the title assigned during creation in the admin panel will be displayed.
Heading size	The heading size setting offers four options to control the size of the heading: • Small • Medium • Large • Extra large
Heading capitalization	Choose how the heading text is displayed: • Uppercase – Displays the heading text in all capital letters. • Default – Keeps the original capitalization as entered in the Custom Heading field or as defined by the page name in the admin panel.
Description	Use this field to add text below the heading for additional important information in the banner. The text editor toolbar allows you to format the text (bold, italic) and add hyperlinks. You can also click the dynamic source button to insert a dynamic page description.
Text alignment	Set the alignment of the content within the banner (for example, left, center, or right).
Custom container color scheme	Overrides the default container color scheme with a separate one, just for the content container over the banner image. Disabled by default.
Container color scheme	The color scheme applied to the content container when Custom container color scheme is turned on. Only shown when that setting is enabled.
Show container background	Enable this option to display the content container. Disable it to hide the container while keeping the background image fully visible. Only shown when a Banner background image is set.
Desktop content width	This option allows you to control the width occupied by the heading and description. Available options: • Small • Medium • Large • Full Width

Switch background

Mobile layout

Setting	Description
Banner image position mobile	Controls how the banner image is positioned on mobile. • Cover — the image covers the full mobile banner as a background. (Default) • Top — places the image above the content, revealing the settings below to control its height and content alignment.
Banner image height mobile	Sets the height of the image on mobile: Adapt to image, Small, Medium, Large, Extra large, or Custom. Only shown when Banner image position mobile is set to Top.
Banner image height mobile custom	Sets a custom image height on mobile as a percentage (20–100%). Only shown when Banner image position mobile is Top and Banner image height mobile is set to Custom.
Content alignment mobile	Aligns the heading/description content horizontally on mobile (left, center, right). Only shown when Banner image position mobile is set to Top.

Banner padding

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the banner using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Top padding” setting, but controls the space at the bottom of the banner.
Top padding mobile	The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the banner specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the banner for mobile devices.

Add content to the page if needed

Input text, images, or other media to create the content of the page.

The content you add will be visible in the Theme Customizer and on the Preview of your store.

This feature allows you to create customized, informational pages that align with your brand's storytelling.

The content appearance on the page.

In the Page Template, you can adjust content settings to enhance the visual presentation of your page. You can set appropriate color scheme, top and bottom paddings.

Refer to the table below the provided screenshots for detailed guidance on how these settings affect your page layout.

Content settings

Setting	Description
Content color scheme	Sets the color scheme for the page's main content area below the banner (e.g. the "Get in Touch" form section) — separate from the Banner color scheme used for the banner above it.

Content padding

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the content using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Top padding” setting, but controls the space at the bottom of the content.
Top padding mobile	The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the content specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the content for mobile devices.