Display Product Title Above Image On Shopify Dawn Theme Collections Page

Small e-commerce layouts and design touch-ups make for a great learning experience for me. In this post, we will move the product title from its original location to just above the product image on the Shopify Dawn Theme collections page.

The Newsletter for PHP and MySQL Developers

Receive a copy of my ebook, “10 MySQL Tips For Everyone”, absolutely free when you subscribe to the OpenLampTech newsletter.

---

I’m not a Shopify pro so if you see any mistakes in the code or know of a better solution, please share them freely in the comments section.

---

For the examples in this post, I am using the Dawn theme v10.0 on my Shopify Partners development store. Be sure and back up your theme files prior to any custom coding.

On the collections page, the products are laid out as shown in this screenshot and I want to move the product title above the product image:

First, we need to locate this code in the card-product.liquid file for the product title:

<a
href="{{ card_product.url }}"
id="CardLink-{{ section_id }}-{{ card_product.id }}"
class="full-unstyled-link"
aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
>
{{ card_product.title | escape }}</a>

And place that liquid code just below this line in the same file:

<div class="card-wrapper product-card-wrapper underline-links-hover">

---

Now the code looks like this in the card-product.liquid file:

<div class="card-wrapper product-card-wrapper underline-links-hover">
            <a
              href="{{ card_product.url }}"
              id="CardLink-{{ section_id }}-{{ card_product.id }}"
              class="full-unstyled-link"
              aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
            >
              {{ card_product.title | escape }}
            </a>

And we can see the product title is now above the product image:

Thank you for reading this post. Please share it with someone else who would enjoy it as well.

---

Josh Otwell has a passion to grow as a PHP Developer, SQL expert, and technical blogger/writer.

Disclaimer: The majority of examples in this post, are performed in a personal development/learning workstation environment and should not be considered production quality or ready. Your particular goals and needs may vary. Like always, just because you can do something doesn’t mean you should. My opinions are my own.

More ways I can help

• Need hosting for your next web application or WordPress site? I highly recommend Hostinger and use them to host my niche bass fishing site. The service is second to none.
• 🔒5 Truths I’ve Come To Realize As a Self-taught Developer
• Desktop and mobile wallpapers, digital downloads, photography services, Shopify and WooCommerce customizations, and content writing – all in one E-commerce Shop. Find your next digital purchase today!

Disclosure: Some of this blog post’s services and product links are affiliate links. At no additional cost to you, should you make a purchase by clicking through one of them, I will receive a commission.

The Newsletter for PHP and MySQL Developers

Receive a copy of my ebook, “10 MySQL Tips For Everyone”, absolutely free when you subscribe to the OpenLampTech newsletter.

---

📰 Get your brand, product, or service the attention it deserves with affordable classified ad placement in the OpenLampTech newsletter. I appreciate your support!

---