Recharge widget width

Store Design
,

Topic summary

A user seeks CSS code to make their Recharge subscription widget span the full width (100%) of its container on a product page.

Proposed Solutions:

Three different CSS approaches were offered:

  1. Custom CSS in product info section:
.recharge-subscription-widget recharge-subscription-widget {
  max-width: none;
}
  1. Add to base.css file:
recharge-subscription-widget {
    width: 100%;
    max-width: 100%;
}
  1. More specific base.css targeting:
body.template--product .product-grid__item .product__app-block recharge-subscription-widget {
    max-width: 100%;
}

All solutions target the max-width property of the Recharge widget element. The discussion remains open with no confirmation from the original poster about which solution worked.

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

Hi there,

I’m trying to get my Recharge widget to span the whole width (100%) of the container but I cannot work out the custom code for it. Can anyone else work this out?

Tumble Coffee pw hello321

2

Try pasting this code into “Custom CSS” setting of the product info section:

.recharge-subscription-widget recharge-subscription-widget {
  max-width: none;
}

Screenshot 2025-08-13 at 2.37.08 PM
Screenshot 2025-08-13 at 2.37.08 PM752×604 49.5 KB


if my post is helpful, please like it and mark as a solution -- this will help others find it
1 Like
3

Hi @kirsten11123 ,

Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file

recharge-subscription-widget {
    width: 100%;
    max-width: 100%;
}

image
image1667×768 181 KB

4

Hello @kirsten11123

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the live theme and then click Actions > Edit code.

  • Search base.css

  • Insert the provided CSS code at the end of the file and save the changes.

body.template--product .product-grid__item .product__app-block recharge-subscription-widget {
    max-width: 100%;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.