Recommended products listing vertically? Debut Theme

Solved
Tourist
12 0 0

Hi, I followed a tutorial to add recommended product pages to our site, but they're showing vertically:

 

https://taviandmina.com/collections/autumn/products/lavender-dinosaur-zip-front-romper

 

Here is the  product-recommendations/liquid code:

 

<div class="product-recommendations" data-product-id="{{ product.id }}" data-limit="4">
{%- if recommendations.products_count > 0 -%}
<h2>You may also like</h2>
<ul>
{%- for product in recommendations.products -%}
<li class="product">
<a href="{{ product.url }}">
<img class="product__img" src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.featured_image.alt }}" />
<p class="product__title">{{ product.title }}</p>
<p class="product__price">{{ product.price | money}}</p>
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
{% javascript %}
var loadProductRecommendationsIntoSection = function() {
// Look for an element with class 'product-recommendations'
var productRecommendationsSection = document.querySelector(".product-recommendations");
if (productRecommendationsSection === null) { return; }
// Read product id from data attribute
var productId = productRecommendationsSection.dataset.productId;
// Read limit from data attribute
var limit = productRecommendationsSection.dataset.limit;
// Build request URL
var requestUrl = "/recommendations/products?section_id=product-recommendations&limit="+limit+"&product_id="+productId;
// Create request and submit it using Ajax
var request = new XMLHttpRequest();
request.open("GET", requestUrl);
request.onload = function() {
if (request.status >= 200 && request.status < 300) {
var container = document.createElement("div");
container.innerHTML = request.response;
productRecommendationsSection.parentElement.innerHTML = container.querySelector(".product-recommendations").innerHTML;
}
};
request.send();
};
// If your section has theme settings, the theme editor
// reloads the section as you edit those settings. When that happens, the
// recommendations need to be fetched again.
// See https://help.shopify.com/en/themes/development/sections/integration-with-theme-editor
document.addEventListener("shopify:section:load", function(event) {
if (event.detail.sectionId === "product-recommendations") {
loadProductRecommendationsIntoSection();
}
});
// Fetching the recommendations on page load
loadProductRecommendationsIntoSection();
{% endjavascript %}

 

Any idea where I went wrong?

0 Likes

Success.

Explorer
51 6 21

Hey so this is happening because your recommended items are in a UL element or a unordered list element. You can change this by adding some CSS to your theme.scss.liquid file. Try this and let me know if it fixes your issue:

ul > .product{
	display: inline-block;
}

You should be able to just paste it to the bottom of your theme.scss.liquid file. Let me know if you have any issues!

0 Likes
Shopify Partner
1140 92 138

hi,@@

 

use this code solve the problem

 

ul li.product {
display:inline-block;
Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes