How to make marquee text repetitive and prevent it from getting cut off?

augds · ‎10-07-2020

Hi everyone,

I have added a Marquee text section to my theme, but unlike the example I was modeling it after the text is not repetitive.

You'll see the animated text example here: https://streamline-theme-luxe.myshopify.com/

And this is my website with it on the home page: https://augds.myshopify.com/

Here is my CSS:

/* Marquee */
.marquee {
 height: 50px;	
 overflow: hidden;
 position: relative;
}

.marquee p {
 position: absolute;
 font-size:40px;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
  
/* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
  
/* Apply animation to this element */	
 -moz-animation: scroll-left 15s linear infinite;
 -webkit-animation: scroll-left 15s linear infinite;
 animation: scroll-left 15s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}

And this is the section file:

	<div data-section-id="{{ section.id }}" data-section-type="marquee-section">
      {% if section.settings.text != blank %}
      <div class="marquee"> 
        {{ section.settings.text}}
      </div> 
      {% endif %}
    </div>

{% schema %}
{
  "name": {
        "cs": "Marquee",
        "da": "Marquee",
        "de": "Marquee",
        "en": "Marquee",
        "es": "Marquee",
        "fi": "Marquee",
        "fr": "Marquee",
        "hi": "Marquee",
        "it": "Marquee",
        "ja": "Marquee",
        "ko": "Marquee",
        "nb": "Marquee",
        "nl": "Marquee",
        "pl": "Marquee",
        "pt-BR": "Marquee",
        "pt-PT": "Marquee",
        "sv": "Marquee",
        "th": "Marquee",
        "tr": "Marquee",
        "vi": "Marquee",
        "zh-CN": "Marquee",
        "zh-TW": "Marquee"
  },
  "settings": [
    {
      "type": "richtext",
      "id": "text",
      "label": {
        "cs": "Text",
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "texto",
        "fi": "Teksti",
        "fr": "Texte",
        "hi": "टेक्स्ट",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "nb": "Tekst",
        "nl": "Tekst",
        "pl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "tr": "Metin",
        "vi": "Văn bản",
        "zh-CN": "文本",
        "zh-TW": "文字"
      },
      "default": {
        "cs": "<p>Informujte zákazníky prostřednictvím tohoto textu o své značce. Zároveň můžete popsat některý z produktů, oznámit důležité informace nebo přivítat zákazníky ve svém obchodě.</p>",
        "da": "<p>Brug denne tekst til at dele oplysninger om dit brand med dine kunder. Beskriv et produkt, del meddelelser, eller byd kunder velkommen til din butik.</p>",
        "de": "<p>Mit diesem Text kannst du deine Kunden über deine Marke informieren. Beschreibe ein Produkt, veröffentliche Ankündigungen oder begrüße Kunden in deinem Shop.</p>",
        "en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>",
        "es": "<p>Usa este texto para compartir información sobre tu marca con tus clientes. Describe un producto, comparte anuncios o recibe clientes en tu tienda.</p>",
        "fi": "<p>Tämän tekstin avulla voit jakaa brändiäsi koskevia tietoja asiakkaille. Kuvaile tuotetta, jaa ilmoituksia tai toivota asiakkaat tervetulleiksi kauppaasi.</p>",
        "fr": "<p>Utilisez ce texte pour communiquer des informations sur votre marque à vos clients. Décrivez un produit, partagez des annonces ou accueillez des clients dans votre boutique.</p>",
        "hi": "<p>अपने ग्राहकों के साथ अपने ब्रांड के बारे में जानकारी शेयर करने के लिए इस टेक्स्ट का उपयोग करें. उत्पाद का वर्णन करें, घोषणाओं को शेयर करें या अपने स्टोर में ग्राहकों का स्वागत करें.</p>",
        "it": "<p>Utilizza questo testo per condividere le informazioni sul tuo brand con i tuoi clienti. Descrivi un prodotto, condividi gli annunci o dai il benvenuto ai clienti nel tuo negozio.</p>",
        "ja": "<p>このテキストを使用して、あなたのブランドに関する情報をお客様と共有します。商品を説明したり、告知の共有をしたり、あるいはあなたのストアのお客様を歓迎します。</p>",
        "ko": "<p>이 텍스트를 사용하여 고객과 브랜드에 대한 정보를 공유하십시오. 제품 설명, 공지 사항 공유 또는 고객의 스토어 방문을 환영합니다.</p>",
        "nb": "<p>Bruk denne teksten for å dele informasjon om merkevaren med kundene dine. Beskriv et produkt, del kunngjøringer eller ønsk kunder velkommen til butikken din.</p>",
        "nl": "<p>Gebruik deze tekst om informatie over je merk te delen met je klanten. Beschrijf een product, deel aankondigingen of verwelkom klanten in je winkel.</p>",
        "pl": "<p>Użyj tego tekstu, aby udostępnić klientom informacje o swojej marce. Opisz produkt, udostępnij ogłoszenia lub przywitaj klientów w swoim sklepie.</p>",
        "pt-BR": "<p>Use este texto para compartilhar informações sobre sua marca com seus clientes. Descreva um produto, compartilhe comunicado ou dê boas-vindas aos clientes em sua loja.</p>",
        "pt-PT": "<p>Utilize este texto para partilhar informações sobre a sua marca com seus clientes. Descreva um produto, partilhe comunicados ou receba clientes na sua loja.</p>",
        "sv": "<p>Använd den här texten för att dela information om ditt varumärke med dina kunder. Beskriv en produkt, dela meddelanden eller välkomna kunder till din butik.</p>",
        "th": "<p>ใช้ข้อความนี้ในการแชร์ข้อมูลเกี่ยวกับแบรนด์ของคุณกับลูกค้าของคุณ อธิบายคุณสมบัติของสินค้า แชร์ประกาศ หรือต้อนรับลูกค้าสู่ร้านค้าของคุณ</p>",
        "tr": "<p>Müşterilerinizle markanız hakkında bilgi paylaşmak için bu metni kullanın. Ürün açıklaması girin, duyuru paylaşın veya mağazanıza gelen müşterileri karşılayın </p>",
        "vi": "<p>Sử dụng văn bản này để chia sẻ thông tin về thương hiệu của bạn với khách hàng. Mô tả sản phẩm, chia sẻ thông báo hoặc chào mừng khách hàng tới cửa hàng của bạn.</p>",
        "zh-CN": "<p>使用此文本与您的客户分享有关您品牌的信息。描述产品、分享公告或欢迎客户访问您的商店。</p>",
        "zh-TW": "<p>您可以用這段文字和顧客分享品牌資訊、描述產品、分享公告，或歡迎顧客光臨您的商店。</p>"
      }
    }
  ],
  "presets": [
    {
      "name": {
        "cs": "Marquee",
        "da": "Marquee",
        "de": "Marquee",
        "en": "Marquee",
        "es": "Marquee",
        "fi": "Marquee",
        "fr": "Marquee",
        "hi": "Marquee",
        "it": "Marquee",
        "ja": "Marquee",
        "ko": "Marquee",
        "nb": "Marquee",
        "nl": "Marquee",
        "pl": "Marquee",
        "pt-BR": "Marquee",
        "pt-PT": "Marquee",
        "sv": "Marquee",
        "th": "Marquee",
        "tr": "Marquee",
        "vi": "Marquee",
        "zh-CN": "Marquee",
        "zh-TW": "Marquee"
      },
      "category": {
        "cs": "Text",
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "Texto",
        "fi": "Teksti",
        "fr": "Texte",
        "hi": "टेक्स्ट",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "nb": "Tekst",
        "nl": "Tekst",
        "pl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "tr": "Metin",
        "vi": "Văn bản",
        "zh-CN": "文本",
        "zh-TW": "文字"
      }
    }
  ]
}
{% endschema %}

