Product specifications
The Product specifications section lists your product's details (materials, dimensions, care, and more) next to an image, in either a list or a grid layout.
Example: https://purity.nextsky.co/products/anti-aging-serum
Section settings
General
| Setting | Description |
|---|---|
| Section width | 3 options for the container width: |
| Color scheme | Select colors from Theme settings -> Colors. |
Section header
| Setting | Description |
|---|---|
| Subheading | Short line of text shown above the heading. |
| Heading | The main title of the section. |
| Enable heading underline animation | Draws an animated underline under the words you set to italic in the heading. Use the Italic (I) button in the editor to mark the words. |
| Underline style | 3 underline styles: |
| Underline color | The color of the animated underline. |
| Description | Supporting text shown below the heading. |
| Heading size | Choose Heading 1, Heading 2, or Heading 3. |
| Alignment | Aligns the header content Left, Center, or Right. |
| Column gap | Space between the image and content columns: No gap, Small, Medium, Large, or X-Large. |
Image
| Setting | Description |
|---|---|
| Image | Upload the image shown beside the specifications (696px x 500px recommended). |
| Image ratio | Aspect ratio of the image: |
| Image width | Width of the image column on desktop (40–70%). Automatically optimized for mobile. |
| Desktop image position | Places the image to the Left or Right of the content on desktop. The image is shown above the content on mobile. |
Content settings
| Setting | Description |
|---|---|
| Specifications layout | Show the specifications as a List or a Grid. |
| Number of columns | Number of columns in the grid (2–4, used when layout is Grid). |
| Grid gap | Space between grid items: No gap, Small, Medium, or Large. |
| Background color | Background color of the content area. |
| Desktop vertical alignment | Aligns content Top, Middle, or Bottom on desktop. |
| Padding inline | Left and right spacing inside the content (0–100px). Automatically optimized for mobile. |
| Padding block | Top and bottom spacing inside the content (0–100px). Automatically optimized for mobile. |
Mobile settings
| Setting | Description |
|---|---|
| Rows | Number of rows shown on mobile before the "View more" button appears (1–10). |
| View more button label | The label for the button that expands the remaining rows. |
| View less button label | The label for the button that collapses the rows again. |
Section padding
| Setting | Description |
|---|---|
| Top | Customize the top padding of the section (0–100px). |
| Bottom | Customize the bottom padding of the section (0–100px). |
Section divider
| Setting | Description |
|---|---|
| Show divider | Displays a dividing line to separate this section from the previous one. |
Block settings
Add one Specifications item block per detail (for example, Material, Size, or Care).
| Setting | Description |
|---|---|
| Heading | The label of the specification (for example, "Material"). |
| Description | The value of the specification (for example, "100% cotton"). |
No comments yet