Solved

What is the process for fetching a product link in Shopify?

zurain
Excursionist
24 0 5
plz help me i want to get product with its link waiting for answer 
 
<div class="container">
 
  <div class="row">
 
    <div class="col-lg-6">
 
    <img src="{{ section.settings.First_product | img_url:  '600x' }}"/>
 
    </div>
  
    <div class="col-lg-6">
    
      <div class="row">
      
        <div class="col-lg-6">
        
            <img src="{{ section.settings.second_product | img_url:  '600x' }}"/>
 
        
        </div>
      
      </div>    
    
    </div> 
 
  </div>
 
</div>
 
{% schema %}
  {
    "name": "Collection-Images-z",
    "settings": [
 
{
"type":"product",
"id":"First_product",
"label":"select product"
},
 
{
"type":"product",
"id":"second_product",
"label":"select product"
}
 
 
],
"presets": [
{
"name": "product_test",
"category": "ADVANCED LAYOUT"
}
]
 
  }
{% endschema %}
 
{% stylesheet %}
{% endstylesheet %}
 
{% javascript %}
{% endjavascript %}

 

Accepted Solution (1)

Developer-G
Shopify Partner
3033 593 846

This is an accepted solution.

Hello @zurain ,

Replace your code with this one.

<div class="container">
 
  <div class="row">
 
    <div class="col-lg-6">
 <a href="{{ section.settings.First_product_url }}">
    <img src="{{ section.settings.First_product | img_url:  '600x' }}"/>
 </a>
    </div>
  
    <div class="col-lg-6">
    
      <div class="row">
      
        <div class="col-lg-6">
         <a href="{{ section.second_product_url }}">
            <img src="{{ section.settings.second_product | img_url:  '600x' }}"/>
 </a>
        
        </div>
      
      </div>    
    
    </div> 
 
  </div>
 
</div>
 
{% schema %}
  {
    "name": "Collection-Images-z",
    "settings": [
 
{
"type":"product",
"id":"First_product",
"label":"select product"
},
 {
"type":"url",
"id":"First_product_url",
"label":"First product url"
},
{
"type":"product",
"id":"second_product",
"label":"select product"
},
{
"type":"url",
"id":"second_product_url",
"label":"Second product url"
}
 
 
],
"presets": [
{
"name": "product_test",
"category": "ADVANCED LAYOUT"
}
]
 
  }
{% endschema %}
 
{% stylesheet %}
{% endstylesheet %}
 
{% javascript %}
{% endjavascript %}

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 5 (5)

Developer-G
Shopify Partner
3033 593 846

This is an accepted solution.

Hello @zurain ,

Replace your code with this one.

<div class="container">
 
  <div class="row">
 
    <div class="col-lg-6">
 <a href="{{ section.settings.First_product_url }}">
    <img src="{{ section.settings.First_product | img_url:  '600x' }}"/>
 </a>
    </div>
  
    <div class="col-lg-6">
    
      <div class="row">
      
        <div class="col-lg-6">
         <a href="{{ section.second_product_url }}">
            <img src="{{ section.settings.second_product | img_url:  '600x' }}"/>
 </a>
        
        </div>
      
      </div>    
    
    </div> 
 
  </div>
 
</div>
 
{% schema %}
  {
    "name": "Collection-Images-z",
    "settings": [
 
{
"type":"product",
"id":"First_product",
"label":"select product"
},
 {
"type":"url",
"id":"First_product_url",
"label":"First product url"
},
{
"type":"product",
"id":"second_product",
"label":"select product"
},
{
"type":"url",
"id":"second_product_url",
"label":"Second product url"
}
 
 
],
"presets": [
{
"name": "product_test",
"category": "ADVANCED LAYOUT"
}
]
 
  }
{% endschema %}
 
{% stylesheet %}
{% endstylesheet %}
 
{% javascript %}
{% endjavascript %}

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
zurain
Excursionist
24 0 5

no you dont understand its not collection image its product image when someone click on it it will go to single product page or if someone click on cart button he/she will go to cart page i need product image with auto get its link like a loop 

zurain
Excursionist
24 0 5
check this i want these settings in loop in blocks
 
<div class="container">
 
  <div class="row">
 
    <div class="col-lg-6">
       
   
{%- assign product = all_products[section.settings.First_product] -%}
      {%- assign product = all_products[section.settings.second_product] -%}
         {%- assign product = all_products[section.settings.third_product] -%}
      {%- assign product = all_products[section.settings.Fourth_product] -%}
            {%- assign product = all_products[section.settings.Fifth_product] -%}
 
<a href="{{ product.url}}">
    
    <img class="home_img" src="{{ section.settings.First_product | img_url:  '1024x' }}"/>
     
    </a>
                <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input class="inputcart" min="1" max="" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn crt" />
</form>
    </div>
  
    <div class="col-lg-6">
    
      <div class="row">
      
        <div class="col-lg-6">
        <a href="{{ product.url}}">
            <img src="{{ section.settings.second_product | img_url:  '600x' }}"/>
 
        </a>
          
                 <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input class="inputcart" min="1" max="" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn crt" />
