Adding Credits to Product Images in Shopify: Utilizing Image ALT Tag


Adding Credits to Product Images in Shopify: Utilizing Image ALT Tag


In the visually-driven world of e-commerce, product images play a crucial role. Often, these images are sourced from various photographers or creators, necessitating the addition of credits to acknowledge their work. In Shopify, this can be a bit tricky since images typically don’t have extra fields for such data. But there’s a clever workaround using the ALT tag of images in the Shopify store. In this tutorial, we’ll explore how to add credits to product images on a Shopify site using the Dawn theme. The process can be adapted to other themes with minor adjustments.

Understanding the Challenge

Shopify’s platform doesn’t inherently provide a dedicated field for image credits. This limitation requires a creative solution, especially when dealing with products that have multiple images, each potentially requiring different credits. Our solution focuses on an image-level approach rather than a product-level one.

Utilizing the ALT Tag

The ALT tag in HTML is traditionally used for accessibility and SEO, describing the content of an image. We’ll repurpose this field to include our image credits.

If you prefer video tutorials over text, feel free to skip this post and watch the video below. If not, please continue reading.

Step 1: Modifying the product-thumbnail.liquid File

Firstly, navigate to your Shopify admin panel, go to ‘Online Store’ > ‘Themes’ > ‘Edit code’. Here, find the Snippets directory and add the below code to product-thumbnail.liquid file before the ending Div tag at the bottom.

{% if media.alt contains 'Credit' %}
  <div class="image-credit">{{ media.alt }}</div>
{% endif %}

We’re adding a conditional statement that checks if the image’s ALT tag contains the word ‘Credit’. If it does, it wraps the ALT tag text in a <div> element with a class image-credit. This allows us to display the credit text on the image.

Step 2: Adding CSS for Styling

Next, add the following CSS to the bottom of your Assets > base.css file to style the credits:

.product__media-item {
  position: relative;
.image-credit {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  font-size: 0.8em;

This CSS snippet positions the credit text at the bottom right of the image, with a semi-transparent background for readability.

Customizing the Trigger Word

The trigger word ‘Credit’ in the conditional statement is customizable. You can replace ‘Credit’ with any word or phrase of your choice. Alternatively, you can remove the condition altogether to display the entire ALT text, but this might include unintended text meant for SEO or accessibility.

Best Practices

  1. Consistency: Ensure consistent formatting in your ALT tags for ease of management.
  2. SEO Considerations: Remember that the ALT tag is primarily for accessibility and SEO. Include descriptive text along with the credit.
  3. Testing: Always preview your changes on various devices to ensure the credits are displayed correctly.


Adding credits to product images in Shopify requires a bit of creativity, but it’s quite feasible. By repurposing the ALT tag and using some custom Liquid and CSS code, you can effectively attribute images to their rightful creators. This solution not only enhances the professionalism of your Shopify store but also respects and acknowledges the work of photographers and artists.

Remember, the key to a successful implementation is in the details. Test thoroughly, and don’t hesitate to modify the code to better fit your theme or design preferences. Happy coding!

Make a comment

Your email adress will not be published. Required field are marked*

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.