How to remove the grey padding below the image as a complementary product?

Shopify Discussion

Topic summary

A user is seeking help with customizing the appearance of complementary product displays on their Shopify store. They have four specific requests:

Visual adjustments needed:

  • Remove grey padding appearing below product images
  • Reposition the button directly beneath the price point

Button functionality changes:

  • Make the button permanently visible instead of only showing on hover
  • Replace the “VIEW PRODUCT” button with variant selection options, followed by an add-to-cart function

A system response indicates a CSS solution has been provided to be added to the theme.liquid file, though the actual code content is not visible in the conversation. The discussion appears to be in progress with the initial troubleshooting response delivered.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

withaudette_0-1744655642766.png
withaudette_0-1744655642766.png589×158 8.74 KB

withaudette_0-1744655743062.png
withaudette_0-1744655743062.png613×154 3.65 KB

  1. To remove the grey padding below the image

  2. Shift the button right below the price point

  3. The button is now only currently shown on hover, i want to remove that and make it static so it’s visible

  4. To change button to showcase the variants instead of VIEW PRODUCT and then to add to cart

https://www.audette.store/products/lip-treat-glaze (code: test)

2

Hey @withaudette ,

Please add this to your theme.liquid file and it’ll accomplish your desired output.