Related products – Design

The Related products section in the design setting lets you control how your Related Products widget looks on your store.
You can choose the layout, adjust spacing and sizes, show or hide elements, and customize colors — all with live preview.

🛠️ How to find the setting

Open the app > click Settings > Design > click on Related tab

You’ll see:

Design settings on the left
A live Preview on the right

Changes are shown instantly in the preview.

1) Choose a layout (Template)

This controls how related products are displayed.

Available layouts

Carousel
Products scroll horizontally (best for product pages).
Bundle
Shows products grouped together (great for bundles or “buy together” offers).
Table
Compact, list-style layout (useful for many products).
List
Simple vertical list.
Vertical
Stacked cards, often used in sidebars.
Slider
Large sliding cards for visual impact.

Tip:
If you’re not sure, start with Carousel. It works well for most stores.

2. General layout settings

Maximum width

Controls how wide the widget can be.

Example: 1170 fits most desktop layouts.
Smaller values make the widget more compact.

Number of products

Sets how many related products are shown.

Example: 10 → show up to 10 products.
Actual number shown may depend on layout and screen size.

Position

Defines where the widget appears.

Use app block in theme editor (recommended)
Or theme-specific placement options

3. Elements

Choose which product elements are visible:

Variant select – show variant dropdowns (size, color, etc.)
Sale label – show “Sale” badge
Price – show product price
Add to cart button – allow quick add

Example:
If you want a cleaner look, you can hide Variant select and only show the Add to cart button.

4. Color settings

Customize the widget to match your store’s branding.

You can change colors for:

Heading
Subheading
Product title
Product price
Old price
Sale label text
Sale label background
Button text
Button background

All colors update instantly in the preview.

5. Live preview

The Preview panel on the right shows exactly how your widget will look on your store.

Use it to:

Compare layouts
Test colors
Check spacing and readability

No need to save to see changes.

Example setup

Goal: Clean related products carousel under product description

Recommended settings:

Template: Carousel
Maximum width: 1170
Number of products: 6
Enabled elements:
- Price
- Sale label
- Add to cart button
Colors: Match your theme’s primary colors

Result:
A modern, scrollable related products section that blends seamlessly with your store.

Tips & best practices

Keep the number of products between 4–8 for best conversion
Use Carousel for product pages, List/Table for sidebars
Match button and text colors with your theme for consistency
Always check the preview before saving

🙋 Still need support?

If you still need help, please feel free to contact us at hi@tipo.io. We’ll be happy to assist you further.