How Do I Center The Heading Of The Featured Collection?

Store Design
, ,
1

I want the title of the featured collection to move to the center.

fouzzy_0-1692896719999.png
fouzzy_0-1692896719999.png1860Ă—711 92.7 KB

1 Like
2

Hi @fouzzy

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

1 Like
3

finity-case.com || finity!

I’d like the “Custom Phone Cases” & “Popular Phone Cases” & “Collections” title to be in the center of the page if possible! Thank You!

1 Like
4

Thank you for the information. Try 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”.

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

    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:

.collection__title.title-wrapper.title-wrapper--no-top-margin.page-width h2 {text-align: center;}

.title-wrapper-with-link.title-wrapper--self-padded-tablet-down.title-wrapper--no-top-margin {
    justify-content: center;
}
  • And save.

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

2 Likes
5

It sadly doesn’t work. I’ve tried so many codes but I don’t understand why it does not work on my store…?

1 Like
6

No worries, we can find another solution.

Try this one again.

.collection__title.title-wrapper.title-wrapper--no-top-margin.page-width h2 {text-align: center !important;}

.title-wrapper-with-link.title-wrapper--self-padded-tablet-down.title-wrapper--no-top-margin {
    justify-content: center !important;
}
1 Like
7

Nope it still does not work. Even my other custom codes stopped working… What do I do? Thank you so much for trying to help me btw!

1 Like
8

Posibility there is a problem in your base.css file.

Try another one. Go to theme.liquid file. And paste this one before the tag.
1 Like
9

Where?

fouzzy_0-1692897754842.png
fouzzy_0-1692897754842.png372Ă—220 2.14 KB

1 Like
10

Ribe_Dagandara_0-1692897843926.png
Ribe_Dagandara_0-1692897843926.png945Ă—213 7.48 KB

Like this.

1 Like
11

do i remove

{%- render "ecom_footer"-%}
1 Like
12

i pasted the code above the code I just sent and it did nothing..

13

No dont remove anything. Paste before that code.

{%- render “ecom_footer”-%}

1 Like
14

It doesnt do anything..

fouzzy_0-1692898235611.png
fouzzy_0-1692898235611.png967Ă—364 3.96 KB

1 Like
15

Did your refresh your browser? But on my side its already on the center.

Ribe_Dagandara_0-1692898621654.png
Ribe_Dagandara_0-1692898621654.png1086Ă—491 58.6 KB

1 Like
16

Huh how??

This is my view… On mobile it also doesnt show..

fouzzy_0-1692898717653.png
fouzzy_0-1692898717653.png1814Ă—750 82.9 KB

1 Like
17

Oh okay, but the collection it center right?

Can you change it to this code.
1 Like
18

The “Collections” works yes but the others doesnt..

1 Like
19

Still not working? I have another solution.
1 Like
20

Nope still doesnt work hahaha, and im still supposed to add it into theme.liquid right?