Overview
Summary: A full-width section is a design element that spans the entire width of your screen. It offers a striking visual impact. Employing a full-width section on your Shopify site enhances its modern appeal and dynamically highlights key content, making it stand out and capture attention effectively.
With PageFly, you can easily create a full-width section for your Shopify page. This article will guide you through the process in just a few easy steps. You can also watch this video tutorial:
Requirements
- PageFly App Installed: PageFly must be installed on your Shopify store. If you don’t have PageFly yet, you can install it for Free here.
- Content Prepared: Prepare the content that you want to include in your full-width section. This might include text, images, videos, or links.
How To Create A Full-width Section With PageFly
Step 1: Add The 1-Column Layout
- In the PageFly editor, click on Add element > Layout.
- Drag the 1/1 layout to your page.
Step 2: Add Elements To Your Section
Open the Add element menu. Here, you can choose to add various elements such as text, images, or videos.
For example, to add an image:
- Click Add element > Image, then drag and drop the image element into your section.
- Go to the General tab and hit the Select image to upload your image.
Step 3: Disable Fixed Width
Select the section, navigate to the General tab > hit the No button under the Set Fixed Width option. This ensures the section stretches across the full width of the screen.
Step 4: Publish The Page And Check The Section On Live View
- Click the Publish button to make your changes live.
- Review your page in the Live View to ensure the section displays correctly.
Use Case
The Section Is Still Not Full Width Even After Following Above Steps
Some Shopify themes apply a fixed width to the site’s content, which might prevent sections from extending fully across the page. Therefore, with some themes, even though you followed the steps as we introduced, the section is still not full-width.
In this case, you need to follow these steps:
- From the left menu of PageFly editor, click on Add Custom Code
- Copy one of the following code snippets
- To adjust the main content container:
.main-content { max-width: 100%; padding: 0;}
- To adjust the main content container:
.main-content .wrapper {
width: 100%;
max-width: 100%;
padding: 0!important;
}
- Paste the selected code into the Custom CSS section.
- Click Save, and then Publish your page again.
- Review the changes on your Live Page to ensure the section now displays as full width
If adding the code doesn’t resolve the issue, please don’t hesitate to contact us through the Live Chat window for assistance. Not all Shopify themes are compatible with these codes so we may need to adjust settings specific to your theme.
Tips And Best Practice
- Consistent Styling: Ensure that the styling of full-width sections matches the overall design and color scheme of your website for a cohesive look.
- Limit Section Height: While it’s tempting to use large amounts of vertical space, keeping your full-width sections concise can help maintain visitor engagement and reduce scrolling.
- Optimize Loading Times: Full-width sections can be heavy due to large images or complex scripts. Optimize these elements to maintain fast page load speeds.
Frequently Asked Questions
Can I Apply Animations To Full-width Sections In PageFly?
Yes, you can. Simply select the section or element you wish to animate, and choose from the animation options in the General tab.
What To Do If The Full-width Section Overlaps Other Content On Your Page?
Overlapping issues are typically caused by incorrect settings in margins or padding. Check the settings in PageFly for the section and nearby elements.
Previous article
