Multipurpose theme documentation
Multipurpose Fashion Theme
Logo List
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Sections & Blocks > Info & Trust Sections > Logo List
Overview
The Logo list section displays a grid or marquee of partner, press, or brand logos. Use it for social proof—"As seen in" or "Our partners." Each logo can link to a website. Supports slider on mobile and optional marquee/scrolling. Add to homepage or footer area to build trust with recognized names.
Where to Add This Section
- Go to Online Store > Themes > Customize.
- Select Homepage (or desired template).
- Click Add section.
- Choose Logo list.
- Save.
📷 Image placeholder: Add a screenshot of Logo list section.
Quick Setup (3 Steps)
- Add Logo blocks — Add one block per logo.
- Upload logos — Add image and optional link.
- Configure — Set heading, columns, marquee/slider.
Section Settings
| Setting | Description |
|---|---|
| Heading | Section title |
| Subheading | Optional subtitle |
| Heading size | Small, Medium, Large |
| Alignment | Left, Center, Right |
| Background color | Section background |
| Section width | Full, Boxed |
| Show divider | Divider above/below |
| Desktop columns | Logo columns (2–6) |
| Mobile columns | Mobile columns |
| Logo size | Logo dimensions |
| Gap spacing | Space between logos |
| Enable slider mobile | Horizontal slider on mobile |
| Enable marquee | Scrolling marquee effect |
| Enable auto scroll | Auto-scroll marquee |
| Hover effect | Hover style for logos |
Blocks: Logo
| Setting | Description |
|---|---|
| Image | Logo image |
| Link | Optional URL (logo becomes clickable) |
Step-by-Step Setup
Step 1: Add the section
Add Logo list to your homepage or footer area.
Step 2: Add Logo blocks
- Click Add block > Logo.
-
For each block:
- Upload Image (logo file—PNG or SVG preferred).
- Add Link (optional) — URL to partner site or press article.
- Add 4–8 logos; drag to reorder.
Step 3: Configure section
- Heading — "As seen in", "Our partners", or similar.
- Subheading — Optional supporting text.
- Desktop columns — 4–6 for grid layout.
- Mobile columns — 2–3 or enable Enable slider mobile.
- Enable marquee — For horizontal scrolling on desktop.
- Enable auto scroll — Auto-scroll when marquee is on.
- Logo size — Adjust for consistency.
- Hover effect — Fade, scale, or none.
- Save.
Use cases
- Press logos — "As seen in" (magazines, sites)
- Partner logos — Brands you work with
- Certifications — Trust badges
- Awards — Recognition logos
For merchants
- Use high-resolution logos (SVG or PNG).
- Ensure permission to display logos.
- 4–8 logos is typical.
- Keep logos visually consistent (similar size, style).
- Add links to give credit and drive traffic.
For Theme Reviewers
- Ensure marquee and slider are accessible, with keyboard support.
- Verify that all logo links use proper `alt` text and link attributes.
- Ensure compatibility with Online Store 2.0 and Logo block schema.
Common Mistakes
| Mistake | Fix |
|---|---|
| No Logo blocks | Add Logo blocks with images |
| Low-resolution logos | Use SVG or high-res PNG (recommended for crisp logos) |
| Inconsistent sizes | Set Logo size; use similar aspect ratios |
FAQs
The Logo List Section is a feature that allows you to display a grid or scrolling marquee of logos (e.g., partners, press, or brand logos) on your Shopify store. It's commonly used to showcase trust signals such as "As seen in" or "Our partners."
- Go to Online Store > Themes > Customize.
- Select the template where you want to add the section (e.g., Homepage).
- Click Add section and choose Logo List.
- Configure the section settings (heading, logo size, columns, etc.) and save the changes.
Yes, you can customize the number of logos displayed by adjusting the Desktop columns and Mobile columns settings. You can set the number of logos per row for both desktop and mobile views.
To add logos:
- In the Logo List Section, click Add block and choose Logo.
- Upload an image for the logo.
- Optionally, you can link the logo to a specific URL (e.g., your partner's website).
- You can add up to 24 logos and reorder them as needed.
The Logo List Section offers several hover effects:
- Scale: The logo will enlarge slightly on hover.
- Grayscale: The logo will turn to grayscale and revert to color on hover.
- Opacity: The logo will become slightly transparent on hover.
- Lift: The logo will "lift" (move up) slightly on hover.
- None: No hover effect.
You can select the desired hover effect from the section settings.
You can enable the slider on mobile setting, which will create a horizontal scrolling effect for the logos on mobile devices. This setting works when the marquee feature is disabled.
- Marquee: A continuous scrolling animation that moves logos horizontally across the screen. It can be enabled for both desktop and mobile devices.
- Slider: A horizontal scroll feature for mobile devices only, where users can drag or swipe to view the logos in a row.
You can enable either the marquee or slider based on your preference.
Yes, the Logo List Section includes a Custom CSS field where you can add your own custom styles to further customize the appearance of the section. This CSS will only apply to the logo list section and will not affect other parts of the theme.
Ensure that you have set the correct Logo size in the section settings. You can choose from Small, Medium, or Large logo sizes. If logos still appear incorrectly, check the image resolution to ensure they are optimized (SVG or high-res PNG images are recommended).
The Logo List Section allows you to set a default logo size (Small, Medium, or Large) for all logos. However, if you want to customize individual logos' sizes, you can adjust the Logo width setting for each block in the Logo settings.
Lazy loading is automatically enabled for logos when the fetchpriority attribute is applied. This helps to load logos only when they are about to be displayed on the screen, improving page load times.
To improve accessibility:
- Ensure each logo has alt text to describe the logo for screen readers.
- Use the focus-visible style to provide clear visual feedback for users navigating via keyboard.
- Add appropriate link attributes for logos that link to external sites (e.g., rel="noopener noreferrer").
Yes, you can adjust the gap between logos using the Gap spacing setting in the section settings. This value is adjustable from 8px to 64px.
Yes, each logo block has an option to add a Link URL, making the logos clickable. You can also choose to open the link in a new tab by checking the Open in new tab box.
It is recommended to use SVG or high-resolution PNG images for logos. SVGs are preferred because they are resolution-independent and provide crisp images at any size. However, PNG files can also be used as long as they are of high resolution (at least 300 dpi).
You can test the mobile view by resizing your browser window to a smaller size or using the Device Mode in Chrome DevTools (or similar developer tools) to simulate mobile devices. Ensure the slider and marquee features work as expected.
The Logo List Section allows a maximum of 24 logos. If you need to display more logos, consider splitting them into multiple logo list sections or use a custom solution.
Yes, the Logo List Section is fully compatible with Online Store 2.0. It leverages the flexibility of Shopify's new section and block structure, making it easy to customize and add to any template.
FAQs vs Advanced Accordion
FAQs — Simple Q&A format. Advanced Accordion — Rich content (HTML, links). Use FAQs for support questions; use Accordion for product details, size guides.