Logo Bar Customisation

Highlighted
Tourist
5 0 0

Hi, I've taken over the customisation of a custom shopify theme and want to duplicate a section to use multiple on the same page. Currently they have a logo bar section like this:

 

Screenshot 2020-02-22 at 13.41.36.png

 

On this section a person can click on each of the logos and see a quote by that company. The section is called 'press' and here is the coding:

 

<div class="new_slider">
  {% if section.settings.title != blank %}
    <div class="section-header text-center">
      <h2 style="color:{{ section.settings.pro_book_color }}">{{ section.settings.title | escape }}</h2>
    </div>
  {% endif %}
  
    
<!--   Quote -->
   
{% if settings.thisw_st != '' %}
<p>{{ settings.thisw_st }}</p>
{% endif %}
 
  {% if section.blocks.size > 0 %}
    <div class="logo-bar{% if section.settings.title_enable %} logo-bar--large{% endif %}">
    <ul class="slickslide">
      {% for block in section.blocks %}
      {% if block.settings.logo-info != blank %}
      <li><div class="logo_info"><p>{{ block.settings.logo-info }}</p></div> </li> 
      {% endif %}
     
   
      
      {% endfor %}
       </ul>
    </div>
  {% endif %}
 
  
  <div class="slick-thumbs">
    <ul>
      {% for block in section.blocks %}
      {% if block.settings.image != blank %}
      <li><img src="{{ block.settings.image | img_url: 'master' }}" alt="" class="mo_homeheader"/></li> 
      {% endif %}
     {% endfor %}
     
    </ul>
  </div>
  
  
</div>
 
{% schema %}
  {
    "name": "Logo list",
    "class": "index-section logo-section",
    "max_blocks": 20,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Logo list"
      },
  {
        "type": "color",
        "id": "pro_book_color",
        "label": "Title Text Color",
        "default": "#e7bec3"
      }
    ],
    "blocks": [
      {
        "type": "logo_image",
        "name": "Logo",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
  {
            "type": "textarea",
            "id": "logo-info",
            "label": "Description"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link",
            "info": "Optional"
          }
        ]
      }
    ]
  }
{% endschema %}

 

 

Now my liquid coding knowledge is limited, my attempt on this was to simply copy/paste this code into another section under a new name 'awards', then I wanted to put different logos for another purpose but any changes I made to 'awards' also affect the section 'press' below and the new logos override the logos in the press section. How can I make these two sections entirely separate?

 

Thanks.

0 Likes
Highlighted

Hello @rlmhidalgo,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
5 0 0
Dandydillway.com
0 Likes

@rlmhidalgo,

I only saw "Press" section.

Where is "award" section?

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
5 0 0
The award section is only on a draft theme. I can give the code in it:


<div id="awards-sec" class="page-width">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h2 style="color:{{ section.settings.pro_book_color }}">{{ section.settings.title | escape }}
</h2>
</div>
{% endif %}

{% if settings.thisw_mt != '' %}
<p>{{ settings.thisw_mt }}</p>
{% endif %}

{% if section.blocks.size > 0 %}
<ul class="logo-bar{% if section.settings.title_enable %} logo-bar--large{% endif %}">
{% for block in section.blocks %}
<li class="logo-bar__item{% if section.settings.title_enable %} logo-bar__item--large{% endif %}" {{ block.shopify_attributes }}>
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}" class="logo-bar__link">
{% endif %}
{% if block.settings.image != blank %}
{{ block.settings.image | img_url: '160x160', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
{% else %}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if block.settings.link != blank %}
</a>
{% endif %}
{% endfor %}
</ul>
{% endif %}

{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>




{% schema %}
{
"name": "Logo list",
"class": "index-section logo-section",
"max_blocks": 20,
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Logo list"
},
{
"type": "color",
"id": "pro_book_color",
"label": "Title Text Color",
"default": "#e7bec3"
}
],
"blocks": [
{
"type": "logo_image",
"name": "Logo",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "textarea",
"id": "logo-info",
"label": "Description"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "Optional"
}
]
}
]
}
{% endschema %}
0 Likes
Highlighted

@rlmhidalgo,

I think you don't need to add double code for logo list.

You added code and schema already.

Then Please Go to Customize and then Click to "Add Section" And select logo-bar

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
5 0 0

Hi, the logo bar doesn't show up on the customise section. How do I add it so I can add it dynamically?

0 Likes
Highlighted

@rlmhidalgo,

Please refer below links

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

https://www.shopify.in/partners/blog/logo-bar 

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

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
5 0 0

I tried this:

 

{% schema %}
  {
    "name": "Logo list",
    "class": "index-section logo-section",
    "max_blocks": 20,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Logo list"
      },
  {
        "type": "color",
        "id": "pro_book_color",
        "label": "Title Text Color",
        "default": "#e7bec3"
      }
    ], 
    "blocks": [
      {
        "type": "logo_image",
        "name": "Logo",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
  {
            "type": "textarea",
            "id": "logo-info",
            "label": "Description"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link",
            "info": "Optional"
          }
        ]
      }
    ],
"presets": [
      {
        "name": "Logo list",
 "category": "Image", 
} ]
  }
{% endschema %}
 
But I'm just getting this error:
 
Error: Invalid JSON in tag 'schema'

 

0 Likes