Making that final choice, deciding on what to get, and actually clicking the "Add To Cart" button can be a hurdle for some customers. You can increase the odds of a purchase by showing products related to what they are currently viewing. Like our Recently Viewed Products Block, our Related Products Block shows additional products choices, but this time from the same category as the product being viewed. More choices can mean more sales.

From your store's Dashboard click the Site Designer icon in the left Navigation Menu.

The Related Products Block can be added to any Page on your site. In this example, we will add it to the Product Detail Page. Using the Page: Home dropdown at the top of the Site Designer Page, choose Product Detail from the list.

On the Product Detail Page, mouse over the page until you see the Plus Sign icon to add a new block. Click the Plus Sign icon and locate the Product section of the Add A Block menu. Open the section and choose Related Products, using the Add Block button.

Once your block has been added, hover over the new header section and locate the gray Edit button. Use the Edit button to open the Edit Block menu and customize it.

The Edit Block menu for the Related Products offers these options:

Header Block Controls

Trash Can Icon to Delete Block
Arrows to move block up or down the page

Make This Block Reusable Toggle

Block Settings

Make Selection Full Width Toggle

Make Background Color Full Width Toggle

Background Color Chooser

Padding On Top Slider

Padding On Bottom Slider


Edit Text Button (Opens Text Editor)

Color Chooser

Product Settings

Align Text Dropdown (Left and Center)

Name Color Chooser

Show Price Toggle

Price Color Chooser

Show "Add To Cart" Button Toggle

Number Of Products On Desktop Slider

Card Layout

Display Products As Cards (Enforces Image Ratios) Toggle

Image Ration Dropdown (Landscape, Portrait and Square)

Enable Image Flip On Desktop Toggle

Background Color Chooser

Border Color Chooser

Border Width Slider

Border Radius Slider

Navigation Arrows

Enable Toggle

Background Color Chooser

Icon Color Chooser

Background Hover Color Chooser

Icon Hover Color Chooser

Navigation Dots

Enable Toggle

Border Color Chooser

Active Background Color Chooser

Inactive Background Color Chooser

Make sure to click the Done button at the bottom of the block edit section to save your changes.

Additionally, you will need to click the green Publish button at the top of the page to make your changes live on your store.

Did this answer your question?