Venture Theme - Featured Collection - Title Display

Store Design

Topic summary

A user seeks help adding a line break to a featured collection title on their homepage using the Venture theme. They want the title to match the formatting of other collection titles but only on the homepage, not on the actual collection page.

Solutions Provided:

Two experts offered CSS-based solutions:

  • Add custom CSS code to the theme.scss.liquid file (located in Assets folder)
  • Target the .featured-card__title class with properties like max-width or width set to specific values (160px or 75%)
  • Include margin: 0 auto for centering

Outcome:

The original poster confirmed the solutions worked and thanked both contributors. The issue appears resolved through CSS modifications rather than inserting HTML break tags directly into the collection title.

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

Hi All,

Please can someone help me.

I would like to add a line break to the title of a featured collection on my homepage (see screenshot below).

Thanks in advance!

https://electricrideco.com/

Screen Shot 2022-11-06 at 10.33.37 AM.png
Screen Shot 2022-11-06 at 10.33.37 AM.png3024×1666 629 KB

1 Like
2

Hi @guyv
In this case I don’t know why you want to add break line in collection header.
But if you want to add bread line you can try to add this html tag into your collection title

expert-rookie-1_ Shopify 2022-11-06 11-22-48.jpg
expert-rookie-1_ Shopify 2022-11-06 11-22-48.jpg2740×1650 167 KB

1 Like
3

@ExpertRookie

Thanks for your reply.

The reason I want the break line is so that it looks the same as the other collection titles.

I don’t want to add a break line on the actual collection page as I only want this break line to display in the collection title on the homepage.

Can you think of any other solution?

4

@guyv

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.featured-card__title {
    max-width: 160px;
    margin: 0px auto;
}

KetanKumar_0-1667715410897.png
KetanKumar_0-1667715410897.png1898×942 308 KB

1 Like
5

Hi @guyv

Try to add this code at the bottom the editor > assets > theme.scss.liquid file

.template-index .featured-card__header p.h1.featured-card__title {
    width: 75%;
    margin: 0 auto;
}

Try it and let me know

1 Like
6

@ExpertRookie @KetanKumar

Thanks for your help!

1 Like
7

@guyv

You are welcome

8

@guyv

its my pleasure to help us