Display Product Price And Title Above Product Image In Shopify Dawn Theme

This is another example of simply moving some existing code around to achieve a desired outcome. I seem to do better with these types of small e-commerce ‘hacks’ than with a complete ‘start from scratch’ type of project. I’m piggybacking off of a recent blog post I wrote on moving the product title above the image. This time, we are moving the product price on the Shopify Dawn theme collections page as well. Read on!

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 v11.0 on my Shopify Partners development store. Be sure and back up your theme files prior to any custom coding. Also, based on my novice knowledge of Shopify, any custom code changes can be lost when upgrading theme versions so keep that in mind if you implement any custom code on your online store.

Similar: Display Product Title Above Image On Shopify Dawn Theme Collections Page

To move the product price on the collections page, we have to locate this code in the card-product.liquid file:

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
{%- if card_product.quantity_price_breaks_configured? -%}
<div class="card__information-volume-pricing-note">
<span class="caption">{{'products.product.volume_pricing.note' | t }}</span>
</div>
{%- endif -%}

Then place the product price code along with the code for the product title, underneath this code in the same card-product.liquid file:

<div class="card-wrapper product-card-wrapper underline-links-hover">
<div
      class="
        card card--{{ settings.card_style }}
        {% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
        {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
        {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
        {% if extend_height %} card--extend-height{% endif %}
        {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}
        {% if horizontal_class %} card--horizontal{% endif %}
      "
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
    >

Here is the group of liquid code I moved:

<a
href="{{ card_product.url }}"
                id="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }}"
                class="full-unstyled-link"
                aria-labelledby="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
              >
                {{ card_product.title | escape }}
              </a>
  {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
            {%- if card_product.quantity_price_breaks_configured? -%}
              <div class="card__information-volume-pricing-note">
                <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
              </div>
            {%- endif -%}

As shown in the screenshot below, the product title and product price are displayed above the product image on the collections page. (Note: This is desktop view only at this time)

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!

---