Create a full-width section

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 it for Free here.

You can also watch this video tutorial:

Create a full-width sectionClick to copy

Step 1: Add the Full-Width Section layoutClick to copy

Inside the PageFly editor, choose Add Element > Layout and scroll down to the bottom of this catalog, drag the Full-Width element.

create a full width section

This section will be full-width by default. You can add elements inside this section.

Step 2: Upload Image elementClick to copy

Again, go ahead to the regular elements category.

  • On the search bar, search “Image” element, drag and drop it inside the section.
  • In the General tab, upload your image with Image Manager.

create a full-width section

You can see, the image is full width.

Step 3: Publish the page and check the section on Live View.Click to copy

create a full-width section

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

Make an available section full widthClick to copy

If on your page, there are sections that are not full-width and you want to make it full-width, please continue following these steps.

  • Navigate to the breadcrumbs, choose the section
  • Go ahead to General tab, turn off Set Fixed Width button

create a full-width section

  • Finally, Publish the page and check it on Live View.

The section is not full widthClick to copy

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. 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;

  • 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.

create a full-width section
Remember to Save it and then Publish to see the Live view

create a full-width section

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.

If you have further questions, please join our community. This community is exclusive for PageFly merchants only with our experts and merchants from all around the world!

JOIN PAGEFLY COMMUNITY

Thank you for your feedback!

Navigate this category

PreviousPrevious article

Next articlePrevious

Could not find the answer
to your question?

Chat with us
PageFly Languagues

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

I got it!
Join PageFly Facebook Group to get Bearie Coin JOIN US NOW