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
2461 414 519

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
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