How can I customize icon sizes and alignment in Prestige Theme?

Store Design
1

Hi,

I’ve trying for so long to have an icon list like this one.

Captura de pantalla 2022-01-18 a las 11.06.49.png
Captura de pantalla 2022-01-18 a las 11.06.49.png1422×398 31.9 KB

I’ve found a code provided from Shopify, but at this point it won’t let me personalize de size of the icons, and as well i’ve having issues with the align items (they should appear align centered and centered in the page)


## {{ section.settings.title | escape }}

{%- if section.blocks.size > 0 -%}
  
    {%- for block in section.blocks -%}
      - {%- if block.settings.link != blank -%}
          
          {%- endif -%}

            {%- if block.settings.image != blank -%}
              {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt }}
            {%- else -%}
              {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}

          {%- if block.settings.link != blank -%}
          
          {%- endif -%}
         

  {{ block.settings.logo_text }}

      
    {%- endfor -%}
  

{%- endif -%}

{% schema %}
{
  "name": "Logo list",
  "class": "index-section",
  "max_blocks": 10,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Logo list"
    },
    {
      "type": "select",
      "id": "logo_width",
      "label": "Logo width",
      "default": "160px",
      "options": [
        {
          "label": "Extra Small",
          "value": "100px"
        },
        {
          "label": "Small",
          "value": "125px"
        },
        {
          "label": "Medium",
          "value": "160px"
        },
        {
          "label": "Large",
          "value": "175px"
        },
        {
          "label": "Extra Large",
          "value": "200px"
        }
      ]
    }
  ],
  "blocks": [
    {
      "type": "logo_image",
      "name": "Logo",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link",
          "info": "Optional"
         },
			{
			"type": "richtext",
			"id": "logo_text",
			"label": "Text"
			}

      ]
    }
  ],
  "presets": [
    {
      "name": "Logo list",
      "category": "Image",
      "blocks": [
        {
          "type": "logo_image"
        },
        {
          "type": "logo_image"
        },
        {
          "type": "logo_image"
        },
        {
          "type": "logo_image"
        }
      ]
    }
  ]
}
{% endschema %}

Can anyone help with this?

1 Like
2

@AnnaWolflamb

Welcome to the Shopify community!
Thanks for your good question.

Try this code:

https://shopify.github.io/liquid-code-examples/example/logo-list

3

Thanks for your answer, but i already tried that code. My code actually is that one with some additional things like text block. Do you know how to add that?

4

@AnnaWolflamb
Check this link:

https://easycodeguide.com/how-to-build-a-customizable-logo-list-section-on-your-shopify-homepage.html

5

That code doesn’t include text and as well it shows icons like this

Captura de pantalla 2022-01-18 a las 11.48.46.png
Captura de pantalla 2022-01-18 a las 11.48.46.png1640×190 32.8 KB

6

@AnnaWolflamb
You can add the text field and the padding their.

if you are familiar to the code then you can do it.

7

I’m not familiar with the code.. That’s why i’m asking :slightly_smiling_face:

8

Hi,

I want to add text with icons. FREE EXPRESS DELIVERY, SUPPORT 24/7, SATISFACTION GUARANTEE, AND FREE RETURNS. title, link and description.

I tried the codes but I can not manage it.

9

I’m looking to doing the same!

10

Did you find the solution?

11

Not yet no