Change the position of category names in the Focal theme

Shopify Discussion

Topic summary

Issue: A Shopify store owner using the Focal theme wants to reposition category names from the center of images to below them.

Store Details: The site is berloquesjoias.com, currently using Portuguese as the primary language.

Attempted Solution: Community helpers provided CSS code to modify the collection list layout:

  • Target files: base.css, style.css, or theme.css in the Assets folder
  • Add padding and positioning adjustments to .list-collections__item classes

Current Status: The CSS modifications haven’t fully resolved the issue. After implementing the suggested code, the layout appears broken on both desktop and mobile views (screenshots provided). The original poster believes additional changes are needed, specifically:

  • Reducing font size
  • Adjusting the grid layout

Resolution: Still ongoing - the problem remains unresolved with further customization needed.

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

No tema focal os nomes das categorias de produtos ficam no centro da imagem, gostaria que ficassem abaixo das imagens como na foto anexa aqui, alguém tem uma solução?

Moda-Feminina_068cc6e7-2675-4509-b64b-0cdb3074b2eb_300x.png
Moda-Feminina_068cc6e7-2675-4509-b64b-0cdb3074b2eb_300x.png1126×279 49.1 KB

1 Like
2

Hi @aragaomatheus

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,

Sahil

1 Like
3

Hi @aragaomatheus

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

4

Claro, o link da minha loja é www.berloquejoias.com

5

Of course, the link to my store is www.berloquejoias.com

1 Like
6

Thanks for the info, I try to search the collection list same the image you provide but I only see this one.

Made4uoRibe_0-1699725750707.png
Made4uoRibe_0-1699725750707.png1803×566 121 KB

Is this the one you mean? If it is check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.list-collections__item-info {
    top: 90% !important;
}
.list-collections__item-list a {
    padding-bottom: 60px;
}
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
7

I modified the css as you advised me, but it looked like this on desktop and mobile:

Desktop

Screenshot_28.png
Screenshot_28.png1336×321 120 KB

Mobile

Screenshot_27.png
Screenshot_27.png367×233 28.5 KB

1 Like
8

Please add this one.

.list-collections__item-info.text-container {
    padding-bottom: 20px !important;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

9

It still didn’t fix it, I believe I would need to reduce the font size and change something in the grid

Mobile
Mobile436×340 40.8 KB

Desktop
Desktop1568×354 145 KB