Blogs: Full width blog post page

If you would like a wide blog page, there is a code change you can make to widen the page layout. Follow these steps to create a new template that you can use for any blog post that requires a full-width style page layout. 

Example:

A new margin option is included which allows you to show a small margin or none at all and completely full width:

This tutorial requires you to know which version of Pipeline you're using. Verify before proceeding:

Which version of Pipeline am I using?

Step1

Open your Code Editor:

Note: This tutorial works best with a live theme. 

Quick link if the theme is live/published:
Open Code Editor

In the Sections folder, choose Add a new section:

Call it :

article-full-width

Press the Create section button to complete.

Erase all the default code that's generated:

Replace the code with all the new code from one of these files:

Pipeline 4.2 or higher use:

Click to view code

Or

Pipeline 4.0 and Pipeline 4.1 use:

Click to view code

Or

Earlier versions of Pipeline use:

Click to view code

After replacing all the default code with code from one of the above links,  Save the file.

Step 2

In the Templates folder, choose Add a new template:

(1) The drop-down defaults to article, that's correct, no change.

(2) Name the template full-width

Press the Create template button to complete.

Change the default code in Line 1:

Change to:

Copy and paste code:

{% section 'article-full-width' %}

Save the file.

Choose the template in your articles

You are now done with the Code Editor and can choose the template from your Article editor:

http://shopify.com/admin/articles

Find your article (blog post) and change the template type to article.full-width:

Be sure to change the template type for your blog post:

Save your change.

Final Step

Open the Theme Editor:

Or:

Quick link if the theme is live/published:
Open Code Editor

Important: In the Theme Editor, browse to the blog post that is now using the article.full-width template. 

Then check for the new sidebar section settings:

If you're not seeing this section setting, verify you're in the Theme Editor and browsed to a blog post that is using the new template. 

Click the new section and you'll see new settings including the width of the margin:

You can adjust the slider to control from no margin to some margin for desktop and tablets. FYI: There is no sidebar when using the full-width template. 

Still need help? Contact Us Contact Us