Admin panel

• Open Shopify Admin console
• https://balletassociation.myshopify.com/admin
• Online Store > Blog posts
• Open the unpublished blog tutorial “TUTORIAL: Meeting – Marcelino Sambé on October 8”

 

Expand viewing area

• Click on the HTML editor icon
• Click and drag the bottom of the pane to expand your viewing area

 

HTML Tags

• HTML tags always come in pairs (open & close)
• • <> open
  • </> close
• Always use both open & close tags!
• Tag examples https://www.elated.com/first-10-html-tags/

 

Lesson 1: Text

Skill level: Beginner

• The HTML paragraph tag is <p>
• What is the opening tag?
  • Answer = <p>
• What is the closing tag?
  • Answer = </p>
• Identify the open & closing tag in the blog post below (HTML editor view)

Knowledge Check

• Using the Tutorial test blog, split the single block of text into 2 paragraphs
  • Insert the new paragraph after the sentence “He expressed his gratitude to the Association for the two awards he had received.”
• Click the “View” icon to see how the web page looks in real life
• NOTE: because the blog post is unpublished and hidden, you have to click the view button every time a change is made. Changes are not automatically updated. They are only visible real-time when the blog post is published.

Break tag

Another way of splitting text into paragraphs is to use the “break” tag <br>. The break tag simply creates a new line.

• <br> (open)
• </br> (close)

Example 1:

Using the Tutorial blog, add an open & close break tag to separate the text into a new line

 

• Go back to the HTML editor and check the break tags you just entered
• Notice that Shopify has automatically changed the <br></br> to <br />
• This is HTML short-hand for using an open and close break tag next to each other. You can use either method as both versions are correct! 

 

• Add another open & close break tag next to the one you just created, to create a blank line
• Notice I've mixed & matched <br></br> with <br /> and both work

We’ve created a blank line using two break tags, which is exactly the same as using the <p></p> tag. However, the <p> tag doesn't work well with images and we'll be using break tags when we start to work with text & images together

 

Knowledge Check

• Using the Tutorial test blog, add two blank lines to split the single block of text into 3 paragraphs using break tags

 

Lesson 2: Format Text

Skill level: Beginner

Formatting applies styles to text

• Headings 
• Bold
• Italic
• Underline
• Bullet & numbered lists
• Blockquotes

To format text, simply highlight the text and select the formatting option of your choice.

W3 convention and Google SEO ranking limits one <h1> per page. This is normally the page or blog title, so the maximum article heading size for your blog text should be <h2>

Knowledge Check

• Add a <h2> heading title to the block of text e.g. "Blog article heading" - or some other name of your choice. Save & view the page to see the text style change.
• Sometimes, your change will not be immediately visible. This is due to Shopify having to update & refresh the cache. If this happens, wait a few seconds and refresh the page. It should update within a maximum of 1 minute. 
• Open the HTML editor and inspect the code. It should say <h2>Your blog article heading</h2>
• Switch to UI Editor view, change the heading to <h3>, save and see the change on your page. 
• Check the HTML editor to see the change in the code
• Highlight some text and make it bold, italic, underlined.
• Open the HTML editor and find these new tags in the code

Sometimes, Shopify prevents you from adding a new line or heading when using the UI editor. If this happens, go into HTML editor, add the new line & text, then switch back to UI view

Blog pages behave differently to normal web pages. They are a stripped-down version of a web page and not every formatting option will work. Keep blog formatting simple

 

Lesson 3: Images

Skill level: Intermediate

There are 2 types of images used in blogs:

1. Featured image – crop your image size to be square and resize to 1000x1000 px
2. Content image – your image can be any size. However, when you have multiple images in the same blog, it’s recommended to crop them all to the same size and shape so they look consistent e.g. square 400x400px or rectangular 400x800px

Featured Image

The featured image is magnified and used as the background in the blog header. If the featured image is too small, the resolution will be low, resulting in the blog header image looking grainy and poor quality. 

Depending on the device you’re using to view the blog, Shopify may zoom in on the featured image and not all of it will be displayed e.g. Desktop vs. Mobile.

Desktop

Mobile

It is inevitable that you'll have to modify your images to use in the blog. This may involve cropping the image to change the size (height & width) as well as adding more pixels to change the quality (pixels per inch).

