How can I change product title and price format?

Topic summary

A user seeks to modify their product page layout, specifically changing how product titles and prices display. They provide before/after screenshots showing the desired transformation.

Initial Response:

  • One contributor provides CSS code to be added to the theme.liquid file (above the tag) to achieve the formatting change
  • Requests marking as solution if helpful

Alternative Perspective:

  • Another user notes the screenshots show two different components: a product grid versus a slider/carousel
  • Points out these require completely different code approaches
  • Suggests checking theme settings for slider/gallery options first
  • Indicates custom theme work or an app may be needed if the theme lacks this functionality

Follow-up Issue:
The original poster asks how to adjust product images so they properly fit the column layout, noting some images appear cropped or incomplete. Clarification is being requested on what “match to columns” means specifically.

Status: Ongoing discussion about image sizing/formatting within the new layout.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.

hi , i would like to ask how to turn from this (product title , price)

to this

Hi @Pandy1 ,

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

Result:

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

Check theme settings for slider section, or the gallery for a slideshow setting.

The first screenshot is of a product grid, the other reference screenshot is of a slider with products.

Very completely different types of code.

If your theme does not have that type of section you need a theme customization or an app.

If you need this customization then contact me by email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

1 Like

thx for sharing , could u tell me how to edit images to match to columns?

can you explain what “match to columns” mean?

Because the images are missing some parts , i would like to edit it to be adapted to the columns