Sense Theme – How to Remove Featured Collection Card/Tiles Styling on Homepage Only

Store Design
, , ,
1

Dear Community:

Request:
We are using the Shopify Sense theme and the built-in Featured Collection section. By default, this section displays products inside predefined “card” shapes.

What we would like to achieve is:

  • On the homepage only, remove the “tile/card” styling.

  • Products should display with just a plain square image area, blending seamlessly into the page background (no colored tiles, no drop shadows, no rounded corners)

something like in the picture attached:

  • The background of the Featured Collection section itself should also be transparent, so it merges with the normal page background.

  • We don’t want this change to affect any other place where the Featured Collection section might be used — only the homepage.

Question:
Is it possible to do this with custom CSS (e.g. via a “Custom liquid” section or a theme override), or does the Sense theme enforce these card styles in a way that prevents us from customizing them only on the homepage?

2

in above post not everything was submitted:

this is the look we are trying to achieve (see attached image)

Screenshot 2025-09-15 at 15.06.12
Screenshot 2025-09-15 at 15.06.121212×516 133 KB

this is our preview link of the store: MatuMate®

grateful for any tips/help

greetings

4

dear Colin @colin , many thanks for that quick reply. If I navigate to the section and on the right side go to custom css I have a character limit of 500 characters :confused:

5

also the code would need to be fully mobile friendly, responsive thanks

6

@PhMA no worries! That CSS snippet should be fully responsive for all device types (mobile, tablet and desktop).

As for that character limit, let’s give this a go through direct code modification:

  1. Go to Online Store
  2. For your active theme click the menu button with “…“ on it
  3. Select “Edit Code“
  4. In the search bar at the top search for “theme.liquid“
  5. Paste the following CSS snippet as close to the bottom of the file as possible. Make sure it is before the </body>tag though:
<style>
.grid.product-grid.contains-card.contains-card--product.contains-card--standard.grid--3-col-desktop.grid--2-col-tablet-down {
    column-gap: 0;
    row-gap: 0;
    margin: 0 auto
}

.grid.product-grid.contains-card.contains-card--product.contains-card--standard.grid--3-col-desktop.grid--2-col-tablet-down .card__media {
    border-radius: 0px;
}

.grid.product-grid.contains-card.contains-card--product.contains-card--standard.grid--3-col-desktop.grid--2-col-tablet-down .button--full-width {
    max-width: max-content;
    width: auto;
    min-width: auto;
    margin: 0 auto;
    padding: 0 20px;
}

</style>

Let me know if that works for you.

7

@fractionstudio perfect many thanks