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).
Product Card Background #
Controls the background style of the product cards.
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).
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.
Layout Settings #
Top Padding #
Adds space above the section to separate it visually from other content.
Bottom Padding #
Adds space below the section.
