TessaroDocumentationTessaro handbook
Section library / Reference

Complementary products

Show complementary recommendations for the product being viewed.

When to use it#

Show complementary recommendations for the product being viewed.

Set up#

Configure recommendations in Shopify where required, then choose the section’s presentation settings.

Available from Add section where supported by its template restrictions.

Section settings#

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

Show section#

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

Control
checkbox
Default
On

Content

Subheading#

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

Control
text
Default
Complete the look

Heading#

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

Control
text
Default
Pairs well with

Products to show#

Range: 2–8 .

Control
range
Default
4

Columns#

Choices: 2, 3, 4.

Control
select
Default
4

Show slide indicator dots#

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

Control
checkbox
Default
On

Show navigation arrows#

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

Control
checkbox
Default
On

Colors

Background color#

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

Control
color
Default
#F9F5EF

Accent color#

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

Control
color
Default
#806042

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
48

Padding bottom (desktop)#

Range: 0–200 px.

Control
range
Default
48

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
32

Padding bottom (mobile)#

Range: 0–200 px.

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

Search guides, settings and sections.