How to Create a Customizable Logo Bar Section

Very often, clients will want to highlight the businesses that they deal with and assert themselves as being trustworthy and in-demand. One of the easiest ways to achieve this effect is with the use of a logo bar on their website that displays the companies your clients have worked with.

正如我们在前一个Web设计和开发ment Blog post focused onsocial proof:

“Out of all the forms of social proof, perhaps none is as immediately impactful as including brand logos in the design of your ecommerce homepage.”

A highly visible, deliberately placed logo bar establishes credibility for your clients, and allows for brand storytelling through imagery, rather than text.

Logo bars can also be used on your own developer portfolio sites, as visual indicators of the services you provide. Theme developers,Maestrooo, use this technique to great effect on their site, displaying the different aspects of development they can assist with.

In this article, I’ll demonstrate how to use Liquid to build a dynamic logo bar section, extending the functionality of your custom themes, or bespoke client work. I’ll also look at how Liquid’s section settings can be leveraged to allow customizable options, which empowers clients to personalize their online store.

Creating a custom logo bar section

Here are the steps to follow to create a custom logo bar section.

1. Decide on what type of elements will be in the section

The first step when creating a logo list is to decide what types of elements we would like to contain in this section. Depending on your client’s requirements you may need text, headings, orother input settings.

In this example, I’d like to include a section heading, and allow for hyperlinks to be associated with logo images. By using Liquid’s section objects, we can create settings which can be accessed from theTheme Editorto assign the heading text, link URLs, and choose which images we would like to appear.

Creating the heading text for our section is straightforward and demonstrates how we can link Liquid objects to section settings. For example, we can write markdown, which appears like this:

{{ section.settings.title | escape }}

Here we’re using the section object to create a property with the ID oftitle. When we create settings within theschematags of the section, we can reference this ID and assign a specific type to this property. In this case, we would like this to be a text box, so the type we assign istext. Once this is configured within theschemaarray, it would look like this:

{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Logo list"
}

Later when the section is set up correctly, clients will be able to navigate to theTheme Editorand assign a heading to this section. The heading will be a

header and theescape Liquid filteris used to ensure the output will be outputted correctly.

Grow your business with the Shopify Partner Program

Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community.

Sign up

2. Build the code that displays the images

Next we’ll need to use a mixture of Liquid logic tags, HTML, and block settings to build the code that displays the images themselves.

Since our logos will be blocks—meaning the images can be moved around within the section, as well as added and removed—we’ll be looping throughsection.blocksin order tooutput the block content. The wholeforloop containing the logos can appear like this:

view rawlogo-bar-section-blocks-loop.liquidhosted with ❤ byGitHub

Within theforloop, we see that each logo block will be a list item and the{{ block.shopify_attributes }}property is used by the Theme Editor to identify blocks and listen for events.

You might also like:How to Use Product Media on Your Custom Shopify Themes.

Similar to how the header was referenced within theschematags earlier, we can use theblock.settingsproperty to create setting values by referencing the block's unique ID. For our purposes, the two key properties here areblock.settings.linkandblock.settings.image, and the IDs we’ll reference arelinkandimage.

When these properties are referenced within theschematags of the section, and assigned the appropriatetype, it will be possible for clients to upload images from the Theme Editor, as well as enter a URL that the image should link to. In this case, the array for the blocks would look like this:

view rawlogo-bar-section-setting.jsonhosted with ❤ byGitHub

As we can see above, the IDs we have used within the list item,imageandlink, are associated with two block settings with types ofimage_pickerandurl. This will output as two separate settings for each specific logo block that’s added to the section. You can see how that would look like to a client below:

Since I'd like this section to be available from the home page, I'm going to addpresetsto the end to theschemaarray. Whenpresetsare present in a section, the Theme Editor recognizes that this section is a dynamic section and can be added to the home page.

Within thepresets, I can assign a name for this section, and indicate which category this section should appear in. I can also set a default number of empty logo blocks that should appear, by adding in a separate array for each block. In this case, I’ll add in four empty blocks.

3. Create a section allowing clients to adjust the logos’ sizes

Finally, we want to create a section setting that allows clients to adjust the size of the logos straight from the Theme Editor. To achieve this, we can link asectionobject with a CSS value within the section.

For example, my list item has a class oflogo-bar-section, and if I add