Product grid layout

Topic summary

Goal: show the product title on the first line and the colour on a second line in the collection grid. Currently the colour is embedded in the product title (e.g., “High-Waisted Leggings Black”).

What was tried and outcome:

  • Added an HTML line break (
    ) inside the product title. This successfully split the lines on the storefront.
  • Asked about styling the colour text; advised to use CSS to change its size/colour targeting the colour term.

New issue raised:

  • The literal
    now appears in backend product lists and reporting. Reply: there’s no alternative as long as colour remains part of the title.

Backend setup discussion:

  • If colour is removed from the title, the line break hack isn’t needed.
  • Sought a better way to handle multiple colours for one product; product variants (option like colour) were tried but don’t suit the site.
  • Suggested approach: create each colour as a separate product and consult Shopify Support for feasibility/implementation.

Status:

  • Partially resolved (front-end display works) but with backend side effects. Optimal data model (variants vs. separate products) remains undecided; next step is to evaluate separate products or revisit variants with Shopify’s help.
Summarized with AI on January 1. AI used: gpt-5.

@Powercut - if you remove color title, you do not need