How can I remove a single cell from a specific webpage grid?

Store Design
, ,

Topic summary

A user needed to remove a single cell from a grid on a specific webpage but couldn’t replicate the Chrome Developer Tools changes in their website’s CSS panel.

Two solutions were provided:

  1. JavaScript approach: Add custom code to the theme.liquid file, placed above the closing tag, to target and hide the specific grid cell.

  2. CSS approach: Navigate to Online Store > Themes > Edit Code, then add CSS to the base.css, style.css, or theme.css file using a selector like #shopify-section-template--[ID] > main > div > section > x-grid > x-cell:nth-child(2) { display: none !important; }

Resolution: The original poster confirmed one of the solutions worked successfully and thanked the contributors.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hello, I am trying to find out how to remove 1 cell from the grid on a specific page. I was able to remove the cell in the chrome developer, but can’t seem to find out how to achieve this in the css panel of my website. Any tips would be helpful.

Screenshot 2023-09-04 at 1.42.47 PM.png
Screenshot 2023-09-04 at 1.42.47 PM.png2814×1232 102 KB

Screenshot 2023-09-04 at 1.45.22 PM.png
Screenshot 2023-09-04 at 1.45.22 PM.png2816×1456 486 KB

website: https://2d26b3.myshopify.com/pages/about

pw: reishi

1 Like
2

Hey @JhordanMSUITE

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1693850072525.png
Moeed_0-1693850072525.png1900×763 18.2 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @JhordanMSUITE

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
#shopify-section-template--19687752106280__main > div > section > x-grid > x-cell:nth-child(2) {
    display: none !important;
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

Thank you tremendously!

5

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.