How can I display collection icons in a single line without text on Enterprise?

[nicfaiths]

I have 7 collections I’d like to display all on a single line. Each collection has its own icon which shows the name. Id like to display just the icon on a white background excluding any text below. I’d also like each icon in view instead of having to scroll to see more with each link remaining active. Is this possible?

This seems a lot to ask so apologies,

If this is not possible the removal of the text below is most important as I do not want the cane repeated.

I am using Enterprise if this helps, you can view my site here:
https://electrorad.shop/

[BSS-Commerce]

Hi @nicfaiths

"I noticed you currently have 8 collections instead of 7. Regarding the issue of removing text beneath the icons, this seems relatively straightforward. Please follow these steps:

1. Go to Themes → Edit Code.

2. Find file main.css

3. Make a slight modification, then navigate to the following section.

.card__info {
    padding-top: calc(4 * var(--space-unit));
}

Please rephrase it as

.card__info {
    padding-top: calc(4 * var(--space-unit));
    display: none !important;
}

And find the following passage

@media (min-width: 1280px)
.xl\:grid-cols-4 {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

Please rephrase it as (pay attention to the number 8, as it represents the total number of your collections)

@media (min-width: 1280px)
.xl\:grid-cols-5 {
    grid-template-columns: repeat(8,minmax(0,1fr));
}

The final result will look like this

Your request is a bit unclear, and additional details would be helpful for better understanding. Could you provide more context or specific details about what you mean by “each icon in view instead of having to scroll to see more with each link remaining active”? This will help me better comprehend your request and provide a more accurate response.

[nicfaiths]

I’m displaying the icon for each range instead of an image. What I mean by “each icon in view” is exactly what you have achieved in the above visual. You can see each collection without having to scroll through the carousel to view the others.

However I’ve changed the numbers to what you have said but I still have to scroll through the carousel to view the additional collections. I’ve even copied and paste your suggestion and its not worked.

This isn’t the end of the word, my main issue was the repetition of the collection titles and your suggestion has fixed this for me so I’m happy… Thank you!

[cuongmn]

I apologize for the delayed response. If you want the collections, as shown in the provided image, to be displayed without the need for scrolling, please locate the main.css file.

@media (min-width: 1280px)
.xl\:auto-cols-6 {
    grid-auto-columns: calc((100% - var(--column-gap) * 5) / 6);
}

and modify it to

.xl\:auto-cols-6 {
    grid-auto-columns: calc((100% - var(--column-gap) * 5) / 9);
}

Note: The number 9 indicates the quantity of collections + 1.

As you can see, the scroll indicator has disappeared, and it will look like this

This adjustment currently only applies to desktop screens. On desktop, I notice the width is quite large, and the switch you suggested is a good idea.

I’ve observed that on smaller screens with a narrower width, it still exhibits scrolling because it uses different CSS code

liminating the scroll on these screens seems impractical. However, if you want to reduce the size of the collection icons, allowing more collections to be displayed within one screen, please locate the following CSS code

.auto-cols-2 {
    grid-auto-columns: calc((100% - var(--column-gap)) / 2);
}

Change the number 2 to a larger number. For example, you can modify it to 4. The result on mobile will be