How to position product badges on top of product images
As you may recall, my Shopify app Flair product badges was originally designed to work best if the badges are not placed on top of product images.
The reasoning for this choice can be summarized as follows:
- Badges on top of images can interfere with the ability for customers to view your products which could impact sales
- Badges on top of images must use minimal text due to space limitations such as “New”, or “Save” which may not convert as well
But every week or so I am asked a question similar to this one I recently received from Flair customer Paul:
We’d like the badges to sit on top of the product images in a collection’s page. Can you do this?
The good news is yes Flair product badges can be placed on top of product images.
In today’s post, I’d like to discuss putting product badges on top of your product images. We’ll discuss:
- Why you might want to put badges on top of product images
- Before we get started…
- How to position a product badge on top of a product image
Why you might want to put badges on top of product images
As I mentioned, I am asked about putting badges on top of images fairly often. The most common reason I have heard for putting product badges on top of images is for cosmetic reasons — specifically to have collection items line up visually.
For example, when only some products have a product badge, the product details will not line up as seen here:
Putting the badge on top of your product image lets you can keep things lined up horizontally like so:
Depending on your Shopify theme, and perhaps also your preferences, you may be ok with things not lining up.
However, if you want to have your product details line up on your collection pages, you may want to consider overlaying badges on top of your product images.
Before we get started…
Before we get started showing you how to put product badges on top of your product images, I think it is important to list out a few prerequisites for this post.
For starters, this technique is fairly technical. You should have at least a basic understanding of Cascading Style Sheets (CSS). You should also be fairly comfortable modifying your Shopify theme.
In addition, every Shopify theme is different so these instructions may take a bit of finesse to get working within your particular theme. You can always safely make changes to your Shopify theme by making a backup of your theme before you attempt this so you can test it out before publishing it live to your store.
Sound good? Great then let’s get started.
How to position product badges on top of product images
For this example, I’ll be using the Shopify Minimal theme combined with badges created by my Shopify app Flair product badges. We’ll cover:
- Adding a product badge to the collection product grid view
- A primer on relative CSS positioning
- Using CSS to position the product badge on top of the product image
Adding a product badge to the collection product grid view
The Minimal theme stores the collection product grid view in a file called snippets/product-grid-item.liquid. This is where we need to insert the code to add a product badge to items in our Shopify collections.
This step will be different for every theme, but most themes follow a similar pattern. We need to find the product image so we can insert our product badge relative to it.
The Minimal theme has this code (shortened for brevity) for displaying the product image:
On line 1 is a wrapper around the image and other built-in badges (not shown here) used by the Minimal theme. This wrapper is important for being able to position badges relative to the image as we’ll see below.
If we weren’t putting the product badge on top of the image, I would typically recommend inserting the product badge under the product title like this:
On line 2 above, I am simply included the Flair product badges snippet. You could put any image or your own product badge code here as well.
However, since we need to put the product image on top of the product badge we need to go about this a different way which we’ll discuss next.
A primer on relative CSS positioning
The best way to place a product badge on top of a product image is to use the CSS
position property. As the name implies, the
position property let’s you control the position of different elements on a page.
CSS positioning can be a complex topic. To explain how this works, here is a simple diagram of how we need to set things up:
The product image wrapper which we discussed above needs to be set to
position: relative. This is important as this determines how our CSS badge positioning will behave. Any elements set to
position:absolute inside of the product image wrapper will position themselves relative to the image wrapper. So if we say
top: 0, this will be the top of the image wrapper.
Then we will put the product badge inside of the product image wrapper and set it to
position: absolute. The
position: absolute let’s the product badge flow outside of the normal page elements so it will not cause the other product details to shift around. We can then move the product badge relative to the product image wrapper as we’ll see in a moment.
Using CSS to position the product badge on top of the product image
Using our example code above, we just need to move the Flair product badge snippet inside of the product image wrapper like so:
On line 2, we inserted the Flair product badge snippet inside the product image wrapper. The Minimal theme already sets the product image wrapper to
position:relative so we don’t have to. If your theme does not you may need to add this CSS positioning yourself. If your badges end up positioned relative to the entire page or some other place this may be the culprit.
The last step we need to do is set the Flair badge CSS to position it. Flair badges use the CSS class
Let’s position the badge so it shows in the top left corner as seen here:
This is the CSS code that can be used to achieve this:
On line 2 we set the Flair badge wrapper position to absolute so we can move it relative to the product image wrapper. On line 3 and 4, we position the badge to the top left corner. You could also move the badge in pixels such as
top: 10px to move it down 10px from the top. Likewise, you can move the badge from the left such as
left: 10px to move the badge 10px to the right. The
z-index property on line 5 is needed to ensure the product badge always sits on top of other elements on your theme.
Note: Flair also supports a convenient product badge snippet option to specify the positioning as part of the snippet include line. Here is the same code listed above using the Flair inline CSS option:
You can also position the badge relative to the
bottom as seen here:
And here is the corresponding CSS:
Let’s review what we just discussed about adding product badges on top of product images.
Many store owners want to put product badges on top of their product images. This is most commonly requested on Shopify collection pages to keep the product information visually lined up.
Keep in mind that putting product badges on top of images should be used with caution. You’ll want to be sure the badges do not interfere with your customers ability to see your products or it could impact your sales. In addition, product badges on top of images need to use much less text so as to minimize the interference with your products.
You can use the CSS
position property to overlay your badges relative to your product images. Using the CSS
position property you can position your product badge relative to the top, left, bottom or right of your product images for complete control.
Happy product badge positioning.