Collection Pages

Store Design
, ,
1

I am currently using the Dawn Theme I believe and wondered if it was possible on a Collection page to add additional text info under the title and price if a product?

What would the code be for this and where would it need to be added?

Screenshot 2024-10-24 132907.png
Screenshot 2024-10-24 132907.png1270×422 278 KB

2

Hey @LC181 ,

Yes, it is possible to add additional text information under the title and price of a product on a collection page in Shopify’s Dawn theme.

Follow these Steps:

  1. Online Store

  2. Themes

  3. Edit Code

Locate the Collection Product Template:

In the sidebar, open Section and find the file called main-collection-product-grid.liquid or similar depending on your theme version (the file that controls the product grid on collection pages).

If the file isn’t there, you can also check for product-card.liquid , as this is commonly used for product display on collection pages.

Edit the Template:

Within this file, look for the section where the product title and price are rendered. This typically looks like:


  {{ product.title }}

  {{ product.price | money }}

Add Your Custom Text:

Directly below the product title or price, you can insert custom HTML or Liquid code to display additional information. For example:


  
  {{ 'Free Shipping on orders over $50' }}

Alternatively, if you want this text to be dynamic or come from a product’s metafields, you can use something like:


  {{ product.metafields.custom.product_info }}

Style the New Text:

Optionally, you can add some custom CSS to make the new text fit well with the existing design.

You can either add it directly within the theme.css file or inline within your product-card.liquid file:

.product-card__custom-info {
  font-size: 14px;
  color: #555;
  margin-top: 5px;
}

Save your changes, and preview your collection page to see the additional text appear under the product titles and prices.

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

3

If this was only going on certain collection which segment in the Edit Theme section would i look for?

4

I cannot see the the code for price and product title within the ‘main -collection-product-grid.liquid’ nor can i see the ‘product.card.liquid’