Can I Upload My Own Logo With Debut Theme In Shopify

Announcing Online Store two.0

Online Store 2.0 is an terminate-to-cease overhaul of how themes are built at Shopify, launched June 2021. While the information in the following commodity is notwithstanding correct, it doesn't account for Online Store 2.0 best practices, and may not include references to contempo features or functionality. To learn more about how to build with Online Store 2.0, visit our updated documentation.

Visit docs

Very often, clients will want to highlight the businesses that they deal with and assert themselves every bit 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.

Every bit we learned in a previous Web Design and Evolution Blog mail service focused on social proof:

"Out of all the forms of social proof, possibly none is as immediately impactful equally including brand logos in the design of your ecommerce homepage."

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

Logo bars tin can too be used on your own developer portfolio sites, as visual indicators of the services you provide. Theme developers, Maestrooo, use this technique to great issue 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 piece of work. I'll also await at how Liquid's department settings can be leveraged to let 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.

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

The beginning pace when creating a logo list is to decide what types of elements we would like to contain in this section. Depending on your customer'southward requirements you may demand text, headings, or other input settings.

In this example, I'd similar to include a department heading, and allow for hyperlinks to be associated with logo images. By using Liquid's section objects, we can create settings which tin exist accessed from the Theme Editor to assign the heading text, link URLs, and cull which images we would like to appear.

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

          <h2>{{ section.settings.championship | escape }}</h2>

Here we're using the section object to create a property with the ID of title. When we create settings within the schema tags of the section, we tin reference this ID and assign a specific type to this property. In this example, we would similar this to be a text box, so the blazon we assign is text. Once this is configured within the schema assortment, it would look like this:

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

Later when the section is prepare up correctly, clients will exist able to navigate to the Theme Editor and assign a heading to this section. The heading will be a <h2> header and the escape Liquid filter is used to ensure the output will be outputted correctly.

Grow your business with the Shopify Partner Program

Whether you lot offer marketing, customization, or web blueprint and development services, the Shopify Partner Plan will gear up you upwardly for success. Join for complimentary and access revenue share opportunities, tools to grow your business organization, and a passionate commerce community.

Sign upwardly

2. Build the code that displays the images

Next nosotros'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—pregnant the images can be moved around within the department, too every bit added and removed—nosotros'll exist looping through section.blocks in society to output the block content. The whole for loop containing the logos can appear like this:

view rawlogo-bar-section-blocks-loop.liquid hosted with ❤ by GitHub

Within the for loop, nosotros meet that each logo block volition be a list item and the {{ block.shopify_attributes }} property is used by the Theme Editor to place 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 the schema tags earlier, nosotros tin can employ the block.settings property to create setting values by referencing the block's unique ID. For our purposes, the 2 key properties hither are block.settings.link and cake.settings.epitome, and the IDs we'll reference are link and image.

When these properties are referenced within the schema tags of the section, and assigned the advisable type, 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 example, the assortment for the blocks would look similar this:

view rawlogo-bar-department-setting.json hosted with ❤ by GitHub

As we can see to a higher place, the IDs we have used within the list item, paradigm and link, are associated with 2 cake settings with types of image_picker and url. This will output equally two separate settings for each specific logo block that'south added to the section. You can see how that would look similar to a client below:

Since I'd like this section to be available from the home page, I'm going to add presets to the end to the schema array. When presets are present in a section, the Theme Editor recognizes that this section is a dynamic section and can be added to the home page.

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'll add in iv empty blocks.

3. Create a section assuasive clients to adjust the logos' sizes

Finally, we want to create a section setting that allows clients to adjust the size of the logos direct from the Theme Editor. To achieve this, we tin link a section object with a CSS value inside the section.

For example, my list item has a class of logo-bar-section, and if I add <style> tags inside this section, I can add together styles to this class. Past assigning a Liquid department settings object every bit the value of max-width, I tin create a variable which is controlled by section settings.

The styling within the section can appear like this:

          <style>
.logo-bar-section {
            max-width: {{ section.settings.logo_width }};
            display: inline-block;
}
</style>

This means now that the value of max-width is adamant by a Liquid section setting variable, and I tin can prepare possible parameters within the department'due south <schema> array. The ID for this department setting is logo_width, and I tin utilize this ID to reference the section setting. Inside the same assortment, I can define what type of setting it is, and specify what options are available.

When this is all fix upwards within the schema tags, the array can announced like this:

Here we're referencing the section setting object with an ID of "logo_width" which nosotros can then assign dissimilar properties to. In this case, I'thousand choosing a blazon of select, which generates a drop down box, where there are four available options, ranging from "Extra Small" to "Actress Big".

You might likewise like: How to Optimize Your Clients' Themes to Sell Digital Products.

The different options take labels, which appear on the Theme Editor, and pixel values, which are assigned to the associated CSS value when a specific option is selected. Now, when a client is customizing their logo bar, and selects "Large", the value of 200px is assigned to the max-width property of the logo-bar-section list particular.

Once we are finished, the unabridged section would announced like this:

Now, when your clients are uploading a logo, they will exist able to add a heading title, adhere a hyperlink to the logo, and conform the sizes of the logo. Yous tin also get creative with other customizations, similar adding a text overlay or a groundwork colour to the logo department.

You might also like: Understanding hreflang Tags for Multilingual Stores.

Connecting with logos

Creating a hitting and well-positioned logo bar can highlight the various brands your clients work with, and boost their conversions by improving their social proof. Equally we've seen, theme sections can be leveraged to create intuitive logo bars that your clients can customize.

If you're also designing logos for your clients, Hatchful is a really useful logo generator to consider. Hatchful is a mobile app built by Shopify for iOS and Android that helps you lot build a visual identity from scratch and right from the palm of your hand.

From there, you tin customize your make's colors and fonts, and download all of the brand assets your clients demand, including perfectly-sized images for all of their social media platforms.

Regardless of how you utilize logos in your custom theme builds, at that place's no incertitude that they're a powerful tool for connecting with brands and customers. Hopefully with the help of this article, adding that extra value for clients volition exist a picayune bit easier with a logo bar.

Accept you lot created a logo bar earlier? Allow us know in the comments beneath.