</form>
        </div>
        
        
            <div class="col-lg-6">
        <a href="{{ product.url}}">
            <img src="{{ section.settings.third_product | img_url:  '600x' }}"/>
 
        </a>
          
                 <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input class="inputcart" min="1" max="" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn crt" />
</form>
        </div>
        
        
              <div class="col-lg-6">
        <a href="{{ product.url}}">
            <img src="{{ section.settings.Fourth_product | img_url:  '600x' }}"/>
 
        </a>
          
                 <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input class="inputcart" min="1" max="" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn crt" />
</form>
        </div>
      
              <div class="col-lg-6">
        <a href="{{ product.url}}">
            <img src="{{ section.settings.Fifth_product | img_url:  '600x' }}"/>
 
        </a>
          
                 <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input class="inputcart" min="1" max="" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn crt" />
</form>
        </div>
      
      </div>
    
    
    </div> 
    
    
    
  </div>
 
</div>
 
{% schema %}
  {
    "name": "Collection-Images-z",
    "settings": [
 
{
"type":"product",
"id":"First_product",
"label":"First product"
},
 
{
"type":"product",
"id":"second_product",
"label":"second product"
},
 
{
"type":"product",
"id":"third_product",
"label":"third product"
},
 
 
{
"type":"product",
"id":"Fourth_product",
"label":"Fourth product"
},
 
{
"type":"product",
"id":"Fifth_product",
"label":"Fifth product"
}
],
"presets": [
{
"name": "product_test",
"category": "ADVANCED LAYOUT"
}
]
 
  }
{% endschema %}
 
{% stylesheet %}
{% endstylesheet %}
 
{% javascript %}
{% endjavascript %}
<style>
  img.home_img {
    height: 776.5px;
}
</style>
Developer-G
Shopify Partner
3033 593 846

@zurain  You asked for hyperlink in image and I provided an option in code through which you can link your image either to collection or product single.
Seems you are not clear what you need I suggest post your requirement to shopify expert or some job portals.
Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
zurain
Excursionist
24 0 5

@Developer-G 

ok listen plz i need these below settings in block settings or in loop plz check this code

<div class="container">
 
  <div class="row">
 
    <div class="col-lg-6">
       
   
{%- assign product = all_products[section.settings.First_product] -%}
      {%- assign product = all_products[section.settings.second_product] -%}
         {%- assign product = all_products[section.settings.third_product] -%}
      {%- assign product = all_products[section.settings.Fourth_product] -%}
            {%- assign product = all_products[section.settings.Fifth_product] -%}
 
<a href="{{ product.url}}">
    
    <img class="home_img" src="{{ section.settings.First_product | img_url:  '1024x' }}"/>
     
    </a>
                <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input class="inputcart" min="1" max="" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn crt" />
</form>
    </div>
  
    <div class="col-lg-6">
    
      <div class="row">
      
        <div class="col-lg-6">
        <a href="{{ product.url}}">
            <img src="{{ section.settings.second_product | img_url:  '600x' }}"/>
 
        </a>
          
                 <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input class="inputcart" min="1" max="" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn crt" />
</form>
        </div>
        
        
            <div class="col-lg-6">
        <a href="{{ product.url}}">
            <img src="{{ section.settings.third_product | img_url:  '600x' }}"/>
 
        </a>
          
                 <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input class="inputcart" min="1" max="" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn crt" />
</form>
        </div>
        
        
              <div class="col-lg-6">
        <a href="{{ product.url}}">
            <img src="{{ section.settings.Fourth_product | img_url:  '600x' }}"/>
 
        </a>
          
                 <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input class="inputcart" min="1" max="" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn crt" />
</form>
        </div>
      
              <div class="col-lg-6">
        <a href="{{ product.url}}">
            <img src="{{ section.settings.Fifth_product | img_url:  '600x' }}"/>
 
        </a>
          
                 <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input class="inputcart" min="1" max="" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn crt" />
</form>
        </div>
      
      </div>
    
    
    </div> 
    
    
    
  </div>
 
</div>
 
{% schema %}
  {
    "name": "Collection-Images-z",
    "settings": [
 
{
"type":"product",
"id":"First_product",
"label":"First product"
},
 
{
"type":"product",
"id":"second_product",
"label":"second product"
},
 
{
"type":"product",
"id":"third_product",
"label":"third product"
},
 
 
{
"type":"product",
"id":"Fourth_product",
"label":"Fourth product"
},
 
{
"type":"product",
"id":"Fifth_product",
"label":"Fifth product"
}
],
"presets": [
{
"name": "product_test",
"category": "ADVANCED LAYOUT"
}
]
 
  }
{% endschema %}
 
{% stylesheet %}
{% endstylesheet %}
 
{% javascript %}
{% endjavascript %}
<style>
  img.home_img {
    height: 776.5px;
}
</style>