Create "As Featured On" section: Clickable Image on Narrative Homepage

New Member
3 0 0

Hi All,

 

I have been trying to figure how to create a "As Featured On" sections on the Narrative Homepage.

And the best workable solutions I have so far are:

 

1. 'Custom Content' section with 4 images under it.

Perfect sizing for the logos on mobile & website. BUT, can anyone advise me how to add links to these logo?

 

Screenshot 2019-07-12 at 1.56.21 AM.png

 

2. 'Gallery' section section with 3 images on it.

These images allow me to add links on them. BUT, can anyone advise me how to change the sizing of the logos? I am currently on 'small' section height for the logos but it 1) get distorted with square images and is 2) is too big for comfort now and needs reduction in sizing (to be similar to the custom content image size).

Screenshot 2019-07-12 at 1.59.51 AM.png

Solution to any of the above is greatly appreciated!

A big thanks in advance :)

 

 

0 Likes
Tourist
5 0 2

Hey KAIX,

It looks like you're pretty close! Here's how I would do it. 

 

1. Use the Custom Content section. 

2. Use the As Seen On text at the top the way you have it. 

3. Click Add Content and select Custom HTML

4. Paste this into the HTML field

 <div class="custom__item-inner custom__item-inner--image">
                  <div class="custom__block-image-container" style="padding-top:66.67480468750001%">
                    <a href="LINK" target="_blank">
                    <img class="custom__block-image lazyautosizes lazyloaded" src="IMAGE_URL">
                    </a>
                    <noscript>
                    <a href="LINK" target="_blank">
                      <img src="IMAGE_URL" alt="" class="custom__block-image">
                    </a></noscript>
                  </div>
          </div>

5. Replace where it says IMAGE_URL with the URL of the image you want to use and LINK with the target URL. 

6. Set Container Width under layout to 25% and leave Vertical Alignment alone. 

7. Do that 3 more times for your other links. 

 

That should do the trick!

★ Increase your conversions with simple A/B testing ★https://apps.shopify.com/neat-ab
0 Likes
Highlighted
New Member
3 0 0
Hi JackNeatABTest,


Thanks much! Wow, this solution works!


Just another question, is there a way to centralize these images under custom content when there are only 2 or 3 images in a row? Currently it requires 4 images in a row.


Appreciate your help :)
0 Likes
Tourist
5 0 2

Hey Kaix, 

No problem! I believe all you need to do to center the images if there are less than 4 is to change the Container width setting under layout in each Custom HTML area. So for example, if you have two images, change it to 50%. 

★ Increase your conversions with simple A/B testing ★https://apps.shopify.com/neat-ab
0 Likes
New Member
1 0 0

hey @KAIX , i didn't understand it, i mean ,where do i have to put that javascript?

thanks in advance, and let's connect! my insta is @firstvanq . please reply

0 Likes
New Member
3 0 0
Hi, the javascript provided is to be placed in the HTML content block - under custom content.
0 Likes