When building websites in Optimizely Commerce (Spire), you may need to create sections that span the entire page width. Full-width sections are essential for design elements such as banners, hero images, and background sections. Optimizely Commerce (Spire) provides a flexible framework that makes it easy to configure and implement full-width layouts, allowing developers to create visually engaging designs with minimal effort. This guide will walk you through utilizing this feature to seamlessly create full-width sections.

How to Create Full-Width Sections

Step 1: Folder Structure

• First, ensure you have already created a blueprint under the directory src\FrontEnd\modules\blueprints. For example, you might have a blueprint named CustomBlueprint.
• Navigate to the CustomBlueprint/src. Ensure that a Start.tsx file exists in this directory. If it does not, create and add this file.

Step 2: Understand the Options in Start.tsx

The Start.tsx file is the entry point for setting up the main themes, custom widgets, and pages. It uses Mobius styling principles to ensure everything looks consistent, flexible, and accessible. These principles provide a unified design, allowing for easy customization of themes, colors, typography, and other UI elements while maintaining a seamless, responsive user experience across devices.

In the Start.tsx file, you will find two options for configuring the full-width layout through the style guide:

• setPreStyleGuideTheme: If you add your code under this method, you can update the full-width settings directly from the content admin interface
• setPostStyleGuideTheme: If you use this function, the full-width settings will be fixed, and you won’t be able to modify them from the content admin interface.

Step 3: Full-Width Configuration Code

Optimizely Commerce (Spire) already provides a built-in solution to configure sections like the header, content, and footer to span the full page width. To enable full-width for these sections, use the following code snippet:

Explanation

• header: { isFullWidth: true }: Ensures the header section spans the full width of the page.
• content: { isFullWidth: true }: The main content area extends from edge to edge, perfect for displaying banners or immersive visuals.
• footer: { isFullWidth: true }: Sets the footer to full width, ideal for footers with background colors or design elements that must reach the screen’s edges.

Step 4: Integrate the Code

Add the above code to the Start.tsx file within one of the theme configuration functions (setPreStyleGuideTheme or setPostStyleGuideTheme), depending on whether you want to allow updates to the full-width settings from the content admin interface.

Step 5: How to Update the Full-Width Configuration from the Content Admin

After configuring the full-width settings in the Start.tsx file, Optimizely Commerce (Spire) provides an easy way to manage and update these configurations directly from the Content Admin interface.

• Go to the Content Admin and navigate to the Style Guide
• In the Site Configurations section, you will find the Full Width settings.

• Click on each option (Header, Content, and Footer) to see a toggle that allows you to make the section full-width.

Note: You can only update the full-width setting using the setPreStyleGuideTheme option in the Start.tsx file.

• After updating the value in the Settings modal, ensure you save the changes.

Step 6: How to Use the Full-width Option on Actual Pages

• To use the full-width option on pages, add a Row widget. Edit the Row widget, and you will see a Full Width Checkbox option (by default, this option will be unchecked).

• To make the section full width, check the checkbox.

     Note: Once the checkbox is checked, any content in that row will be displayed at full width.

Conclusion

Optimizely Commerce (Spire) provides a straightforward and flexible solution for creating full-width sections, making it easier to design visually engaging websites. Following the steps outlined in this guide, you can quickly enable full-width layouts for your header, content, and footer. Whether you prefer to manage these configurations through the Content Admin interface or directly in the code, Optimizely Commerce offers the flexibility to create seamless, immersive designs that enhance the overall user experience. With full control over these settings, you can customize your site’s layout to fit your specific design needs while maintaining a consistent and responsive interface across devices.

Unlock Your Website’s Potential with Custom Fonts

In this blog, we’ll explore the importance of typography in enhancing your site’s visual appeal and user experience. You’ll discover step-by-step instructions for integrating custom fonts into your Optimizely CMS Spire. Whether you’re a beginner or an experienced developer, this guide will provide valuable insights to elevate your web design.

So, let’s see below how we can integrate fonts using a third-party URL or by using font files. 

