Logo list with text underneath

nikkoscott
New Member
5 0 0

I'm trying to add a section with logos where I can add text underneath each image. My theme is Debutify. I would prefer to be able to add a moving video background, so if this is possible please also include this in the instructions. But the text is the main concern. I'd like the format and so on to resemble the picture on the bottom. I'd also like to have a linked button to "read more" that leads to another page. My plan is to have 8 icons with text boxes underneath each one, and one larger header at the top of the section, with "read more" button at the bottom. I either need detailed instructions on how to add code to the logo section or add someone as staff.

 

 

Screen Shot 2019-05-05 at 9.13.55 PM.png

Screen Shot 2023-01-24 at 6.33.34 AM.png

Replies 4 (4)

Salil17
Shopify Partner
86 5 12

If you are familiar with HTML & CSS you can copy the code from the website you have screenshot from by using dev tools.

debutifytechsup
Shopify Partner
124 16 53

Hey @nikkoscott

 

Assuming you are using version 4.10.1 and up. On Shopify's admin > themes > desired theme > three dots > edit code.

 

Search for the file named "logo-list.liquid" and replace it with the following code. 

<div id="section-{{ section.id }}" class="{% unless section.settings.show_on_desktop %} medium--hide large--hide{% endunless %} {% unless section.settings.show_on_mobile %} small--hide{% endunless %} {{ section.settings.section_style }}" data-section-id="{{ section.id }}" data-section-type="logo-list-section">
  <div class="box box-small">
    <div class="wrapper">

      {%- if section.blocks.size > 0 -%}
         {%- unless section.settings.title == blank -%}
        <div class="text-center spacer-bottom-sm">
          <h2 class="h1">{{ section.settings.title | escape }}</h2>
        </div>
        {%- endunless -%}
      <div class="grid grid-xsmall justify-center align-center">

        {%- capture column_width -%}
          {%- render 'block-width' -%}
        {%- endcapture -%}

        <div class="grid__item flex-auto">
          <div id="LogoList-{{ section.id }}"  class="grid grid-xsmall justify-center dbtfy_logo_list {% if section.settings.slider_logo_list and section.blocks.size > 1 %}slick slick-logo-list{% endif %}"
            data-count="{{ section.blocks.size }}"
            data-arrows="{{ section.settings.arrows }}"
            data-dots="{{ section.settings.dots }}"
            data-autoplay="{{ section.settings.autoplay }}"
            data-autoplayspeed="{{ section.settings.autoplayspeed | times: 1000 }}" >
             <!-- Blocks -->
            {%- for block in section.blocks -%}
              <div class="grid__item flex-auto logo-bar__item spacer-bottom-sm small--one-whole" 
                {{ block.shopify_attributes }}>
                <div style="background-color: transparent;" class="card">
                  <div class="card-body" style="max-width:172px;">
                    {%- if block.settings.link != blank -%}
                      <a href="{{ block.settings.link }}" class="image-link" {% if block.settings.targe_blank %}target="_blank"{% endif %}>
                    {%- endif -%}

                      {%- if block.settings.image != blank -%}
                        <img class="logo-bar__image imgset lazyload radius-none{% if section.settings.image_gray %} image-gray{% endif %}"
                        {% render 'lazysizes', img: block.settings.image, img_type: 'retina', img_height: section.settings.image_height %}
                        alt="{{ block.settings.image.alt }}">
                      {%- else -%}
                        <div style="height: {{ section.settings.image_height }}px; width: {{ section.settings.image_height }}px; margin: 0 auto">
                          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                        </div>
                      {%- endif -%}

                    {%- if block.settings.link != blank -%}
                      </a>
                    {%- endif -%}

                    {%- if block.settings.text != blank -%}
                      <div class="card-footer-xs">
                        <p>{{ block.settings.text }}</p>
                      </div>
                      {%- endif -%}
                  </div>
                </div>
              </div>
            {%- endfor -%}
          </div>
        </div>
      </div>
      {%- else -%}
        {%- render 'no-blocks' -%}
      {%- endif -%}

    </div>
  </div>
</div>

