Remove counter under collection in Spotlight theme

Store Design
,
1

I want to remove the counter under the collection in the Spotlight theme and just keep the arrows. Please help me with it. Attached is the screen recording below. Please let me know the path and any code I need to edit or add in details, as I’m a newbie.

1 Like
2

Hi @s1nghhhhh ,
This is Theodore from PageFly - Shopify Page Builder App.

Sign into the Shopify administrator and explore to the subject proofreader under Internet based Store > Topics. The collection.liquid template file can be found in the sidebar’s Templates > Collection folder. Find the code block that yields the item count and either erase it totally or remark it out. This includes enclosing the code by {% remark %} and {% endcomment %} labels. Make certain to save the progressions and review the customer facing facade to confirm the counter no longer shows under assortment titles. Utilizing the subject proofreader to straightforwardly alter the layout code considers expulsion of UI components like the item counter in a consistent manner. Inform me as to whether you really want any further help with tweaking the Spotlight subject records as a Shopify novice.

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

3

Hi @s1nghhhhh
To hide the counter and only show the arrow, add below CSS to component-slider.css

.slider-counter.slider-counter--counter.caption {
    display: none;
}
4

Sorry but this doesn’t work

5

Hi @s1nghhhhh

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

6

Hi @s1nghhhhh
Can you provide the store link so I can check, I have already checked this on Spotlight theme

7

concpts.co

8

concpts.co is the website

9

Hi @s1nghhhhh
I have updated the CSS, Check the below code and add it to the

.slider-counter.caption {
  display: none;

base.css

1 Like
10

that works thanks a lot. I have one more query regarding the marquee text, idk if you can see it on my profile. Is there any way you could help me with that?

11

Add Scrolling marquee text section
https://community.shopify.com/c/shopify-design/add-scrolling-marquee-text-section/td-p/2377554 here is the doubt

12

Hi @s1nghhhhh
Can you provide the link where you have seen the example?

1 Like
13

https://mrbeast.store/ the first marquee scroller is the one i need with same colours but i want to add it as a different section on my page and not just the announcement bar

14

Hi @s1nghhhhh
To add the marquee same as the store you can follow the below code
Add the below code to the theme.liquid after the footer section

Add HTML where you want the effect

add CSS to base.css

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 50px;
  min-height: 100vh;
  overflow: hidden;
}

.marquee {
  padding: 1vw;
  white-space: nowrap;
}
  
.marquee:first-child {
  background-color: #ee6c52;
 
}

.marquee__inner {
  display: flex;
  gap: 20px;
}

.marquee__content {
  color: #fff;
  font-size: clamp(40px, 4.375vw, 70px);
}

add the Javascript to global.js

const init = () => {
  const marquee = document.querySelectorAll('.marquee')
  
  if(!marquee) return

  marquee.forEach(item => {
    const marqueeInner = item.querySelector('.marquee__inner')
    const marqueeContent = marqueeInner.querySelector('.marquee__content')
    
    // Duration
    const duration = item.getAttribute('data-marquee-duration')
    
    // Element Clone
    const marqueeContentClone = marqueeContent.cloneNode(true)
    marqueeInner.append(marqueeContentClone)
    
    // Marquee animation
    const marqueeContentAll = marqueeInner.querySelectorAll('.marquee__content')
    marqueeContentAll.forEach(element => {
      gsap.to(element, {
          x: "-101%",
          repeat: -1,
          duration: duration,
          ease: 'linear'
      })
    })
  })
}

document.addEventListener('DOMContentLoaded', init)
15

s1nghhhhh_0-1704202697987.png
s1nghhhhh_0-1704202697987.png1508×206 10.9 KB

I’ma beginner so could you please guide me. Do i need to paste the first piece of code before this or after this?

16

After the render {% sections ‘footer-group’ %}
Only this code

17

but it doesn’t look like the one on that website. I need something exactly like that. can u help me with it please?

18

https://mrbeast.store/

i need something that looks exactly like the one on this website.

19

Sure @s1nghhhhh
Let me update the code

1 Like
20

Hi @s1nghhhhh
Add update below CSS

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 50px;
  min-height: 100vh;
  overflow: hidden;
}

  
.marquee{
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(115, 228, 88, 1) 100%, rgba(0, 0, 0, 1) 100%);
    color: #000000;
   border-bottom: 2px solid #000000;
    border-top: 2px solid #000000;
 
}

.marquee__inner {
  display: flex;
  gap: 20px;
}

.marquee__content {
  font-size: 18px;
  font-weight:700;
  background: linear-gradient(180deg, rgba(115, 228, 88, 1) 100%, rgba(0, 0, 0, 1) 100%);
    color: #000000;
}