I personally use Photoshop to modify images. However, this is expensive and overkill, unless you're a professional and use it for other work. If you don't have an image editor, I recommend using the excellent, free image editing tool called Gimp. 

 

Image Size

Use the following image sizes:

Featured Image	1000 x 1000 px	> 600 KB
Content Image (square)	400 x 400 px	> 200 KB
Content Image (rectangular - vertical)	300 x 600 px	> 200 KB
Content Image (rectangular - horizontal)	600 x 300 px	> 200 KB

 

Crop image

Official Gimp documentation

 

Resize without losing quality

 

Official Gimp documentation

 

Knowledge Check

• Find an image on the web and crop it:
• Square 400 x 400 px
• Rectangle (horizontal) 600 x 300 px
• Rectangle (vertical) 300 x 600 px
• Using the Tutorial Test blog
• Find an image and change its size to 1000 x 1000 px and resolution to 1MB. Replace the Featured Image

 

Lesson 4: Image & Text

Skill level: Intermediate

• Steps to upload an image and add a margin

Uploaded Image

You should have an image similar to this, with the image on the left and the text on the right, with a white 30 px margin around the image.

NOTE: there may be instances when the text is placed below the image and not automatically placed to the right. If this happens, place your cursor before the first letter and hit backspace until the text is in the correct position. 

HTML Gotchas

Sometimes, you complete all the steps correctly but the image still doesn't display as it should. In this case, you have to open the HTML editor and update the code directly. Here's a brief overview of the different tags you'll see.

• Open the HTML editor

 

<meta charset>

This tag refers to the characters used by the web and can be ignored

 

<div>

A <div> is an invisible block, in which other HTML elements are placed. As always, there must be an opening <div> and closing </div>.

Sometimes, Shopify adds an extra opening & closing <div> somewhere in the text (they're often not next to each other). If this happens, you will see some of the text in the correct place to the side of the image and the rest of the text below the image. To resolve, delete the middle closing </div> & opening <div>. Yes, I said that right - delete the middle CLOSING and OPENING div's, so the text is surrounded by just one <div> block.

Because it's an invisible block, the image & text in the first <div> will consume whatever height is needed by either the image or the text (whichever is the greater). This means the second <div> will be placed below the first <div>, which causes the text to be broken into two and displayed below the image.

  

<p>

The <p> tag should be considered like the <div> tag, with the text in one <p> </p> block.

 

<span>

Sometimes Shopify adds a <span> tag. The <span> tag is similar to the <div> and can safely be ignored. As always, if Shopify adds a <span> tag, there must always be an opening & closing </span> tag.

 

Lesson 5: Multiple Images & Text

Skill level: Advanced

Blogs may contain more than one image and the previous steps should be mastered before attempting this.

Single Image Blog

The previous lessons created a blog with one image and one block of text, that should look something like this. 

Multiple Image Blog

We will now edit the same blog, separating the text into two blocks with two images. The following method can be applied to any number of images and text blocks. 

1. Open HTML editor
2. Add this code at the end of the block <p class="section clearfix"> </p>. This has the effect of telling Shopify that it's reached the end of the code block and the next block of code should be placed on a new line. 
3. Add <p></p> (this gives you an extra blank line so you can click the cursor in the Editor view). You can delete this later if there's too much gap and white space between the blocks. 
4. Close HTML editor
5. Click at the bottom of the page and add a second image
6. Edit the image = wrap text around image. 30px margin, ALT text etc.
7. Open HTML editor
8. Add a <p></p> block and copy the text within the block
9. Close HTML editor
10. Save
11. View blog to check

 Step-by-step Guide

Add code

Add image

 

Add text

 

Close the HTML editor and check your blog. It should look like this (with your images replacing the ones I've used)

 

Finished blog

Knowledge Check

• Create a practice blog
• Create multiple images
• Create multiple text blocks associated with each image

 

Final Steps

• Set Author = Editor
• Blog = News
• Choose tag = click in the tag field and the available tags will appear. Select an existing tag or create a new one
• All tags should be lower case with multiple words separated by hyphens
• Visibility = Visible
• Set Publish Date = define a publish date
• Save

You did it - well done!