Change Product Title Width on Collection and Product Grid with Atelier theme

Shopify Discussion

Topic summary

A user is experiencing layout issues with product titles in the Atelier Shopify theme on both desktop and mobile views.

Main Issues:

  • Desktop: Product titles break to a new line prematurely despite available space
  • Mobile: Titles appear randomly positioned instead of left-aligned

User’s Investigation:
The user located relevant code in the product-card.liquid file showing a product title configuration with "width": "100%" but is unsure what modifications are needed.

Additional Problems Listed:

  • Product page arrows/chevrons missing on mobile
  • Unable to reduce desktop columns from 5 to 4
  • Need to add footer border/divider
  • Text width adjustment needed on ‘The Truth’ page
  • Mobile filter auto-zooms into price box
  • Mobile menu shows all items instead of collapsible main categories

Status: The discussion remains open with no solutions provided yet. Screenshots were shared to illustrate the title alignment problems.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Love the look of the Atelier theme but having a lot of issues with it. One of them is that on the collection/product grid page, the title just stops halfway through and creates a new line on desktop even though there’s a lot of empty space. Here’s a link to the website (password: 1) https://n7kjwu-6i.myshopify.com/collections/womens-activewear

Screenshot 2025-06-07 at 1.36.37 PM.png
Screenshot 2025-06-07 at 1.36.37 PM.png694×978 204 KB

And then on mobile the title is randomly positioned when it should start on the left side of each product.

Screenshot 2025-06-07 at 1.42.46 PM.png
Screenshot 2025-06-07 at 1.42.46 PM.png730×978 232 KB

How can I fix this? Thanks!

2

other issues if anyone wants to help fix them as well:

  • The arrows/chevrons on the product page only show up for desktop but they’re not showing up on mobile, how can i make it so they show up on both places?
  • I want to only have 4 product columns on the desktop site but it has 5 columns with no option to change it
  • How do i add a border line/divider above the footer
  • How do i increase the width of the text on page ‘The Truth’
  • When you click the filter on mobile it automatically zooms into the price box, how do i stop this from happening?
  • Mobile menu is showing all menu items but i only want it to show the main items and then you click those to drop down the items inside those
3

do you know what file that would be in?

4

i found this in the product-card.liquid file, not sure what i would change to fix the issue:

“product_title”: {
“type”: “product-title”,
“settings”: {
“product”: “{{ closest.product }}”,
“width”: “100%”,
“type_preset”: “h5”
}