I need some help with this code. Marquee logos slider

Store Design
, , ,

Topic summary

A user is trying to implement a marquee logo slider from Codepen.io into their Shopify store but encountering issues when inserting the code into custom sections or HTML blocks.

Problem:

  • The original code appears incomplete or corrupted, with reversed/garbled CSS and HTML in parts of the post
  • User attempted both custom sections and custom HTML sections without success

Solutions Provided:

Solution 1 (Liquid_xPert_SJ):

  • Create a dedicated section file and wrap the code properly
  • Key issue identified: missing <style> tags around the CSS
  • Provided corrected markup with proper HTML structure

Solution 2 (MRamzan):

  • Offered a complete Shopify-native solution using Liquid templating
  • Shared code for a customizable “Marquee Images” section with:
    • Dynamic block system for adding multiple logos
    • Customizable settings (background color, image width, marquee height/padding)
    • Limit of 20 logos
  • Included a YouTube tutorial link for implementation guidance

Both solutions provide working code that can be added as reusable sections in the Shopify theme customizer.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone,

I have an issue. Unfortunately, I’m unable to insert the following code into a custom section. I’ve also tried inserting it via a custom HTML section. Have I done something wrong? The code is from Codepen.io, and I’m attempting to adapt it to my website, but I’m struggling. Could you provide some clarification?

Featured in:

Logo 1

Logo 2

Logo 3

Logo 4

Logo 5

Logo 6

Logo 7

Logo 8

Logo 9

Logo 10

body,html {
height: 100%;
background-color: white;
}

.container {
overflow: hidden;
.slider {
animation: slidein 30s linear infinite;
white-space: nowrap;
.logos {
width: 100%;
display: inline-block;
margin: 0px 0;
.fab {
width: calc(100% / 5);
animation: fade-in 0.5s
cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}
}
}
}

@keyframes slidein {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-100%, 0, 0);
}
}

@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

Thank you in advance!

2

@Fasa

You can create a section and and put that all code in that and call that function where ever you need. Updated code below you missed the tags


  

    

      # Featured in:

thanks

1 Like
3

You can do it for your store:

Create a new section marquee and paste below code.

You can add marquee section to any page.


  
      

        {%- for block in section.blocks -%}
          
        {%- endfor -%}
        {%- for block in section.blocks -%}
          
        {%- endfor -%}
        {%- for block in section.blocks -%}
          
        {%- endfor -%}
        {%- for block in section.blocks -%}
          
        {%- endfor -%}
        {%- for block in section.blocks -%}
          
        {%- endfor -%}
        {%- for block in section.blocks -%}
          
        {%- endfor -%}
      

  

{% schema %}
{
  "name": "Marquee Images",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#06ffbc"
    },
    {
      "type": "range",
      "id": "marquee_height",
      "min": 24,
      "max": 200,
      "step": 2,
      "default": 100,
      "label": "Marquee height"
    },
    {
      "type": "range",
      "id": "marquee_padding",
      "min": 0,
      "max": 100,
      "step": 2,
      "default": 0,
      "label": "Marquee padding"
    },
    {
      "type": "range",
      "id": "image_width",
      "min": 10,
      "max": 200,
      "step": 2,
      "default": 100,
      "label": "Image size"
    }
  ],
  "blocks": [
    {
      "type": "image_picker",
      "name": "Logo",
      "limit": 20,
      "settings": [
         {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee Images"
    }
  ]
}
{% endschema %}