How to stack featured collection in empire theme

Shopify Discussion
1

Hello,

I am using Shopify’s empire theme and I need to stack the featured collection section on mobile instead of a slider. Is there any way I can achieve this using CSS? I just need the classes that control the layout. Here is the link to my website https://www.landscapesupplyguys.com

Thanks,

2

I’ve had a look at your website but i couldn’t identify a slider on desktop nor mobile - but here’s the potential solution:

In the shopify theme editor do the following:

  1. Navigate to the ‘Featured collection’ block in your shopify theme editor

  2. Select the ‘layout’ dropdown under settings

  3. There are two settings for the layout of the featured collection - slideshow & grid

  4. Select ‘grid’

  5. You should now no longer have a slider

3

Hello, Its already set to grid layout. Here is the link to the preview. https://g26m7lif72oyqii8-70289752354.shopifypreview.com. You will find the featured collection section at the bottom. Thanks

4

PFA image

Screenshot 2025-04-14 at 9.02.17 AM.png
Screenshot 2025-04-14 at 9.02.17 AM.png4064×1944 559 KB

5

Thanks - can you try the following? :

  • Step 1: Go to Online store > Themes > Actions > Edit code.

  • Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
  .featured-collection__container [data-content],
  .featured-collection__content.flickity-enabled {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2-column grid on mobile */
    gap: 10px;
    overflow-x: visible !important;
    white-space: normal !important;
  }
  
  .featured-collection__content.flickity-enabled .flickity-viewport,
  .featured-collection__content.flickity-enabled .flickity-slider {
    position: static !important;
    transform: none !important;
    display: contents !important;
    width: 100% !important;
    height: auto !important;
  }
  
  .productgrid--item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-right: 0 !important;
    transform: none !important;
    width: 100% !important;
    display: block !important;
  }
  

  .flickity-button,
  .flickity-page-dots {
    display: none !important;
  }
}
6

The slider is not visible but the section is hidden. Its not visible. Its there on the live website at the bottom if you can please inspect it.

Thanks.

7

Hello its working now, I had this CSS added and because of that the scroll bar was not visible. But now its working.
.site-main {
overflow: hidden !important;
}
Thanks again.

8

No problem - please don’t forget to mark the response as correct to help future people :slightly_smiling_face:

9

Hello again,

There is one more issue with scrolling. As soon as I move the featured collection section on the top, all the other sections disappear and only the featured collection is visible. here is the preview link https://g26m7lif72oyqii8-70289752354.shopifypreview.com. The desktop view is fine but it breaks as we change to mobile view. Thanks