product.images shopify, product images shopify, get product image shopify, get product image in shopify, how to get product image in shopify, shopify get product images, shopify get product image, how to get product images in shopify, product image in shopify, shopify product images,

How to add single product on home page shopify with gallery

If you are facing issues during add single product on the home page in Shopify. Then you are on the right blog. You can do this to loop over product images. See the below example:-

{% for image in product.images %}
   <img src="{{ image.src | product_img_url: '500x' }}">
{% endfor %}

If you want to show the product with its gallery dynamically create a section in your Shopify store by using code editor.

Create a section

First you need to create a section and their settings. Please check below code:-

[PHP]

// Section code here

{% schema %}
{
“name”: “Blog Page”,
“settings”: [
{
“type”: “product”,
“id”: “singleproduct”,
“label”: “Single product”
}

]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

[/php]

Get the product info


<section class="ftco-section">
<div class="container">
        {%- assign sproduct = all_products[section.settings.singleproduct] -%}

<div class="row flex-column-reverse flex-lg-row justify-content-center">
<div class="col-lg-1 text-center">
<ul class="nav nav-tabs row text-center pro-details" id="myTab" role="tablist">
            	{% for image in sproduct.images limit:8 %}
                {% if forloop.index0 == 0 %}

<li class="nav-item col-lg-12 mb-2">
                    <img class="img-fluid active h-100" src="{{ image.src | product_img_url: '200x' }}" id="home-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="home" aria-selected="true">
                </li>
                {% else %}

<li class="nav-item col-lg-12 mb-2">
                    <img class="img-fluid h-100" id="profilesdsd" data-toggle="tab" href="#profile{{ forloop.index0 }}" role="tab" aria-controls="profile" aria-selected="false" src="{{ image.src | product_img_url: '200x' }}">
                </li>
                {% endif %}
                {% endfor %}

</ul></div>
<div class="col-lg-5 text-center border-right border-secondery p-50">
<div class="tab-content row h-100 d-flex justify-content-center" id="myTabContent">
            	{% for image in sproduct.images limit:8 %}
                {% if forloop.index0 == 0 %}

<div class="tab-pane fade show active col-lg-12" id="profile" role="tabpanel" aria-labelledby="home-tab">
                    <img class="img-fluid" src="{{ image.src | product_img_url: '500x' }}">
                </div>
                {% else %}

<div class="tab-pane fade col-lg-12" id="profile{{ forloop.index0 }}" role="tabpanel" aria-labelledby="profile-tab"><img src="{{ image.src | product_img_url: '500x' }}" /></div>
               {% endif %}
               {% endfor %}
</div>

</div>
<div class="col-lg-6 product-details pl-md-5 ftco-animate fadeInUp ftco-animated">
<h3><strong>{{ sproduct.title }}</strong></h3>
<div class="row">
<p class="col-lg-6 price"><span>{{ sproduct.price | money }}</span>

<div class=" col-lg-6 rating">
<p class="text-right m-0 p-0 text-dark">
								<span class="ion-ios-star-outline"></span>
								<span class="ion-ios-star-outline"></span>
								<span class="ion-ios-star-outline"></span>
								<span class="ion-ios-star-outline"></span>
								<span class="ion-ios-star-outline"></span>
							


</div>

</div>
<hr>
					<!-- Nav tabs -->

<ul class="nav nav-tabs pt-3">
<li class="nav-item">
						  <a class="nav-link active" data-toggle="tab" href="#discription">DESCRIPTION</a>
						</li>
<li class="nav-item">
						  <a class="nav-link" data-toggle="tab" href="#benifites">BENEFITS</a>
						</li>
</ul>
					<!-- Tab panes -->

<div class="tab-content pb-3">
<div id="discription" class="container tab-pane active">
{{ sproduct.description }}


</div>
<div id="benifites" class="container tab-pane fade">


						     {{ sproduct.metafields.global.benefits }}


</div>

</div>
<div class="row">
<div class="col-md-4 col-12 col-sm-5 col-lg-6 pt-3 "><a href="{{section.settings.watchvideo}}" class="btn btn-info py-3 px-5 btn-width" target="_blank" style="background-color:{{ section.settings.buttonback2 }};color:{{ section.settings.buttontextc2 }};border-color:{{ section.settings.buttonborder2 }};" rel="noopener noreferrer">WATCH VIDEO</a></div>
<div class="col-md-4 col-12 col-sm-5 col-lg-6 pt-3"><a href="#" style="background-color:{{ section.settings.buttonback3 }};color:{{ section.settings.buttontextc3 }};border-color:{{ section.settings.buttonborder3 }};" class="btn btn-primary py-3 px-5 btn-width">PRE-ORDER</a></div>

</div>

</div>

</div>

</div>
</section>

Your section is ready include it anywhere by using below code:-


{% section 'section name' %}

Post Created 40

Leave a Reply

Related Posts

Begin typing your search above and press enter to search. Press ESC to cancel.

Back To Top