Hi there,
in pagefly, how can I add a section with related products (automatically generated) like “customers also bought” on a collection page?
Thank you!
Hey @kbac ,
To add a “Customers Also Bought” or related products section on a collection page in PageFly, follow these steps:
- Use Dynamic Product Data in PageFly:
PageFly itself can integrate with Shopify’s dynamic product data or an app’s widget to display related products. Here’s how to set it up:
A. Add a New Section:
-Open your collection page in the PageFly editor.
-Click on Add Section and choose a blank section or a pre-designed one.
B. Insert Product List Element"
-In the left sidebar, search for “Product List” or “Collection List.”
-Drag the Product List element into the section.
-Configure the settings to pull data dynamically:
-Set the source to Related Products, Recommended Products, or any other app-installed option if available.
-Filter the collection or tags if needed.
C. Customize the Layout :
-Choose the number of products to display in the section.
-Style the products using PageFly’s customization options for spacing, alignment, buttons, and colors.
D. Optional: Use Shopify Liquid Code:
If you want more control or are integrating with Shopify’s native recommendation API, you can add a Custom Liquid element:
-Drag the Custom Code element into the section.
-Use Shopify Liquid code to pull related products. For example:
{% for product in product.recommendations %}
{{ product.title }}
{{ product.price | money }}
{% endfor %}
Style this section with custom CSS.
Preview the collection page to ensure the related products section appears and functions as expected.
If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!
Best Regard,
Rajat Sharma
1 Like
Thank you.
I was following your steps, but when I choose “related products” as product source, I understand that pagefly wants manual input.
However, I was hoping to get automatic product recommendations based on shopifys data.
1 Like
@kbac ,
You’re correct! When using PageFly’s Product List element, the “Related Products” option typically requires manual input, meaning you’d have to choose specific products for that section. For automatic recommendations based on Shopify’s data, you would need to use Shopify’s built-in Product Recommendations API or an app that integrates with Shopify’s recommendation system.
Unfortunately, PageFly doesn’t natively pull automatic related products using Shopify’s data out of the box. Here’s what you can do to achieve automatic product recommendations:
- Using Shopify’s Built-In Product Recommendations API:
PageFly doesn’t natively pull automatic related products from Shopify, but you can use Liquid to access Shopify’s recommendations
Steps:
- Add a Custom Liquid Section:
-Open your collection page in PageFly and add a Custom Liquid element where you want the related products section.
- Insert Shopify Liquid Code:Add this code to pull automatic recommendations based on Shopify’s algorithm (e.g., products bought together or similar products):
{% assign recommendations = product.recommendations %}
{% if recommendations.size > 0 %}
### Customers also bought
{% for recommended_product in recommendations %}
{{ recommended_product.title }}
{{ recommended_product.price | money }}
{% endfor %}
{% else %}
No related products found.
{% endiStyle the Sectionf %}
Style the Section: Customize the layout with CSS (e.g., grid or list) to match your store’s design.
This will automatically show related products based on Shopify’s internal recommendation engine.
- Using a Shopify App for Related Products (Easy Integration):
If you prefer a simpler setup, you can use a Shopify app that automatically generates related products. Some popular options include:
-Frequently Bought Together
-Bold Upsell
-Also Bought – Related Products
Steps:
-
Install the app:Choose and install an app from the Shopify App Store.
-
Set Up the App: Follow the app’s setup process to enable automatic related product recommendations.
-
Wmbed the Widget in PageFly: Use PageFly’s Custom HTml or Custom Liquid element to embed the widget code provided by the app.
Let me know if you need help with any of these steps!
1 Like
Thank you.
So if I want to have the Shopify recommended product functionality like descibed here (https://shopify.dev/docs/storefronts/themes/product-merchandising/recommendations) in pagefly, I have to use the custom code right?
Could you tell me exactly where to put the code? In pagefly or through edit code of theme?
I testet the liquid code, but it shows no results.
Important: this is for a collection page, not for a product page.
@kbac ,
Yes, you’re right! In order to use Shopify’s recommended product functionality on your collection page within PageFly, you will need to integrate custom code because PageFly doesn’t natively support Shopify’s built-in recommendations.
Here’s a step-by-step guide on where and how to add the code for a collection page:
- Add a Custom Liquid Element in PageFly:
Since you’re working with PageFly, you need to add the Custom Liquid element directly within the PageFly editor. Here’s how you can do it:
-Open your collection page in the PageFly editor.
-Add a Custom Liquid block: Drag and drop the Custom Liquid element where you want the related products section to appear (e.g., at the bottom of your collection page).
- Insert Shopify Liquid Code for Related Products:
Now, inside the Custom Liquid block, paste this code: liquid Copy code:
{% assign collection_handle = collection.handle %}
{% assign recommended_products = collections[collection_handle].products %}
{% if recommended_products.size > 0 %}
## Related Products
{% for recommended_product in recommended_products %}
### {{ recommended_product.title }}
{{ recommended_product.price | money }}
{% endfor %}
{% else %}
No related products found.
{% endif %}
- Troubleshooting and Testing:
Since you mentioned that the code didn’t show results, there could be a couple of reasons why this happened:
-
Collection Handling: Ensure that your collection has products. If there are no products in the collection, the code will not display any related products.
-
Data Availability: In PageFly, collections might not be available the same way as in a product page. You may need to confirm if Shopify’s recommendation system for related products (like “products bought together”) is available for collection pages.
-
Liquid Availability: If this still doesn’t work in PageFly, it could be due to PageFly’s limited Liquid support. You might have to try implementing it directly through theme customization (by editing your theme’s collection.liquid template) instead.
@kbac ,
Alternative Approach (Direct Theme Edit):
If you want to integrate Shopify’s recommendation system more robustly, you may want to try adding this directly to your theme files via the Shopify Admin rather than within PageFly. Here’s how you can do that:
Follow These Steps:
-
Online Store
-
Themes
-
Edit Code
-
Find your Collection Template:
- Typically located under Templates > collection.liquid or Sections > collection-template.liquid (depending on your theme).
- Insert the Liquid Code:
Place the following code where you want the related products section to appear (e.g., at the bottom of your collection page):
{% assign collection_handle = collection.handle %}
{% assign recommended_products = collections[collection_handle].products %}
{% if recommended_products.size > 0 %}
## Related Products
{% for recommended_product in recommended_products %}
### {{ recommended_product.title }}
{{ recommended_product.price | money }}
{% endfor %}
{% else %}
No related products found.
{% endif %}
Save and Test: After saving, view your collection page to see if the related products section is appearing as expected.
If my replies have been helpful to you, kindly leave a like on them! It would greatly assist in improving my profile. Thank you for your support!