Hi, I am trying to figure out how to add a “more like this” section with related products in my reflow project. I could easily figure this out if i had a product page for each item, however, I am using a dynamic product page. I am not very familiar with JS, so hopefully this fix doesnt require that. If anyone knows how to do this on a dynamic product page with related products to the product that is currently populated that would be great, thanks!
2 Likes
Hi Maggie,
I’m actually exploring the same idea, trying to find a way to link related products directly on the main product page. I’ve been digging around online for solutions while working on my wife’s store. It’s still in progress, but I’m constantly tweaking things to enhance it.
One challenge is that Reflow locks the JavaScript and product data to their server, so I haven’t been able to edit the JS directly or link the jQuery. I’ve made some improvements on the CSS side. Feel free to check out her site here, and if you see any components you like, I’d be happy to share them with you.
I’m aiming to have the site ready by the end of this month fingers crossed!
I will keep my eyes on your topic in case some one figured it out.
Wishing you all the best with your beautiful online store.
There probably will be a better way but here’s my 2-cents worth.
A quick rough version.
You could add a product component or 2 or 3 etc from the ecommerce components.
In the image I added 3 into 1row 3columns component.
In the options for each product select the desired one.
Then add a view link to each product column & link to the actual details page with that product.
My details page is called product_details.html so 1st product links to “product_details.html?product=988062354“ 2nd to “product_details.html?product=1087581077“ etc.
To get the images smaller you’ll need to add some CSS and a class to the product, I called mine for this example “moreLikeThis”.
This way you’ll only target the more like this images & not the main product page ones.
.moreLikeThis .ref-image {
width: 100px !important;
max-width: 100% !important;
height: 100px !important;
}
If you come up with a better nicer way post it for others to see/use.
Cheers Chris
1 Like