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.

Step1

Open your Code Editor:

https://myshopify.com/admin/themes/current

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 this file:

https://gist.githubusercontent.com/whistlerbrad/607aa4be93169149c202aaccb4bc7525/raw/4050d5620cf42106c936cb54ac0c8da90a959923/article-full-width.liquid

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://myshopify.com/admin/articles

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

Save your change.

Final Step

Customize your theme:

https://myshopify.com/admin/themes/current/editor

Navigate to your article (blog post) in the theme editor. Turn off any sidebar options. If the sidebar is used, the wider post format will not be activated. Once the sidebar is turned off, the wider format will be displayed.

Be sure to uncheck both options to show the wider format.

Still need help? Contact Us Contact Us