Best way to create a row of images in Shopify code

Highlighted
Tourist
11 1 2

Hi all, 


I would like to add the standard row of images in Shopify to show the Brands we have worked with.

 

What is the best way to do this in Shopify? Do I have to edit one of the sections 

 

In HTML I would write something like below with display: flex and the right margin properties.

 

    <div class="brandscontainer">
        <img class="brands" alt="True Religion Logo" src="https://cdn.glitch.com/06c93a25-52fb-410a-a298-3adee66a0ca0%2Ftr_horseshoe_black-01.svg?v=1560362960713">
        <img class="brands" alt= "True Religion New Logo" src="https://cdn.glitch.com/06c93a25-52fb-410a-a298-3adee66a0ca0%2FTR_NewLogo_FIN-01.svg?v=1560362957824">
        <img class="brands" alt="WizKid Starboy Logo" src="https://cdn.glitch.com/06c93a25-52fb-410a-a298-3adee66a0ca0%2FSB.svg?v=1560362935949">
        <img class="brands" alt="Shisha Sunday Logo" src="https://cdn.glitch.com/06c93a25-52fb-410a-a298-3adee66a0ca0%2FShisha%20Sundays%20logo.svg?v=1561571303314">
      </div>

What would this look like in liquid?


5 logo-01.jpg

0 Likes
Highlighted
Shopify Partner
101 17 22

Hi @JJokocha 

 

The best way will be to use a section with blocks.

 

So for example you can create a section called sections/logos.liquid with the following code:

 

<div class="brandscontainer">
  {%- for block in section.blocks -%}
    {%- assign _block = block.settings -%}
    {%- assign block_logo = _block.logo -%}
    {{ block_logo | img_url: '300x' | img_tag: block_logo.alt, 'brands' }}
  {%- endfor -%}
</div><!-- /.brandscontainer -->

{% schema %}
{
  "name": "Logos",
  "blocks": [
    {
      "type": "logo",
      "name": "Logo",
      "settings": [
        {
          "type": "image_picker",
          "id": "logo",
          "label": "Logo"
        }
      ]
    }
  ]
}
{% endschema %}

And call it where you need to show these logos like so:

 

{% section 'logos' %}

That's the more administration friendly way since you will be able to add multiply logos.

1 Like
Highlighted
Tourist
11 1 2

Thanks for the quick response.

 

I have created the section logos.liquid with the code you suggested.

 

Screenshot 2020-03-02 09.32.22.png

 

But I am stuck on where to call it?

 

Do I need to go to another existing template or page and call it before the closing 

{% endschema %}

 or is it something else?

 

Also, how do I actually upload/link to the image? I can't see a new section created in the Debut template (quick demo) after creating the section in code. Or would I need to link to the file in Shopify's file manager in the code similar to what we do in HTML?

 

Thanks

 

0 Likes
Highlighted
Shopify Partner
101 17 22

Hi @JJokocha 

 

You need to call it outside of a section, you can't call it below {% endschema %} since it will mean that you are inside a section and you call a section inside a section.

 

I don't know where you like to output it. If you want to be global call it in the layout/theme.liquid file if you need on the product page call it in the templates/product.liquid.

 

As for the image you upload it in the section that is called Logos depending where you added the section. If you add the section in the layout/theme.liquid it will be present in the customize panel no matter where you enter but if you add it in the product.liquid template it will be visible only on the customize panel when you are on a product page.

 

1 Like
Highlighted
Tourist
11 1 2

Okay thanks for this, it's been good guidance.

The way I solved this, I already a section called Logo List. I went into the code and found the name of the class that was containing all the images and edited the max-width property of the Theme.scss file.

0 Likes
Highlighted
Tourist
10 0 1

I tried this solution and it worked! (btw I'm not a coder at all, it's my first time trying to play with code area)

 

However I can't move this section up/down as I can the other ones. How can I make it do that? 

 

I added it in the code here and then it showed up when I went to customize theme (see screenshots below)

Annotation 2020-04-21 191316.jpg

Annotation 2020-04-21 191332.jpg

0 Likes
Highlighted
Tourist
11 1 2

Hi Moaz,

 

Would you be able to send a loom screen share?

0 Likes