Could anyone help me out with making it repetitive so that you don't have to wait for it to finish going off the screen before the new text begins. Also, the current text is cut off. It stops at Easy when really the text in the customer says "Free worldwide shipping - Money-back guarantee - 24/7 customer support - Easy returns - Unique selling point 5 ".

Thanks in advance!

JohnFromJotting · ‎10-07-2020

Hi @augds

You essentially need to double the text and the second one delay.

Here's an example I created previously which I made for my personal website, You could use my work below and just add your text and change the width etc.

https://codepen.io/Newbie1122/pen/KKzxLQY

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.

To hire me, visit my Upwork profile

augds · ‎10-07-2020

Hi @JohnFromJotting

Thanks for the help, but I can't get it to work.

Could you possibly adjust the code I attached? I would really appreciate it.

Thanks!

jparsia · ‎09-21-2021

Hi @JohnFromJotting Can you tell me where to put the code for these?

JohnFromJotting · ‎10-03-2021

Hi @jparsia

Please check my latest blog, I created a guide on how to add the Marquee to a section, with shopify 2.0 you can add this section anywhere.

Blog for Marquee

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.

To hire me, visit my Upwork profile

jparsia · ‎10-06-2021

Thank you so much! This worked really well, I was able to set up Marquee as a new section. However, it isn't scrolling the text the full width of the screen and the type is bold. I'd also like to add a small space above the text so it has some breathing room after the previous section. How could I go about editing these aspects?

Thank you again for your help 🙂

JohnFromJotting · ‎10-06-2021

Hi @jparsia

In the CSS

Get rid of

max-width: 1200px;

and

  font-weight: bold;

Ensure your text is long enough to fit the whole width, itll auto adjust the size based on the length of your text. If your text is not long enough, then just duplicate the sentence. Reminder that the longer the text, the faster itll scroll. Shorter the text, the slower.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.

To hire me, visit my Upwork profile

King-Kang · ‎11-08-2021

Hello @JohnFromJotting ,

I have created the marquee, that you have posted, and works like a charm!

I wonder, if there is any code that I could add to move the section, or to let the section, be available to header sections?

Thank you

JohnFromJotting · ‎11-08-2021

Hi @King-Kang,

You would need to put the code within the place where you want it to be, and remove the preset schema. You also need to move the schema settings within the header section. Involves quote some work to get it right.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.

To hire me, visit my Upwork profile

King-Kang · ‎11-09-2021

Hello @JohnFromJotting ,

I will try to do that.

Thank you for the tips!

OhMy70 · ‎12-18-2024

Can you share your code? I have the same problem, but the link blog of John is not working anymore...

Zworthkey · ‎11-08-2021

Hii, @augds
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

How to make marquee text repetitive and prevent it from getting cut off?

How to make marquee text repetitive and prevent it from getting cut off?

Community Blog Articles