How do I customise the Multicolumn section (center heading, change font, smaller icons, separate % and heading)?

Store Design
, , ,
1

image
image1378×544 84.2 KB

HHi everyone,

I’m using the default Multicolumn section in my Shopify theme (Dawn-based), and I’m trying to make it look more like a different design example I’ve attached.

Specifically, I want to achieve the following changes:

1. Center the main heading text

  • Currently the multicolumn heading is left-aligned.

  • I want the section heading centered horizontally.

2. Change the font of the section heading

  • I want to use a different font than the default theme heading font.

  • Ideally this would use either a custom font or the theme’s accent font.

3. Make the column icons/images smaller

  • The icons are currently too large.

  • I want to reduce their size while keeping them centered.

4. Increase the size of the card heading text

  • The card titles such as:
    Energy Levels +92%
    should be larger and more prominent.

5. Put the percentage and heading on separate lines
Instead of this:

Energy Levels +92%

I want this layout:

Energy Levels
+92%

with the percentage larger.

My website is loveurheart.com

image
image1845×489 49 KB

3

Hey @clementgordon

Add this CSS in your “Custom CSS” option of your section from theme customization.

h2.title.inline-richtext.h2 {
    text-align: center !important;
    font-family: 'Bungee' !important; /* Change the font to the font you want */
}
.multicolumn-card-spacing {
    text-align: -webkit-center !important;
}
.multicolumn-card-spacing * {
    width: 60px !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 0 !important;
}
h3.inline-richtext {
    display: flex !important;
    flex-flow: column !important;
}

RESULT:

image
image1178×460 53.2 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

4

It says to correct errors. Also, how do I go about making the increase the font size of the percentages?

image
image772×752 55.1 KB

5

I have updated the code, add that and try again

6

Great that works but do you know how to:

Make the main heading font smaller

Make the headings font beneath the icons bigger?

image
image1537×612 61.6 KB

8

Please add this to the bottom and make sure there’s no tags copied. It’s not great to use !important declarations for overrides but as we don’t have access to your theme code it’ll have to do. Also, if you need to change font sizing you can just increase/decrease the number so for the heading i’ve decreased to 18px from 22px and text below icons increased from 18px to 22px.

.title.inline-richtext.h2 {
   font-size: 18px !important;
}
.multicolumn-list h3 {
   font-size: 22px !important; 
}
9

Thankyou for your help