Wrapper block box missing or in the wrong place

The Wrapper block finds your product info area by itself. It knows common layouts. On other themes it uses the area the block sits in. If it picks the wrong area, give it a custom selector.

Fix it by symptom

• I can't drag blocks into the Wrapper: the block doesn't hold other blocks. It draws a box around the product info area, and your blocks already sit in there.
• No box on phones: turn on Use wrapper on mobile.
• No box at all: check that Border isn't None with an empty Background. With a custom selector, check that it matches an element on the page. Then click Save.
• The box wraps the wrong area: set a custom selector. See below.
• Something in the box gets cut off: the box hides anything that sticks out. Add overflow: visible; to Custom CSS.
• Too much space under the header strip: lower Top under Padding. The strip's own height follows its Font size.
• The color fills the whole section: that's Section background. Clear it, and use Background for the box.

Set a custom selector

1. On your store, right-click your product info column and choose Inspect.
2. Find the element that holds the whole column. Note its class.
3. In Shopify admin, open Online Store → Themes.
4. Click Customize on your theme.
5. Open your product template.
6. Select the Wrapper block.
7. Turn off Auto detect product info.
8. Enter the selector in Custom product info CSS selector, like .product-info.
9. Click Save.

Stuck on the selector? Open the chat bubble in the Section Store app or email [email protected]. Send your theme name and a product URL, and we'll find it.

Related

• Add a box around your product info with the Wrapper block
• Add custom CSS to Conversion Blocks
• Do Conversion Blocks work with my theme?

Also searched as: wrapper not working, wrapper wrong area, wrapper not showing on mobile, wrapper cut off, cant drag block into wrapper, put blocks inside wrapper, custom product info css selector, wrapper selector