Marquee text and image section

Marquee Text and Image Infinite Announcement Section

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All Shopify theme. Styles may vary

In the ever-evolving world of web design, it's crucial to keep your website engaging and visually appealing. One way to achieve this is by incorporating dynamic elements that catch the visitor's eye. In this blog post, we'll explore how to create a Marquee Infinite Announcement section for your website‚ÄĒa versatile feature that provides a scrolling display of content, adding movement and interest without the need for complex scripts or multiple HTML files.

You can check the demo store here. Password: made4uo

What you are buying:

  • A section that can be place anywhere in your website. Theme must be Shopify 2.0.¬†
  • Customize background color, text color, link, and animation duration
  • Select between an image or text to have in a block
  • Add a different font just for this section
  • Option to change the background color and text color when hovered
  • Change the height of the section

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

To start:

1. Go to Admin Shopify store > Themes > Actions > Edit Code.

2. Open the Section folder, and create a new section, name it "marquee-component".

3. Replace the default code with the code below. Make sure to SAVE.

<style>
  {{ section.settings.font | font_face: font_display: 'swap' }}
  div#shopify-section-marquee-component {
    height: max-content;
    display: flex;
  }
  .marquee-container {
    height: var(--marquee-height);
    display: block;
    background: var(--marquee-background);
 
  }
  .marquee-container a {
    color: var(--marquee-color);
  }
  {% if section.settings.enable_hover %} 
    .marquee-container:hover{
        background: var(--marquee-hover-bg);
    }
    .marquee-container:hover a {
        color: var(--marquee-hover-color);
    }
  {% endif %}
  .marquee-box {
      height: var(--marquee-height);
      width: 100vw;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
  }
  .marquee-box .marquee-wrapper {
      display: flex;
      width: calc(100% * 6);
      height: 100%;
      position: absolute;
      overflow: hidden;
 
      display: grid;
      grid-template-columns: repeat(6, 1fr);
  }
  .marquee-box .marquee--item {
    font-family: {{ section.settings.font.family | append: ", " | append: section.settings.font.fallback_families }};
    font-style: {{ section.settings.font.style }};
    font-weight: {{ section.settings.font.weight }};
    transition: all ease 0.5s;
    animation: marquee calc(var(--marquee-animation-duration) * 1s) linear infinite;
  }
  .marquee-box .marquee-wrapper a {
      min-width: max-content;
      width: 100%;
      height: 100%;
      font-size: {{ section.settings.font_size | append: 'px' }};
      line-height: 1.5;
      display: flex;
      justify-content: center;
      align-items: center;
      text-wrap: nowrap;
      text-decoration: none;
  }
  .marquee-box div {
      float: left;
      width: 100%;
      height: var(--marquee-height);
      display: flex;
      gap: var(--marquee-gap);
  }
  .marquee-wrapper img {
      width: 100%;
      height: auto;
      object-fit: cover;
  }
  @keyframes marquee {
    0% { transform: translate(0); }
    100% { transform: translate(-100%); }
  }
  .marquee--mobile {
    display: none;
  }
  .marquee--tablet {
    display: none;
  }
  @media only screen and (max-width: 1400px)  {
    .marquee-box .marquee-wrapper {
        width: calc(100% * 4);
        grid-template-columns: repeat(4, 1fr);
    }
  }
  @media only screen and (max-width: 750px)  {
    .marquee-box .marquee-wrapper {
      width: calc(100% * 2);
      grid-template-columns: repeat(2, 1fr);
    }
  }
</style>
<div
  class="marquee-container"
  style="
     --marquee-height: {{ section.settings.height | append: 'px' }};
     --marquee-gap: {{ section.settings.gap | append: 'rem' }};
     --marquee-background: {{ section.settings.background }};
     --marquee-color: {{ section.settings.font_color }};
     --marquee-animation-duration: {{ section.settings.duration }};
     --marquee-hover-bg: {{ section.settings.background_hover }};
     --marquee-hover-color: {{ section.settings.font_color_hover }};
  "
>
  <div class="marquee-box">
    <div
      class="marquee-wrapper"
    >
      <div class="marquee--item">
        {% for block in section.blocks %}
          <a href="{{ block.settings.link }}">
            {% if block.settings.image %}
              {{
                block.settings.image
                | image_url: width: 3840
                | image_tag:
                  width: section.settings.image.width,
                  height: section.settings.image.height,
                  class: 'marquee-image'
              }}
 
            {% else %}
              {{ block.settings.text | escape }}
            {% endif %}
          </a>
        {% endfor %}
      </div>
      <div class="marquee--item">
        {% for block in section.blocks %}
          <a href="{{ block.settings.link }}">
            {% if block.settings.image %}
              {{
                block.settings.image
                | image_url: width: 3840
                | image_tag:
                  width: section.settings.image.width,
                  height: section.settings.image.height,
                  class: 'marquee-image'
              }}
            {% else %}
              {{ block.settings.text | escape }}
            {% endif %}
          </a>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% schema %}
{
  "name": "Marquee component",
  "settings": [
    {
      "type": "paragraph",
      "content": "Number of blocks affects the space in between items"
    },
    {
      "type": "header",
      "content": "Color settings"
    },
    {
      "type": "color",
      "id": "background",
      "label": "Background color",
      "default": "#EC008c"
    },
     {
      "type": "color",
      "id": "font_color",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "type": "checkbox",
      "id": "enable_hover",
      "label": "Enable hover",
      "info": "Please provide colors below if enabled"
    },
    {
      "type": "color",
      "id": "background_hover",
      "label": "Background hover color",
      "default": "#ffffff"
    },
     {
      "type": "color",
      "id": "font_color_hover",
      "label": "Text hover color",
      "default": "#EC008c"
    },
    {
      "type": "font_picker",
      "id": "font",
      "label": "Marquee font",
      "default": "helvetica_n4"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 12,
      "max": 100,
      "step": 1,
      "unit": " px",
      "label": "Font size",
      "default": 15,
      "info": "This applies to mobile too"
    },
    {
      "type": "range",
      "id": "duration",
      "min": 6,
      "max": 100,
      "step": 1,
      "unit": "s",
      "label": "Animation duration in seconds",
      "default": 38
    },
   {
      "type": "range",
      "id": "height",
      "min": 5,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Height of the section",
      "default": 40
    },
     {
      "type": "range",
      "id": "gap",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "rem",
      "label": "Marquee gap in rem",
      "default": 2,
      "info": "Only works if you have several blocks"
    }
  ],
  "blocks": [
    {
      "name": "Marquee",
      "type": "marquee",
      "settings": [
         {
           "type": "text",
           "label": "Text",
           "id": "text",
           "default": "Black Friday | Shop & save up to 60% off storewide"
         },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "Leave blank for the text to show instead"
        },
        {
          "type": "paragraph",
          "content": "Images might change in size and fill the gap"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee component",
        "blocks": [
        {
          "type": "marquee"
        },
        {
          "type": "marquee"
        },
        {
          "type": "marquee"
        }
      ]
    }
  ]
}
{% endschema %}
 

 

 4. Add the said component to your Shopify website, using the theme editor. Find the "Marquee component."

 

That's it (",)

 

 

Copied!
Voltar para o blogue

Deixe um coment√°rio