Learning HTML

How to add Meta Keywords to your Shopify Store

Meta Keywords can be added into the template editor, by clicking on themes>Template Editor and then Theme.liquid. You will need to enter the following code between the head tags: (those are my meta keywords for this blog to provide an example, those should probably be changed to suit your site.)

 

How to Remove the Powered By Shopify link

If you are looking to remove the powered by shopify link head to themes>template editor, click on theme.liquid and do a command+F to find powered, which will bring up this code (line 235 of the minimal theme): You will be able to remove this code and any other accompanying code that you do not want on your page.

How to make all of your product images the same size

  • You may notice that when you add products to a collection page, they are all different heights and do not format properly. There is an easy piece of code to style those images so that they are all the same height and will align into perfect rows on your page.
  • Placed in the product-loop snippet on the template editor

  • BlackMilk clothing is incredible and your images will begin to align like theirs

Adding a Search bar with HTML and Liquid

You may want to add a large search bar to your page to encourage your customers to search for your products. Search bars, when added properly, can be aesthetically pleasing and add balance to a page. The following code added the search bar to the blogs page: (click on Learning HTML in the top left)

There may be a number of new items here that will add a level of complexity, and those are not HTML, but liquid. There is a list of Liquid variables here. Liquid is very easy to read and is used to add the simplicity of Shopify. Blog.title is telling the reader that the title of the blog should be there. This does not need to be changed as the title of the blog changes for each page, it will read the information and change it for each page. Easy right?

We will continue to talk more about Liquid later as it is added throughout the code of our stores.

Adding tabs to a Page

  • You may have noticed many of these pages/blog posts have tabs in them, and adding them to your shopify store is very simple. Take a look at this code as a brief introduction to lists in HTML.

    Terminology

    ul - Unordered list, groups content together through a tag

    li - Ordered List, traditionally used to make a list with bullet points.

    In this code we are making an id called tab1, or basically a link, and then later on we are assigning what the link activates, which is the switching of tabs. In my code, I am using tab15-17 due to the fact that I have already used tab1-14 on prior posts and when they are listed on a page together, only one of them will work. If you are following a similar setup on your store, be sure to change the tab id so that your tabs will work perfectly on all page setups.

HTML Attributes

There are three main attributes that can be used to classify tags in HTML.

 

Class Refers to a class in a stylesheet and specifies that classname to an element.
id Specifies a unique ID for an element
Style Specifies inline CSS style for an element without needing an external stylesheet

Links and Images

  • Any item of text on a page can be converted to a link through the a href tag, and similarly, any image can be pulled in to the page from an external link with the img src tag. In the example you can see how to convert text to a link, show the source of an image, then you can combine the two, to turn an image into a link
  • Home Page Owl
  • If we add the link around the image source, then we can turn any image into a link.

Creating a Table

  • Let's start out with the basic fundamentals of HTML, creating a table to organize data. Whenever you think, how do I make words, pictures, anything appear beside each other, or how do I layout data in an organized way...tables are the way to go...except that divs are better, but we will get there.

    Basic components:

    <table> - creates the table that will bundle content together

    <tr> - Table Row, organizes data by row

    <td> - The data within the row, creating columns, as many as you want in the table. Just don't forget that for every tag that you open, you need a closing tag that starts with a / and looks like </table>

     

  • <table>

    <tr>

    <td>

    Draw the Owl

    </td>

    </tr>

    </table>

  • Draw an Owl
  • Drawl an Owl

Creating a Heading

  • Headings are used to format content. While not necessarily always true, the higher number of heading means that the content is smaller, with H1 tags being the main title for any page. Without an H1 tag, a site will rank lower with Google, as not seeming to have a clear purpose or sentence to categorize it. Commonly a website will have between h1 all the way to an h7 tag to categorize headings throughout the site. The most commonly used form of text is the paragraph, which is just a p.

  • Draw The Owl

    Draw The Owl A Bit Smaller

    Draw Even Smaller

    Paragraph Owl

Creating your first page with HTML

  • When creating an HTML document, you must format it with the opening Doctype tag, indicating that is is an HTML document, Opening up the HTML, and then indicating that the body content is ready to begin. Shortly we will introduce the Head Tag, which will store the external stylesheet if there is one, and other related content that is not going to appear on the page. Any code that is in the body tag will be presented on the page.

  • Drawl the Owl Header


    Draw the Owl Content

© 2025 Draw The Owl.