Blog Detail

• Aug 03, 2022

How To Add Custom logo Bar Section In Shopify

To create the logo bar section then decide what types of elements you want to add to the section generally you may need a heading, the size of the logo, and some other input according to your requirments.

In this blog, we will show you the heading of the logo, the size of the logo, and set a link on the logo.

let's start to create the logo bar.

first, you want to decide where this section add.

Here we show you a separate logo bar section with a separate template page.

first, we want a heading for the logo then we will add this liquid code first for the heading, here we use the h2 tag you can use different heading tags according to your requirments.

and the schema for the heading is:

Second, we add the image for the logo.

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

here we you FOR loop just because we need multiple logos that why we use FOR loop.

{{ block.settings.link }}--> this liquid code output for the link.

{{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}--> this liquid code output is for images.

{{ block.shopify_attributes }}--> its block property is used by the Theme Editor to identify blocks and listen for events.

The schema for the images and link is:

image and link, are associated with two block settings with types of image_picker and URL.

Since I'd like this section to be available from the home page, I'm going to add presets to the end of the schema.

Within the presets, 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&rsquo'll add in four empty blocks.

Finally, sections are created now we want to adjust the size of the logo then we create the CSS and we can link a section object with a CSS value within the section.

First, create the CSS class logo-bar-section if we add this in the <scriot> tag then we add some style to this class.

If you don't want to create a class in separate CSS then paste this code at the end of the program or the top of the program.

schema for logo size: