Logo Carousel

Adding The Section To Your Store

1. Open your theme editor
2. Click on “Add Section”
3. Find and add the “Logo Carousel” Section from the block library
4. Add individual Logo to the block for each brand/partner.

Styling The Section

The Logo Carousel section is a powerful way to display brand, partner, media, or certification logos in a clean scrolling or static layout. It instantly builds trust and credibility by showing the reputable names or organizations your brand is associated with.

You can use it to showcase press mentions, brand collaborations, trusted certifications, or retail partners, reinforcing authority and authenticity in your visitors’ eyes.

Below is a list of all the general settings found on all sections built inside Surge Theme.

• Header Content (Title / Subtitle)
  
  The Title and subtitle here optional that you can add a little text to the partners featured in this section. Use small phrases like Trusted by or As featured in.
  
  

• Background Color
  
  

  • Set the backdrop of the gallery. Transparent blends with the page background.
    
    

  • Use a subtle solid color if you want images to stand out more.
    
    

• Heading Size (Small / Medium / Large)
  
  Control the size of your headline choose Small, Medium, or Large depending on how prominent you want your section title to appear.
  
  

• Headline Typography (AA / Aa / aa)
  
  

  • AA = ALL CAPS (bold and strong).
    
    

  • Aa = Title Case (professional).
    
    

  • aa = lowercase (minimal, casual).
    
    

• Title Color
  
  

  • Titles: Sets the colour of the blocks main titles
    
    

  • Subtitles: Sets the colour of the subtitle.
    
    

• Heading Alignment
  
  Choose alignment: Sets the position of the headline and supporting copy Left, Center & Right Aligned. The center option is most common for galleries.
  
  

• Section Width
  
  

  • Full Width: Block spans the entire width of the screen.
    
    

  • Contained: Adds side margins for a neat look.
    
    

• Padding (Desktop & Mobile)
  
  Controls spacing around the gallery elements both horizontal and vertical
  
  

  • Example: Desktop Horizontal = 70px (wide margins).
    
    

  • Mobile Horizontal = 15px (compact for small screens).
    
    

• Color Text
  
  Use this to control the color of any text elements that appear within or around the carousel.
  
  

• Scroll Speed (seconds)
  
  Add the color at which the subtext moves in your Logo carousel. For marquee: lower = faster; recommended 20–30s for smooth scroll.
  
  

• Logo Mode (Static / Marquee)
  
  Static shows non-moving logos; Marquee scrolls logos continuously.
  
  

• Display On
  
  Choose where to show the section. Default: All Devices.
  
  

• Separator / Img separator
  
  Optionally place icons or tiny separators between logos for spacing aesthetic.
  
  

• Gap
  
  It refers to the spacing/gap between different logos (e.g. 30px).
  
  

Step 2 — Block Settings

Block Name: Logo

This settings allows you to choose an image and link it to your logo partners or a destination of your choice like a review page.

• Logo Image
  
  Upload transparent SVG/PNG. Recommended size: width 200 px, height 60–100 px. Keep consistent aspect ratio across logos.
  
  

• Link
  
  Use this place as a link for the logo image added above.
  
  Tip: Use SVGs for crispness; fallback to PNGs for older logos.
  
  

• Use SVG logos where possible for sharp scaling.
  
  

• Maintain consistent visual height for logos, align center on a transparent canvas.
  
  

• Limit logos to 6–12 in marquee; if you have more, group into 2 carousels or duplicate logos to improve scrolling loop.
  
  

• Use slow marquee speed (20–30s loop) so logos are readable.
  
  

• Provide links for logos only if they add value (partner pages, press). Avoid linking to unrelated pages.
  
  

Q: Why are some logos blurry?
A: They were uploaded at low resolution or as JPG. Use SVG or high-res PNGs.

Q: Can each logo have its own link?
A: Yes, each Logo Block includes a Link field.

Q: How to avoid overlap in marquee mode?
A: Increase Gap and ensure logos have whitespace padding.

• Logos overlap or touch → Increase Gap value; ensure logos have transparent padding.
  
  

• Logo color altered → Some themes apply CSS filters; upload logos in intended color and check if the theme modifies them.
  
  

• Logo too big/small → Re-export logo with consistent canvas size.
  
  

• All logos are crisp on desktop & mobile.
  
  

• Links on logos (if any) open correctly.
  
  

• Marquee speed is comfortable and not distracting.
  
  

• Spacing (gap) is consistent & logos don’t overlap.
  
  

• Section aligns with other page elements (contained vs full width).