How do I center collection headline with section settings?

Technical Q&A
1

Sorry for asking such a basic question - being rather new to Shopify I think it’s just due to my limited understanding of all the CSS in Shopify :slightly_smiling_face:

Anyway, I am working on making some adjustments to the new Dawn Theme. One of them is, that I want to be able to select if I want the headline on collection lists to be left (as it is by default), center or right.

So far I managed to define the new section for that, so it shows up as an option, the value I select is store and I can print it. So far so good. I added this code:

{
      "type": "select",
      "id": "headline_align",
      "options": [
        {
          "value": "Left",
          "label": "Left"
        },
        {
          "value": "Center",
          "label": "Center"
        },
        {
          "value": "Right",
          "label": "Right"
        }
      ],
      "default": "Left",
      "label": "Align headline"
    },

To print it I am using

{{ section.settings.headline_align  }}

All that works fine and I am happy to see how easy it is with SO2.0 to do that (will do much more like this).

However, the stupid little thing I just can’t work out is how to then center the actual headline. The headline is coded like this (standard Dawn):


  

    ## {{ section.settings.title | escape }}
    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile -%}
      {{ 'sections.collection_list.view_all' | t }}
    {%- endif -%}

First I was thinking just to add text-align: VALUE in a Style element in the Div. However, that doe not seem to work and I am also thinking it may not be the best way. But I can’t seem to find out where the used CSS is for the section headline - and if its possible to dynamically use the new sectional value I have created?

If anyone can help I would really appreciate it :slightly_smiling_face:

And yes, I am pretty sure when you tell me I realize how easy it is and how stupid I was hehe

1 Like
2

The Dawn theme is built in a way to avoid using liquid code in CSS files, therefore this is what I suggest you.

In base.css there are some basic definitions you could use:

.center {
  text-align: center;
}

.right {
  text-align: right;
}

Therefore the only thing you need to do, is to change the collection-list.liquid file and add the class .center or .right to the list of classes for the H2 element

## {{ section.settings.title | escape }}

based on the value of your new setting.

I don’t post the whole code, because I think the approach is clear, but if you need more help let me know.

1 Like
3

THANK you so much - off course! I knew it was something super simple. KISS :slightly_smiling_face:

This works


  

    ## {{ section.settings.title | escape }}
    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile -%}
      {{ 'sections.collection_list.view_all' | t }}
    {%- endif -%}
1 Like
4

Great, happy to help and I hope to spend some more time on Dawn too soon.

1 Like
5

Just additional question - sort of related to this … Would you always (with SO2.0) use standard classes and assign them as I did here?

For example, I am also thinking of adding a setting for picking a background color for the headline section. I was thinking of adding that as a style=“value” element - but to keep consistancy througout the system would you do a class instead?

6

Difficult to answer this one, I probably should read some Dawn principle guidelines, but as far as I see developer are not giving the possibility at the moment to customize the elements’ color in the different section and they keep using the colors defined in Theme Settings → Color

In this case I think that I would also add the color inline, in the style property, as you suggest.

It seems the best solution to be sure the color is not override by other CSS rules.

The other possibility I see is to extend the Theme Color scheme and add more variables there related to different elements of your template.

Category Group

Headline Text Color

Headline Background

etc.

7

Thanks - so far I did it this way, which works fine. Just not sure if its “the right” way to follow protocol :slightly_smiling_face:

{
      "type": "select",
      "id": "headline_bg_color",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.collection-list.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.collection-list.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.collection-list.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.collection-list.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.collection-list.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "Headline BG color"
    },


  

    ## {{ section.settings.title | escape }}
    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile -%}
      {{ 'sections.collection_list.view_all' | t }}
    {%- endif -%}
8

It seems fine

1 Like
9

Hello,

I see your answer but I can’t find where to put in the .center?

   <h2 class="collection-list-title">{{ section.settings.title | escape }}</h2>

sorry I am completely clueless!

1 Like
10

Hello,

I inserted the code as you mentioned above, the section appears, but clicking the option left/middle/right doesn’t change the position of the header. What could be the problem?

Thanks!

11

Hello, 'I am sorry I don’t know where to insert the code. That was my question!

12

It depends on your theme. I am using Dawn. The template may look different in the theme you are using. You have to find the right DIV

13

I am also using Dawn