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 %}
   





{% 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 %}

Get the product info

	

      

        {%- assign sproduct = all_products[section.settings.singleproduct] -%}
    		

    			

            

            	{% for image in sproduct.images limit:8 %}
                {% if forloop.index0 == 0 %}
                

                    
                
                {% else %}
                

                    
                
                {% endif %}  
                {% endfor %}

            
        
        

            

            	{% for image in sproduct.images limit:8 %}
                {% if forloop.index0 == 0 %}
                

                    





                
                {% else %}
                 





                
               {% endif %}  
               {% endfor %}
           
            
        
    			

                  
    				
{{ sproduct.title }}
					

						
{{ sproduct.price | money }}
						

							

								
								
								
								
								
							
						
					
					
					


					
				

						

						  DESCRIPTION
						
						

						  BENEFITS
						
					  

					
					  

						

						  
{{ sproduct.description }}
						
						


						  

						     {{ sproduct.metafields.global.benefits }}


						
						
					  
                    
                    

                        
WATCH VIDEO
					
PRE-ORDER
                    
					
					
    			
    		
    	
    

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

{% section 'section name' %}

Please follow and like us: