TessaroDocumentationTessaro handbook
Section library / Reference

Editorial product edit

Combine an editorial image with a curated product selection.

Try this setup#

Open in the editor Home page → Editorial product edit

Pair an editorial image with a small group of related products.

  1. Open Editorial product edit and choose the main image and its accompanying text.
  2. Connect your featured products using the product controls provided by the section.
  3. Check that the image and products belong to the same story. Replace the illustration and any automatic starter selections with your own edit.
See the Editorial product edit controls
Home page → Editorial product edit settings
Section controls in the editor. Image, product or question content may live in the section’s blocks.
Try this setup — Tessaro example
Example layout. Follow the steps above to connect your own content.

What to look for The editorial panel and product cards form one clear selection, with useful product destinations.

When to use it#

Combine an editorial image with a curated product selection.

Set up#

Choose the main image, product list, headings and optional destination.

Available from Add section where supported by its template restrictions. Excluded from: groups: header, footer

Section settings#

These are schema defaults. Your installed theme or selected preset can use different saved values.

Content

Heading#

Adjust this control in the theme editor and preview the result in the relevant template.

Control
text
Default
The everyday edit.

Subheading#

Adjust this control in the theme editor and preview the result in the relevant template.

Control
text
Default
Selected with intention

Image heading#

Adjust this control in the theme editor and preview the result in the relevant template.

Control
text
Default
A softer perspective.

Image#

Adjust this control in the theme editor and preview the result in the relevant template.

Control
image picker
Default
Not set

Adjust this control in the theme editor and preview the result in the relevant template.

Control
url
Default
Not set

Adjust this control in the theme editor and preview the result in the relevant template.

Control
text
Default
Explore the edit

Products#

Leave empty to show the first four products from your store's All collection.

Control
product list
Default
Not set

Layout and behavior

Image position#

Choices: Left, Right.

Control
select
Default
Left

Heading size#

Choices: Large, Extra large.

Control
select
Default
Extra large

Keep image visible while scrolling#

Adjust this control in the theme editor and preview the result in the relevant template.

Control
checkbox
Default
On

Image overlay opacity#

Range: 0–80 %.

Control
range
Default
16

Colors

Background#

Adjust this control in the theme editor and preview the result in the relevant template.

Control
color
Default
#F4F1EB

Text#

Adjust this control in the theme editor and preview the result in the relevant template.

Control
color
Default
#22221F

Image text#

Adjust this control in the theme editor and preview the result in the relevant template.

Control
color
Default
#FFFFFF

Accent#

Adjust this control in the theme editor and preview the result in the relevant template.

Control
color
Default
#A5442C

Spacing

Margins add space outside the section. Padding adds space inside it.

Margin top (desktop)#

Range: 0–200 px.

Control
range
Default
0

Margin bottom (desktop)#

Range: 0–200 px.

Control
range
Default
0

Padding top (desktop)#

Range: 0–200 px.

Control
range
Default
40

Padding bottom (desktop)#

Range: 0–200 px.

Control
range
Default
40

Margin top (mobile)#

Range: 0–200 px.

Control
range
Default
0

Margin bottom (mobile)#

Range: 0–200 px.

Control
range
Default
0

Padding top (mobile)#

Range: 0–200 px.

Control
range
Default
24

Padding bottom (mobile)#

Range: 0–200 px.

Control
range
Default
24
Tessaro documentation · Setup guides and settings reference

Search guides, settings and sections.