Search

Search our website

    This section doesn’t currently include any content. Add content to this section using the sidebar.

    This section doesn’t currently include any content. Add content to this section using the sidebar.

    This section doesn’t currently include any content. Add content to this section using the sidebar.

    This section doesn’t currently include any content. Add content to this section using the sidebar.

    This section doesn’t currently include any content. Add content to this section using the sidebar.

    View bestsellers 

    Pre-order our new design

    Bespoke timepieces

    This section doesn’t currently include any content. Add content to this section using the sidebar.

    Shopify Blogs

    Admin panel

     

    Expand viewing area

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

     

    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)
    Paragraph HTML tags

    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

    Use HTML break tags to create 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! 

    Reformatted break tag

     

    • 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

    Use HTML break tags to create new blank line

    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>


    Format text

    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

    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

    Featured image - Desktop view

    Mobile

    Featured image - Mobile view

    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

    Import image

    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.

    Image uploaded

    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
    HTML editor

     

    <meta charset>

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

    meta charset

     

    <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.

    div tag

      

    <p>

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

    p tag

     

    <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. 

    Single image blog

    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

    section-clearfix

    Add image

    Add second image

     

    Add text

    Add text block 

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

     

    Finished blog

    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!