Narrative Theme: Adding Section with multiple columns

New Member
6 0 0

I'm currently using the Narrative Theme. I can't seem to figure out how to create a new section on the homepage with multiple columns. There doesn't seem to be an option when adding a section from the theme customization feature. It's looking like I may have to use custom HTML. Does anyone know how I can replicate the below structure?

 

custom content columns.jpg

0 Likes
Shopify Expert
4019 562 963

Hi @chazzy 

Add below code at to pf section->footer.liquid file

 <div id="custom_div">
      <div>
        <img src="//cdn.shopify.com/s/files/1/1224/3734/files/ECO-FRIENDLY.png?29027">
        <span>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</span>
      </div>
      <div>
        <img src="//cdn.shopify.com/s/files/1/1224/3734/files/ECO-FRIENDLY.png?29027">
        <span>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</span>
      </div>
      <div>
        <img src="//cdn.shopify.com/s/files/1/1224/3734/files/ECO-FRIENDLY.png?29027">
        <span>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</span>
      </div>
    </div>

Add css in Asset->theme.scss file at bottom:

#custom_div {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;background-color: #efefef;}
#custom_div > div {height: 100%;padding: 12px;margin: 25px;}
#custom_div img {float: left;width: 50px;height: 50px;}
#custom_div span{padding-left: 80px; display: block;}
@media only screen and (max-width: 767px) {#custom_div { display:block;}}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
6 0 0

Thanks @Jasoliya 

I will give it a try and report back to you. In the worst case, I may reach out directly to you if I get stuck. Is that okay? 

0 Likes
New Member
4 0 0

Hey.  Did this work?  I'm looking to do the same. 

0 Likes
Shopify Expert
4019 562 963

have you tried it? if so let me know hat issue getting. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
4 0 0

I have asset/theme.scss.liquid, does that matter?

0 Likes
Shopify Expert
4019 562 963

Does not matter you can add in any css file 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes