Discover more great products you might like! Here, we present Recently Viewed Products, making it easy to find items that have caught your eye. Also, don't miss Related Products, which brings together similar or frequently purchased products, offering interesting shopping suggestions that match your interests. Keep exploring to enrich your selection!
Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click to open dropdown pages in the topbar > select Products > select Default product > In the Sections tab, scroll and find Discover products in Template
2.1.1. General
Reveal on scroll (Show animation when section becomes visible): Activates animations when the section becomes visible while scrolling, enhancing engagement and interactivity.
Make section full width: Expands section width to the full page width, optimizing display on large screens and creating an impactful layout.
Show separator line: Display a horizontal line to visually separate content sections, creating clarity and a structured layout.
Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience
Maximum products to show: Limits the number of products displayed from the collection, controlling the length of the display section.
Number of columns on desktop: Defines the number of product columns displayed on desktop screens, optimizing the layout for large screens.
Number of columns on mobile: Select the number of product columns displayed on mobile phone screens (1 column or 2 columns)
Image ratio: Adjust the aspect ratio of product images, ensuring images display beautifully and propotionally (Adapt to image, Square, ASOS, Portrait, Lanscape, Custom)
Show vendor: Displays the product vendor's name, providing additional information to customers.
Top padding (Desktop/Mobile): Creates space above the content within an element, separating it from elements above and improving visual layout.
Bottom padding (Desktop/Mobile): Creates space below the content within an element, separating it from elements below and improving visual layout.
2.1.2. Theme Settings
In the Discover products > click open Theme Settings tab
Title maximum line (0 to auto line, if enable will affect hover effect of title): Limits the number of lines displayed for product titles, maintaining a clean layout and preventing overly long titles.
2.1.3. Custom CSS
In the Discover products > click open Custom CSS tab
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to theme settings*
To add Related products block to the Discover products, click the Add block button (plus icon ➕) under the Discover products.
Once the Related products block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Related products can be managed in the Search & Discovery app
Heading: Enter the title text for the section, providing a clear and attention-grabbing title for viewers.
To add Recently viewed products block to the Discover products, click the Add block button (plus icon ➕) under the Discover products.
Once the Recently viewed products block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Block is hidden if no products have been visited.
Heading: Enter the title text for the section, providing a clear and attention-grabbing title for viewers.
