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:
Or
Pipeline 4.0 and Pipeline 4.1 use:
Or
Earlier versions of Pipeline use:
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.