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
Section width
3 options for the container width:
Fixed width: matches your page content width in Theme settings -> Layout.
Stretch width: spans the width regardless of screen size.
Full width: takes up the entire width of the screen.
Color scheme
Select colors from Theme settings -> Colors.
Section header
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:
Simple underline
Curve stroke
Squiggle underline
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
Image
Upload the image shown beside the specifications (696px x 500px recommended).
Image ratio
Aspect ratio of the image:
Adapt to image
Square (1:1)
Portrait (3:4)
Landscape (4:3)
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
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
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
Top
Customize the top padding of the section (0–100px).
Bottom
Customize the bottom padding of the section (0–100px).
Section divider
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).
Heading
The label of the specification (for example, "Material").
Description
The value of the specification (for example, "100% cotton").
Last updated