Create a full-width section

Before going into specific steps, you can check this video to have a general demonstration on how to set full width for Slideshow, Video, Image and other elements


In this article, you’ll learn how to create a section that expands the full-width of your page.

3 steps to create a full-width section

Step 1: Add the Full Section layout

Inside the PageFly editor, choose Add Element > Layout and drag the Full Section.

creat a full-width section

Step 2: Disable the Set Fixed Width option

Select the newly created Section that you just dragged into the canvas (the Breadcrumbs trail at the bottom of the screen will show you exactly what element you have currently selected). In the General tab of the Section, disable the Set Fixed Width option.

Step 3: Upload image banner

In the Styling tab, find the BACKGROUND section.

  • Upload your image banner by going to the Styling tab, scroll down to the BACKGROUND parameter, and upload your background image here like the image below:

You can upload the image which is available in the Image Manager or upload it from the Internet. Read more here to know more details.

  • Once the image is uploaded, click on the More Settings button.
    • Change the Background Position to match your image’s focus point (this setting will be used to define which part of your image can be shown in responsive modes)
    • Change the Background Size to “Cover”.

creat a full-width section pagefly

In the Styling tab, find the SPACING section.

  • Edit the top-padding and bottom-padding value to change the height of the section to fit your image’s height.
  • The little box in the middle will set the same value for all four sides of Padding and Margin.

Do not forget to Save & Publish your work. That’s it! You have completed all the steps to make a fabulous full-width section for your Desktop/Laptop page. Easy, right?

Important Note:

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 not still full-width like this:

Therefore, you need to follow these steps:

  • First, open the Add Custom Code window

  • Copy this code
    • .main-content { max-width: 100%; padding: 0;}

OR this code:

    • .main-content .wrapper {
      width: 100%;
      max-width: 100%;
      padding: 0!important;
      }
  • and 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 Live Page.

In this example, we are using the second code for the sample store which is using the Brooklyn theme:

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.

Mobile optimization

You can check the design on mobile by choosing the Mobile option on the top menu.

We can see the previously assigned bottom-padding value of 350px, the image background got stretched out and does not look good on mobile.

creat a full-width section 1

PageFly allows device customization for Styling tab (i.e. changes in styling tab are unique on each device), so choose the Section > Styling tab > SPACING > set the Padding-bottom to any desired value (0 px in our case)

create a full-width section with PageFly
Hit Publish and check the page on your mobile for the result.

You can consult this video to know details about how to set full-width for a section on your page as well as other related issues to the theme conflict

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!
Languages