Add 2 or 3 columns to Rich Text Section on Homepage (Brooklyn)

Store Design
1

Hi,

I am trying to create 3 columns of text on the home page like in the image below. I am using the Brooklyn theme.

For the desktop site, the 3 columns need to appear like this (see image below). Website URL example: https://ambileds.com/

Freddie-Nova_0-1619740103278.png
Freddie-Nova_0-1619740103278.png2577×1130 290 KB

However, taking into account the mobile responsiveness, for the mobile site, the 3 columns need to appear like this (see image below).

Freddie-Nova_1-1619740103300.png
Freddie-Nova_1-1619740103300.png739×1600 83 KB

The Theme Editor only allows you to add sections of Rich Text to the homepage stacked horizontally. I am looking for the code which will allow me to create 3 columns of text with image as displayed in the example.

Any help is much appreciated.

2

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

1 Like
3

Thanks @Kinjaldavra for responding!

Website URL: https://sunsetnova.nl/

Password: fahtri

As you can see on the image below, the Theme Editor only allows me to place 3 separate sections of Rich Text stacked below each other. The objective is to create 3 columns instead for the desktop page.

Freddie-Nova_1-1619775357329.png
Freddie-Nova_1-1619775357329.png605×405 51.8 KB

However, because of the mobile responsiveness, for the mobile page it needs to be as mentioned before (see image below):

Freddie-Nova_0-1619775325502.png
Freddie-Nova_0-1619775325502.png185×400 16.3 KB

I came across this site explaining how to add 3 columns to pages in Shopify, however I am not sure whether they are referring to the homepage also:

https://maximus.agency/how-to-add-2-or-3-columns-to-pages-in-shopify/

Awaiting your reply!

4

@Freddie-Nova please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 769px){
.template-index .rich-text-section{
    width: 33.33% !important;
    float: left !important;
    padding:12px ; 
}
}

@media only screen and (min-width: 429px) and  (max-width: 769px) {
.template-index .rich-text-section{
    width: 50% !important;
    float: left !important;
    padding:12px ; 
    
}
}

@media only screen and (max-width: 429px){
.template-index .rich-text-section{
    width: 100% !important;
    float: left !important;
    padding:12px ; 
    
}
}
3 Likes
5

Hi @Kinjaldavra , you are an absolute legend! It worked. I do have a few questions.

Is there a way to decrease the amount of space between each column (see image below).

Freddie-Nova_0-1619778505064.png
Freddie-Nova_0-1619778505064.png3817×1008 303 KB

And I am very curious if it is possible to add images above each section as displayed in the image below.

Freddie-Nova_1-1619778575243.png
Freddie-Nova_1-1619778575243.png2161×655 102 KB

Website URL example: https://ambileds.com/

6

@Kinjaldavra I inspected the elements of the columns sections, and it seems to be that it is the width of each section that is creating the amount of white space (see image below):

Freddie-Nova_0-1619778903027.png
Freddie-Nova_0-1619778903027.png3814×1339 760 KB

7

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-index .large--two-thirds {
    width: 100% !important;
}
.template-index  .push--large--one-sixth{
    left: 0  !important;
}
4 Likes
8

Hi Naztech,

I would like to add similar to my store,

3 icons with text below each icon

9

@Kinjaldavra kudos - that is awesome that you provided such a precise solution.

i tried the code within our Editions theme and didn’t work, so i’m guessing either the code was specific to the Brooklyn theme, or perhaps because the Editions theme’s asset is theme.css.liquid ?

also posting it as a separate question if you wanna jump in there.

thanks in advance.

Mateo - front-end designer

(aside: it’s kind of a basic design feature for the builders i’ve worked with, my 1st shopify gig.)

10

ok please share your site url and if password then provide paassword

2 Likes
11

Hi @Kinjaldavra

This is a great personalised solution! We are looking to do the same thing on our store, for the ‘Why Us’ section on the homepage.

Would you be able to help? We want the right text to be three colours side by side that stack on mobile, just like what you did on the original.

Store link: https://thebespokesignhouse.com/

Many thanks,
Kris

12

Thank you for your swift response to help me and my store on this @Kinjaldavra - we really appreciate it!