How to upload your page content to Shopify (WITHOUT the formatting issues)

If you've ever tried to upload your page content to Shopify, and had it come out looking horrible, then you're not alone. The Shopify Rich Text Editor (hereafter referred to as the "RTE") certainly has it's quirks. 

The Problem

There are actually a 2 of them:

1. If you are writing your content directly in the RTE in Shopify, heavy editing  tends to introduce problems / anomalies that can only be fixed by editing the HTML directly
2. If you are smart enough to write you content outside of Shopify (in your favourite text editor), and then try to paste it across, this usually makes a mess of things by copying FAR TOO MANY styles across.

My preferred solution? Write your content externally, paste it into Shopify as plain text, then format it.

1. Paste in absolutely plain text

1. For longer articles, I will usually write them in word processor outside of Shopify - anything will do, Google Docs, Microsoft Word, whatever (I personally use Bear). Do not worry about formatting, images, links, anything apart from the text itself.
2. I will then copy all the text from my word processor, start a new page in Shopify, then BEFORE pasting, switch over to "HTML editing" view by clicking the little <> button in the top right hand corner.
3. I will then paste my content. It should look, very very ordinary.
4. Switch back from HTML to the Rich Text view by pushing the <> button again. Depending on which program you pasted FROM, hopefully you should just have a long line of all your text (no headings, returns, formatting anything). Occassionally some weird formatting info will creep in (eg for links), so just skim the document and delete / modify anything that isn't simple, clean text.

Rich Text Editor buttons discussed in this article

2. Create sections (headings, paragraphs, and lists)

1. Sections: To create our sections (ie seperating headings, paragraphs and list items), you just run through the document, find the end of each section, click to make the cursor active here and press enter. Hopefully you will find this quite intuitive - end of a heading? Click, enter. End of a paragraph? Click, enter. End of a list item? Click, enter.
2. Headings: Now its looking a lot better, but everything looks like a paragraph. For each heading we:
1. Move the cursor to the start of a heading
2. From the formatting dropdown (the "A") button, choose a heading type. Usually "Heading 1" has already been used for the page title, so "Heading 2" is a good place to start.
3. Repeat steps 1 and 2 for each heading
3. Lists: Lists should currently appear as a series of paragraphs - select the whole lot, and click one of the 2 lists buttons (depending on if you want an unordered or ordered list.

3. Lastly, add links and images

1. Add links: For each link find the place where you would like the link, highlight it, then click the link button. Add the URL, make sure you give it a simple, clear title describing where the link goes to, and click insert link.
2. Add an image
1. Create a new paragraph for your image: Create a blank line for your image (usually by pressing enter), turn off any lists that are still on, and choose "paragraph" from the formatting drop down menu.
2. Click the image button, upload file, and select file after it has uploaded. Make sure you giving it some alt text (just a simple description), choose a size and click "Insert image"

 Some final thoughts

• If you are going to be working with your page content a lot, it is well worth learning html. You can probably figure out 90% of it just flicking backwards and forwards between the rich text view and the HTML view, but a tutorial (such as this) might also be beneficial. 
• It is worth checking to see if your page looks good on both mobile, tablet and desktop browsers. If you don't have all of these handy, google chrome can give you an approximation.
• If your goal is to look like a professional, established business, do not touch the align and text colour buttons. Ever.