Prototype Blog Post -- Sample Only Not To Be Published

Artly Agency

This blog post is a prototype example of how to format an article in the Artly theme. 

For starters, the first step is to have very modest expectations.  Shopify's blog post editor is not designed for complex page layouts.  It's a very simple editor that allows you to easily add images, text and headlines but does not provide very much control over layout and positioning.   Also, the way Shopify translates from its WYSISYG editor to raw HTML is often unreliable and infuriating. 

If you would like to create blog posts with complex article-style layouts (e.g., columns, precise positioning of titles and images, image collages, etc...), you should use a dedicated HTML editor and then paste the raw HTML here or use a dedicated page-layout app, such as Shogun. 

If your blog post layout aspirations are very modest, keep reading... :)

getting started

First, before entering any images, type or paste the text of your blog post into this editor.  Ideally, this should be plain text with no existing format. Pasting text from word processing programs and/or email apps may have unpredictable results... 

Second, select any headlines and choose the desired headline style from the dropdown menu above.  Generally, "Heading 2" is an appropriate size and weight for a short post.  For subsections, you may use "Heading 3."  Any other headings may have unsightly results.

Be careful when entering empty paragraph lines to create space.  This won't always have predictable results.

You should generally try to not format the text directly in HTML as the results when you return to the WYIWYG editor may be unpredictable and infuriating (as noted above ;).

Thirdly, insert your images into the post using the "insert image" button in the editor menu above. When you insert an image,  you should generally choose the 1024x1024 size.  By default, the image will be displayed left-aligned, at 35% width of the column page (as the image is in this section).  If you would like the image to be full width, select the "edit image" icon button and then check the "wrap text around image" checkbox.

Creating images with the right aspect ratio will make the layout job a lot easier.  Rather than try to format text to wrap correctly around the image, consider recropping your image to look good with the text you have.  Also, be ready to test how the image layout looks on both desktop and mobile screens.

Finally, if you need to format individual text in bold, italic or a funky color, you can use the character edit options in Shopify's editor menu.   If you stay away from paragraph formatting options (e.g., bullets, identation, etc...), you should generally be safe...  If you try to use the more complex editing options Shopify provides, take a deep breath and be patient... 

Here are some examples.

an example heading (level 2)

This is a left-aligned image with text wrapped around.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In massa tempor nec feugiat nisl pretium. Eget est lorem ipsum dolor sit amet. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Tellus integer feugiat scelerisque varius morbi enim nunc. Arcu dui vivamus arcu felis bibendum ut tristique. Aliquet lectus proin nibh nisl condimentum id venenatis. Id donec ultrices tincidunt arcu. Eget mi proin sed libero enim sed faucibus turpis in. Duis ut diam quam nulla porttitor massa id neque. Varius duis at consectetur lorem donec massa. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Ac turpis egestas sed tempus. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Placerat in egestas erat imperdiet sed euismod nisi porta lorem. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque.

another heading (level 3)

This is a full width image with no text wrap. Iaculis nunc sed augue lacus viverra vitae. Quam pellentesque nec nam aliquam sem et tortor. Pellentesque sit amet porttitor eget dolor morbi non. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. Rhoncus urna neque viverra justo nec ultrices dui. Justo laoreet sit amet cursus sit amet dictum sit. Vitae proin sagittis nisl rhoncus mattis rhoncus. Enim nunc faucibus a pellentesque sit amet porttitor eget. Cursus risus at ultrices mi tempus. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Aenean sed adipiscing diam donec adipiscing tristique. Integer quis auctor elit sed. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. In arcu cursus euismod quis viverra nibh cras. Elit duis tristique sollicitudin nibh sit amet commodo nulla. Et tortor consequat id porta nibh venenatis cras sed.

heading example (level 4)

This is a right-aligned image with text set to wrap around. Nunc vel risus commodo viverra. Pellentesque elit eget gravida cum sociis natoque penatibus et magnis. Quam elementum pulvinar etiam non quam lacus. Pellentesque habitant morbi tristique senectus et netus. Sed viverra tellus in hac habitasse. Et tortor consequat id porta nibh venenatis cras sed. Facilisi morbi tempus iaculis urna id volutpat lacus.

In ornare quam viverra orci sagittis. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant. Fringilla phasellus faucibus scelerisque eleifend donec. Augue eget arcu dictum varius duis. Eget nullam non nisi est sit amet facilisis. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Pharetra diam sit amet nisl suscipit adipiscing bibendum est.