The Related Products section is designed to display a collection of suggested or complementary products on the product page. It helps increase cross-selling opportunities and improves customer browsing experience by showcasing similar or recommended items. The layout supports both grid and slider views, allowing full customization for desktop and mobile displays.
Section Settings #
Color Scheme #
Selects the overall visual theme for the section. Based on theme presets (e.g., Scheme 1, Scheme 2, etc.)
Section Width #
Choose how wide the section spans on the page:
- Page: Keeps the content aligned with the main page container.
- Full: Stretches the section across the full browser width.
Heading #
Sets the main title of the section.
Heading Size #
Select the size of the left-side heading (e.g., H1, H2, H3, H4, H5, H6).
Text Align #
Choose the alignment of the section heading (Left, Center, or Right).
Product Display Settings #
Show Second Image on Hover #
Displays the product’s secondary image when hovered over (if available).
Show Add to Cart Button #
Displays an Add to Cart button directly under each product card.
Show Product Vendor #
Displays the product vendor name (brand or supplier) below the product title.
Show Product Rating #
Shows the star rating or review snippet below the product name (if enabled through metafields or app).
Show variant swatches #
Shows available variants as swatches or buttons.
Desktop view mode #
Choose how products appear on desktop:
- Grid—static layout.
- Slider—scrollable carousel format.
Products to Show #
Controls how many total products appear in the section.
Products per Row on Desktop #
Sets the number of products displayed per row in desktop view.
Products per Row on Mobile #
Defines how many products are shown side-by-side on mobile devices.
Enable Mobile Slider for Grid View #
Turns the static grid into a slider layout only on mobile screens, improving usability and navigation.
Slider Controls #
(Available when slideshow is enabled)
- Show navigation arrows
- Show pagination dots
Layout Settings #
Top Padding #
Adds space above the section to separate it visually from other content.
Bottom Padding #
Adds space below the section.
