Perfect Piece Block Widget¶
Highlight one or more featured pieces side by side, each with an image, a heading, a short description, and up to five small info boxes (an icon plus a line of text). It's ideal for spotlighting collections, services, or selling points.
Page Builder name: Perfect Piece Block | Eyeva Sofas — Version: 1.0.2
Add it to your page¶
- In your store admin, open Storefront → My Themes and click Customize to launch Page Builder.
- In the Widgets panel on the left, find Perfect Piece Block | Eyeva Sofas.
- Drag it onto your page. It appears with two sample columns.
- With the widget selected, open the settings panel on the right to customize it.
Settings¶
Settings¶
General¶
| Option | What it does | Default |
|---|---|---|
| Style | Inherit theme (match your theme's fonts, colors, and spacing) or Custom (set your own below). | Inherit theme |
| Base spacing | Overall spacing scale for the block (in rem). Custom style only. | 1 rem |
| Background color | Background color of the info boxes. Custom style only. | #f7f7f7 |
| Border color | Border color used in the block. Custom style only. | #dddddd |
| Small border radius | Corner roundness for smaller elements, in pixels. Custom style only. | 4 |
| Border radius | Corner roundness for larger elements, in pixels. Custom style only. | 8 |
| Icon color | Color of the box icons. Custom style only. | #2D73BD |
| Text color | Color of the box text. Custom style only. | #555555 |
| Font size | Text size in the boxes, in pixels. Custom style only. | 18 |
Items (columns)¶
The Items tab holds the columns shown in the block. Each item is one column with an image, heading, content, and info boxes.
- Add a column: click the add button at the bottom of the Items list.
- Remove a column: open the item and use its delete (trash) control.
- Reorder columns: drag an item up or down to change the left-to-right order.
The widget starts with two columns. Each column has these options:
| Option | What it does | Default |
|---|---|---|
| Image | The main image for this column. | A sample image |
| Image width | Image width in pixels. | 585 |
| Image height | Image height in pixels. | 490 |
| Image Alt Text | Describes the image for accessibility and SEO. | Empty |
| Heading | The column title. | Visit a Define Studio |
| Content | A short description under the heading. You type it and format it with the visual editor. | See our pieces in an atmosphere that's inspiring—not overwhelming. |
| Box 1 | Show/hide the first info box, with its icon and text (see Box options below). | Shown |
| Box 2 | Show/hide the second info box, with its icon and text. | Shown |
| Box 3 | Show/hide the third info box, with its icon and text. | Hidden |
| Box 4 | Show/hide the fourth info box, with its icon and text. | Hidden |
| Box 5 | Show/hide the fifth info box, with its icon and text. | Hidden |
Box options (Box 1 to Box 5)¶
Each info box has the same two settings:
| Option | What it does | Default |
|---|---|---|
| SVG Icon HTML | The icon shown in the box. Paste icon artwork here, or keep the built-in icon. | A built-in icon |
| Text | The line of text next to the icon. You type it and format it with the visual editor. | Find your nearest Define Studio |
Tips¶
- Two or three columns usually reads best; they stack vertically on phones automatically.
- Use images with the same shape and size across columns for a balanced, even layout.
- Turn on only the info boxes you need — start with Box 1 and Box 2, then enable more as required.
- Keep box text to a single short line so the icon-and-text pairs line up neatly.
- Leave Style on Inherit theme so the block matches your store; switch to Custom only when you need specific colors or sizes.