URL Font Help 

If you need to use third-party font URLs, such as Google Fonts or Adobe Fonts, then this option is preferable. 

By default, Optimizely uses this one option to load font.  

Suppose we have already created blueprint (or We can say theme in general) i.e. CustomBlueprint under frontend/modules/blueprints directory. 

We must create the Start.tsx file if it is not already in the CustomBlueprint/src directory. 

There is variable called fontFamilyImportUrl present under typography section of file modules\mobius\src\globals\baseTheme.ts. Use the variable that was copied from the previously specified file location in Start.tsx.

Inside that variable we must update whatever third-party URL we have (Google Font, Adobe Font, etc).

Once you’ve updated the URL as mentioned above, you can start using the font as outlined below. 

Custom Fonts

If you want to load font files from codebase instead of using third-party font URLs. Then this option is preferable.  

Let’s see how we can integrate fonts using custom font files like (woff, woff2, eot, ttf).  

Here also we need CustomBlueprint blueprint and Start.tsx file.  

First, we will see where we must add a custom font file and then how to access and load in our site those files.  

Under CustomBlueprint create the wwwroot/staticContent directory, and inside that directory, add your font files. 

Also, create one CSS file stylesheet.css under wwwroot/staticContent directory. Inside that file we are calling the fonts file using @font-face.

Once font added under directory wwwroot/ staticContent and called in wwwroot/ staticContent/stylesheet.css CSS file, then we have to assign path of CSS file to “fontFamilyImportUrl” variable present in Start.tsx file. 

By using this path /staticContent/stylesheet.css, you can access CSS file.

Once above process done then you can start using font as per below.

By using the above two ways, you can easily integrate fonts in your Optimizely CMS spire site. 

In some situations, we need to set a maximum zoom scale or disable zoom completely on our website. This blog explains how to achieve that behavior in Optimizely Spire.

In Optimizely, the meta viewport tag rendered on the page comes from the src\FrontEnd\modules\server-framework\src\PageRenderer.tsx file. However, since this file is part of the server framework, we cannot override it directly.

The meta viewport tag in the PageRenderer.tsx file is as per below. Optimizely sets the initial zoom scale to 1 by default and does not specify a maximum scale value.

In the browser, it looks as shown below.

Due to limitations, we cannot override the PageRenderer.tsx file, so we have another option to update the meta viewport.

That option is the utility file addMaximumScaleToViewport.ts. This file is present under src\FrontEnd\modules\client-framework\src\Common\Utilities\addMaximumScaleToViewport.ts. Using this utility, we can customize the zoom level.

How to Override the Page Render File in Our Blueprint/Theme

1. Assume you have already created a blueprint under `src\FrontEnd\modules\blueprints`, for example, `CustomBlueprint`.
2. Inside the blueprint, create the following folder structure: `src > Overrides > Common > Utilities`
3. Then copy the utility file from `src\FrontEnd\modules\client-framework\src\Common\Utilities\addMaximumScaleToViewport.ts` directory and add that file inside `src\FrontEnd\modules\CustomBlueprint\src\Overrides\Common\Utilities`

How to Make Changes to the File

We need to update the highlighted section. Modify the maximum-scale attribute to reflect the correct zoom value regardless of the desired zoom level.

You can also add the user-scalable attribute with the maximum-scale option here.

How to Call the Utility File

By default, Optimizely does not call this utility file on all pages.

To ensure it renders on every site page, we can call the utility file in the PageLayout.tsx file.

We can use PageLayout.tsx file to call utility file. This file is present in src\FrontEnd\modules\content-library\src\PageLayout.tsx directory.

To override this file, add it to the src\FrontEnd\modules\blueprints\CustomBlueprint\src\Overrides directory.

Now you have the overridden file in the mentioned directory.

Then call the utility as shown below.

In certain situations, there may be a need to either prevent zooming on a website or to provide a zoom option. This blog offers a straightforward approach to customizing zoom levels in Optimizely Spire.