> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/collections-and-products-pages/product-page/related-products.md). # Related Products The Related Products section automatically displays products that are similar or complementary to the product customers are currently viewing. This section helps customers discover additional items they might be interested in, which can increase your average order value and improve the shopping experience. The products shown are managed through Shopify's Search & Discovery app, which uses smart algorithms to recommend the most relevant products to each customer.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. In the **page/template** selector, choose a **product page** (e.g., Default product) 3. Open **Sections** > **Related products**. 4. Make your changes, preview live, then click **Save**. {% endhint %} *** ### Settings #### Heading content * **Heading**: Enter the title that appears above the related products section. The default is "You may also like" but you can customize it to match your brand voice. * **Heading size**: Control the size of the section heading. Options range from h4 (smallest) to hxxl (extra large) to match your design preferences. * **Underline**: When enabled, adds a decorative underline beneath the heading for visual emphasis. * **Text position**: Control how the heading is aligned. Options include Start (left-aligned), Center (centered), or End (right-aligned). #### Layout * **Product count**: Set how many related products to display. You can show between 2 and 10 products. More products give customers more options but take up more space on the page. * **Columns**: Control how many products appear side by side on desktop screens. Options range from 1 to 6 columns. More columns create a more compact layout, while fewer columns make each product more prominent. * **Desktop slider**: When enabled, products are displayed in a slider format on desktop screens instead of a static grid. This is useful when you want to show more products than can fit in the available columns. * **Slider buttons position**: When using a desktop slider, control where the navigation arrows appear. Options include Above grid (buttons appear above the product slider) or Over grid (buttons appear overlaid on the slider). * **Progress bar**: When enabled, displays a progress bar showing how far through the slider customers have scrolled. This helps customers understand how many products are available and their position in the slider. * **Progress bar position**: When the progress bar is enabled, choose where it appears. Options include Top (above the products) or Bottom (below the products). * **Full width**: When enabled, the section spans the full width of the browser window instead of being contained within the page width. This gives the section a more immersive look. * **Colors**: Choose a color scheme for the section background and text. This affects the overall appearance of the related products area. #### Mobile layout * **Mobile columns**: Control how many products appear side by side on mobile devices. Options include 1 column (products stacked vertically) or 2 columns (products side by side). Two columns show more products at once but make each product smaller. * **Progress bar on mobile**: When enabled, displays the progress bar on mobile devices when using a slider. This helps mobile customers navigate through the products. #### Product card * **Image ratio**: Control the shape of product images. Options include Landscape (wide images), Portrait (tall images), Square (equal width and height), or Tall (extra tall images). Choose the ratio that best showcases your products. * **Vendor**: When enabled, displays the product vendor name on each product card. This is useful if you sell products from multiple brands or manufacturers. * **Quick add**: When enabled, adds a quick add button to each product card that allows customers to add products to their cart without visiting the product page. This speeds up the shopping process and can increase conversions. * **Quick view**: When enabled, adds a quick view button to each product card that opens a popup with product details. This lets customers see more information without leaving the current page. * **Show swatches**: When enabled, displays color swatches on product cards for products with color variants. This gives customers a quick visual way to see available colors without clicking through to the product page. * **Product rating**: When enabled, displays customer ratings and reviews on product cards if you have a reviews app installed. Ratings help build trust and provide social proof that can encourage purchases. * **Show availability**: When enabled, displays stock status information on each product card. This shows customers whether products are in stock, low stock, or out of stock, helping them make informed purchasing decisions. * **Show variants**: When enabled, displays product variant options (like size or color) directly on the product cards. This shows all available variants of the product. If you want to show only specific variants, use the Custom product variants setting below. * **Custom product variants**: Enter the names of specific variant options you want to display on product cards. Separate each variant name with a comma (e.g., "Color, Shoe size"). This is useful when you want to show only certain variants instead of all available options. * **Metafields to show**: Enter the metafields you want to display on product cards. Separate each metafield with a comma using the format "metafield\_namespace.metafield\_key" (e.g., "custom.badge, custom.material"). This allows you to show custom product information like badges, materials, or other custom data. {% hint style="info" %} Each variant must be connected to a metafield {% endhint %} #### Padding * **Padding top**: Add space above the section. Options range from 0px (no space) to 400px in 10px increments. On mobile devices, this is automatically reduced to half the value for better mobile display. * **Padding bottom**: Add space below the section. Options range from 0px (no space) to 400px in 10px increments. On mobile devices, this is automatically reduced to half the value for better mobile display. *** ### Tips * Enable quick add and quick view buttons to make it easier for customers to purchase related products without navigating away from the current page. This can significantly increase your conversion rate. * Use the desktop slider when you want to show more products than can fit in your chosen column layout. This keeps the page organized while still showcasing a wide variety of related items. * Show product ratings and availability to build trust and help customers make informed decisions. These details can be the deciding factor for customers who are comparing multiple products. * Customize the heading to match your brand voice. Instead of the default "You may also like," consider using phrases like "Complete the look," "Frequently bought together," or "Customers also purchased" to create a more personalized experience. * Test different column layouts to find what works best for your products. Products with detailed images may look better with fewer columns, while simple products can work well with more columns. * Enable the progress bar on sliders to help customers understand how many products are available and navigate through them more easily. * Use custom product variants and metafields to highlight specific product information that's important to your customers, such as special features, materials, or certifications. * Only show the variant options that matter most via Custom product variants to avoid clutter. * Match Image ratio to your product photos to avoid cropping.