{% schema %}
  {
    "name": "t:sections.logo_list.name",
    "class": "logo-list-section",
    "max_blocks": 10,
    "settings": [
       {
        "type": "checkbox",
        "id": "show_on_desktop",
        "label": "t:sections.logo_list.settings.show_on_desktop.label",
        "default": true
       },
       {
        "type": "checkbox",
        "id": "show_on_mobile",
        "label": "t:sections.logo_list.settings.show_on_mobile.label",
        "default": true
      },
      {
        "type": "text",
        "id": "title",
        "label": "t:sections.logo_list.settings.title.label",
        "default": "Featured on"
      },
      {
        "type": "select",
        "id": "section_style",
        "label": "t:sections.logo_list.settings.section_style.label",
        "default": "section-blank",
        "options": [
          {
            "value": "section-blank",
            "label": "t:sections.logo_list.settings.section_style.options__1.label"
          },
		      {
            "value": "section-default",
            "label": "t:sections.logo_list.settings.section_style.options__2.label"
          },
          {
            "value": "section-border",
            "label": "t:sections.logo_list.settings.section_style.options__3.label"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "image_gray",
        "label": "t:sections.logo_list.settings.image_gray.label",
        "default": true
      },
      {
        "type": "range",
        "id": "image_height",
        "label": "t:sections.logo_list.settings.image_height.label",
        "min": 20,
        "max": 100,
        "step": 2,
        "unit": "px",
        "default": 30
      },
      {
        "type": "header",
        "content": "t:sections.logo_list.settings.header__1.content"
      },
      {
        "type": "checkbox",
        "id": "slider_logo_list",
        "label": "t:sections.logo_list.settings.slider_logo_list.label",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "arrows",
        "label": "t:sections.logo_list.settings.arrows.label",
        "default": true
      },
	    {
        "type": "checkbox",
        "id": "dots",
        "label": "t:sections.logo_list.settings.dots.label",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "autoplay",
        "label": "t:sections.logo_list.settings.autoplay.label",
        "default": true
      },
      {
        "type": "range",
        "id": "autoplayspeed",
        "label": "t:sections.logo_list.settings.autoplayspeed.label",
        "min": 3,
        "max": 10,
        "step": 1,
        "unit": "s",
        "default": 5
      }
	  ],
	  "blocks" : [
	    {
        "type": "logo",
        "name": "t:sections.logo_list.blocks.logo.name",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "t:sections.logo_list.blocks.logo.settings.title.label",
            "info": "t:sections.logo_list.blocks.logo.settings.title.info"
          },
		      {
            "type": "image_picker",
            "id": "image",
            "label": "t:sections.logo_list.blocks.logo.settings.image.label"
          },
           {
            "type": "text",
            "id": "text",
            "label": "Text",
            "default":"Add text here"
          },
          {
            "type": "url",
            "id": "link",
            "label": "t:sections.logo_list.blocks.logo.settings.link.label"
          },
          {
            "type": "checkbox",
            "id": "targe_blank",
            "label": "t:sections.logo_list.blocks.logo.settings.targe_blank.label",
            "default": false
          }
        ]
      }
    ],
	  "presets": [
      {
        "name":  "t:sections.logo_list.presets.name",
        "category": "t:sections.logo_list.presets.category",
		    "blocks": [
          {
            "type": "logo"
          },
          {
            "type": "logo"
          },
          {
            "type": "logo"
          },
          {
            "type": "logo"
          }
        ]
      }
    ]
  }
{% endschema %}

 

This will add a text input to the "Logo list" section, where you will be able to edit the logo and text dynamically. 

debutifytechsup_0-1674599788980.png

 

Thank you for choosing Debutify!
Technical Support Team | Debutify CORP
D_Juhasz
Tourist
12 0 3

Well, it doesn't work for me, the whole theme crashes...
My theme is debut, which may not be the same as debutify

Does anyone have any solutions?

debutifytechsup
Shopify Partner
124 16 53

Hi @D_Juhasz 

Sorry, the code provided will only work for the Debutify theme.

Thank you for choosing Debutify!
Technical Support Team | Debutify CORP