Reduce width and round corners of featured product section in Sense theme

Topic summary

A user wants to modify the featured product section in Shopify’s Sense theme to have reduced width and rounded corners, matching the appearance of the image-with-text section. Currently, the section spans full width without rounded corners.

Solution provided:

  • Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
  • Open the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add CSS code at the bottom targeting the featured product section:
    • Apply border-radius: 20px for rounded corners
    • Set background: transparent for the color gradient background

Outcome: The solution successfully resolved the issue, achieving the desired styling match.

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

I’m trying to reduce the width and round the corners of the featured product section on the sense theme. I want it to match what the image with text section looks like (image attached). Currently the section is full width with no rounded corners.

1 Like

Hi @Fabian_weldon

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

Have just messaged you @Made4uo-Ribe

1 Like

Thank you for the information. 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:
.featured-product.product.product--medium.grid.grid--1-col.gradient.color-background-2.product--left.isolate.grid--2-col-tablet {
    border-radius: 20px;
}
section.color-background-2.gradient {
    background: transparent;
}

Perfect, thanks. Worked a treat