Shopify Add Image to Theme Liquid | Add Image in Shopify Code

Shopify Add Image to Theme Liquid
Shopify Add Image to Theme Liquid

Searching for the Shopify Add Image to Theme Liquid? Here we have prepared article tutorial to add image in Shopify code. Images are often uploaded to stores as content for products, collections and blog posts. How can images be added to the store that fit within a specific theme? Background images, icons and logos are all examples of images that could be included in the look and feel.

This article will discuss how to reference images from your assets directory that are part the look and feel of your store rather than the content. We will show you how to use the img_tag filter to create alternative text and how to add additional HTML attributes such as id when adding images to the assets directory.

How to add an image to shopify using liquid?

Shopify Add Image to Theme Liquid for that see the Shopify wiki page on settings.html:

The settings.html file is rendered on the Theme Settings page of the Shopify Admin.

To upload an image in Theme Settings, you want the File Upload input type:

File upload
Useful for uploading assets to a theme, such as logo images, favicons, and slideshow images…

<tr>
    <th>
        <label for="my_file">File Upload</label>
    </th>
    <td>
        <input type="file" name="headerimage.png" data-max-width="500" data-max-height="300" />
    </td>
</tr>

Files uploaded through settings.html are placed in the theme’s assets folder. The name of the saved file is not determined by the original file, but rather by the name attribute of the file input tag. For example, the file uploaded through the example above would be saved as logo.png. Furthermore, Shopify will convert the image to the type specified in the name attribute.

Then you can access the uploaded file via Liquid as you would normally access assets. For example:

<a id="logo" href="/" role="banner">
    {{ 'headerimage.png' | asset_url | img_tag: shop.name }}
  </a>

If you are having trouble with this, I’d suggest asking to hire an Shopify Expert for assistance with it. An Expert would be able to place this for you in the right place s you’d like.


Shopify Add Image to Theme Liquid

Getting started

Shopify Themes allow you to upload any number of images in any format and any size to your assets folder. These images can be used as backgrounds, sprites or branding elements.

It is easy to refer to these images within a theme. Let’s say we have a headerimage.png that is for “The Soap Store” and it’s in our assets directory. This image can be output in any template by using the following Liquid syntax.

{{ 'logo.png' | asset_url | img_tag: 'The Soap Store' }}

To create an HTML img element, this approach uses two Liquid filter. The first filter, asset_url prepends the complete path to the assets directory that will be used for the store’s current theme. The img_tag filter uses the URL to create an HTML img element with an alt attribute. The value of the alt attribute is set to null if it is not specified. This is the output:

<img src="//cdn.shopify.com/s/files/1/022/8876/r/50/assets/headerimage.png?796" alt="The Soap Store">

The src attribute refers to the Shopify CDN (Content Delivery Network). Each image you add, no matter its type, will be sent to the Shopify CDN. The asset_url filter will automatically determine the location of your images when rendering the page. Your themes can be transferred from one store to the next using this approach.

While we are on the topic of URLs, find out more about what a Canonical URL is and why they are so important.

Note on an alternative text

Alt text (or “alternative texts” as it is often called) is a description of a web image that contains written text. It provides information about the image to aid the reader in understanding its meaning.

Your HTML markup will be deemed invalid without an alt attribute. This could lead to inconsistent user experiences. This is why, if the alt attribute is omitted, it will have a value of blank. This ensures that your HTML output remains valid HTML.

In the above example, we used the company name instead of just “Logo” as the alternative text. The alt attribute value of an image that contains text should match the visible text.

Add classes to the img elements

In the above example, we have specified the alt attribute. You can also add a parameter to the img_tag filter that will allow you to add class names on the class attribute to the img element. A second parameter can be added to the img_tag filter to add the class names css–-class1 and css–-class2.

{{ 'logo.png' | asset_url | img_tag: 'The Soap Store', 'css--class1 css--class2' }}

The output would be:

<img src="//cdn.shopify.com/s/files/1/022/8876/r/50/assets/headerimage.png?796" alt="The Soap Store" class="css--class1 css--class2">

You can create your own img tags for greater control

You will need to have more control over your markup at times, such as when you add additional HTML attributes like data or id. We can simply remove the img_tag filter and write the markup as we wish.

As shown in the following example, you can format the markup so that an id attribute is added to the img tag.

<img src="{{ 'headerimage.png' | asset_url }}" alt="The Soap Store" class="css--class1 css--class2" id="logo">

That’s it!

I hope you have learned some interesting new tricks like how Liquid filters can be used to generate markup images or how to add additional attributes in Liquid’s img tags. For accessibility purposes, you must always include the appropriate alt text.

Are there any other Liquid examples that show how to customize Shopify themes’ markup? Please share it below!

What is your reaction?

0
Excited
0
Happy
0
In Love
0
Not Sure
0
Silly
Ajay Patel
Ajay Patel is a marketing expert that writes a number of marketing content for guest posts, and social media marketing content, and run paid campaign on Facebook, Google Adwords, etc. He is probably writing about one or spending time enjoying his most recent marketing projects, helping the website to get more traffic, sales, and downloads.

You may also like

Leave a reply

Your email address will not be published.