The Logo list section is a dedicated area to display the logos of your partners, suppliers, brands you work with, or certifications you have achieved. This is an effective way to build trust, increase credibility, and show customers your association with other reputable organizations.
Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.
Step 02: In the theme editor ( Customize), click the Sections button > Click the Add Section button or hover below another section until the (➕) icon appears > In the Sections tab, scroll through the list or use the search bar to find and select Logo list
To add Logo item to the Logo list section, click the Add item button (plus icon ➕) under the Logo list.
Once the Logo item is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Image: This is where you would upload or select the specific image you want to display.
Max height: This setting allows you to define the maximum vertical height that the image will occupy on the screen. If the original image is taller than this value, it will be scaled down to fit within the specified height while maintaining its aspect ratio.
Mobile max height: This setting specifically controls the maximum vertical height of the image when the website is viewed on mobile devices (smaller screens)
Link (Optional): This option enables you to make the image clickable. You can enter a URL here, and when a user clicks on the image, they will be redirected to that specific web address.
Once you add the Logo list section, you can customize its settings in the left or right sidebar (depending on your screen size)
2.2.1. General
Make section full width: Expands section width to the full page width, optimizing display on large screens and creating an impactful layout.
Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience.
Show logo with border: A cleverly designed border can add sharpness, clarity and aesthetics to a logo.
Desktop/Tablet/Mobile: Display logo item columns on screen sizes
Caption: Enter a brief caption, often used to provide additional information or context for an image or content.
Heading: Enter the main title for the section, helping readers quickly grasp the main topic.
Heading size: Adjust the font size of the heading, creating visual hierarchy and emphasizing content.
Heading style: Select the style for the heading (e.g., normal, uppercase), customizing the interface and creating emphasis.
Heading tag (Will affect SEO): Select the HTML tag for the heading (H1-H6), affecting SEO structure and content hierarchy.
Top padding (Desktop/Mobile): Creates space above the content within an element, separating it from elements above and improving visual layout.
Bottom padding (Desktop/Mobile): Creates space below the content within an element, separating it from elements below and improving visual layout.
2.2.2. Theme Settings
In the Logo list > click open Theme Settings tab
Page width: Defines the maximum width of the page content, controlling layout and ensuring optimal display across devices.
2.2.3. Custom CSS
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to Theme Settings*