With PageFly, you can easily create a full-width section on your Shopify page.This article will show you how to do it in just a few steps.
If you don’t have PageFly yet, you can install PageFly Page Builder for Free.
You can also watch this video tutorial:
Create Full-Width Section
Step 1: Add the 1-column layout
Inside the PageFly editor, choose Add Element > Layout and scroll down to the bottom of this catalog, drag the 1 column layout element.
This section will be full-width by default. You can add elements inside this section.
Step 2: Disable Set Fixed Width for section
- Navigate to the breadcrumbs, choose the section
- Go ahead to the General tab, turn off the Set Fixed Width button
Note: If on your page, there are sections that are not full-width and you want to make it full-width, you can follow these steps to make it show as a full-width section too.
Finally, Publish the page and check it on Live View.
Step 3: Upload Image Element
Again, go ahead to the regular elements category.
- On the search bar, search the “Image” element, drag and drop it inside the section.
- In the General tab, upload your image with Image Manager.
You can see, the image is full-width.
Step 4: Publish The Page And Check The Section On Live View
That’s it! You have completed all the steps to make a fabulous full-width section for your Desktop/Laptop page. Easy, right?
Special Note: Section is Not Full-width
Some Shopify themes will wrap the content of your site in a fixed width.
And with some themes, even though you followed the previous steps, it is still not full-width. Therefore, you need to follow these steps:
- First, open the Add Custom Code window
- Copy this code
OR this code:
.main-content .wrapper {
width: 100%;
max-width: 100%;
padding: 0!important;
- Paste one of these codes into the Custom code editor section
- Hit Save Change button, then Publish your page again
- Finally, check the result on the Live Page.
Remember to Save it and then Publish to see the Live view
If you add one of these codes but it still does not work, please do not worry and contact us via Live chat window so we can help you to fix it. Explain for this case is that not all Shopify themes can work with these codes and we need to check the theme you are using then we can fix for you.
