Announcing Online Store 2.0
Online Store 2.0 is an end-to-end overhaul of how themes are built at Shopify, launched June 2021. While the information in the following article is still correct, it doesn't account for Online Store 2.0 best practices, and may not include references to recent features or functionality. To learn more about how to build with Online Store 2.0, visit our updated documentation.
Visit docsVery 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.
当我们在学习previous Web Design and Development 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.
Learning Liquid: Getting Started with Shopify Theming
Get this free guide and learn practical tips, tricks, and techniques to start modifying, developing, and building Shopify themes.
By entering your email - we’ll also send you marketing emails related to Shopify. You can unsubscribe anytime. Note: the guide won't be delivered to role-based emails, like info@, developer@, etc.
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 theschema
tags 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 theschema
array, 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 aheader 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 up2. 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.blocks
in order tooutput the block content. The wholefor
loop containing the logos can appear like this:
view rawlogo-bar-section-blocks-loop.liquidhosted with ❤ byGitHub
Within thefor
loop, we see that each logo block will be a list item and the{{块。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 theschema
tags earlier, we can use theblock.settings
property to create setting values by referencing the block's unique ID. For our purposes, the two key properties here areblock.settings.link
andblock.settings.image
, and the IDs we’ll reference arelink
andimage
.
When these properties are referenced within theschema
tags 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,image
andlink
, are associated with two block settings with types ofimage_picker
andurl
. 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 addpresets
to the end to theschema
array. Whenpresets
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 thepresets
,我为这一节中,可以指定一个名字和籼稻te 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 asection
object with a CSS value within the section.
For example, my list item has a class oflogo-bar-section
, and if I addtags within this section, I can add styles to this class. By assigning a Liquid section settings object as the value of
max-width
, I can create a variable which is controlled by section settings.
The styling within the section can appear like this: