Solved

Show collections side by side on home page

superboyevan
Tourist
7 0 2

Hi all,

Checking to see if anyone can help me find a solution for what I'm after.

Currently I have liquid displaying a collection on the left and product on the right. However I would like to have Collection A on the left and Collection B on the right.

It's currently in a grid arraignment which is working, however each time I try to duplicate the first Collection, save then go back to the Shopify visual editor to select a Collection it renders in both left and right of the grid.

The liquid code section is below:

 

{% liquid
  assign product = all_products[section.settings.product]
  assign contrast = section.settings.enable_contrast
  assign full_width = section.settings.enable_full_width
  assign current_variant = product.selected_or_first_available_variant
  assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media
  assign collection = collections[section.settings.collection]
  assign image_object = collection.image | default: collection.products.first.featured_media.preview_image
%}


<section
  data-section-id="{{ section.id }}"
  data-section-type="collection-product"
  class="
    featured-product
    {% if contrast %}contrast{% endif %}
    {% if full_width %}full-width{% endif %}
  "
>
  <div class="grid" style="width:100%;margin:0;">
  <div class="grid__item grid__item--2 cp__col cp__collectionBlock">
    <div class="cp__col_inner">
      {%- assign image_id = collection.image.id | default: collection.products.first.featured_media.id -%}

      <a href="{{ collection.url }}" class="hover">
        {% render 'image' with
        image: image_object,
        id: image_id,
        wrapper_class: 'product-item__image'
        %}
      </a>
      <div class="cp__overlay_text">
        <h3>{{ collection.title }}</h3>
        <a class="btn btn--primary" href="{{ collection.url }}">{{ section.settings.button }}</a>
      </div>
    </div>  
  </div>
  <div class="grid__item grid__item--2 cp__col cp__productBlock">
  {% render 'custom-product-item', product: product %}
  </div>
  </div>
</section>

{% schema %}
  {
    "name": "Collection product",
    "class": "grid-section",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      },
      {
        "type": "text",
        "id": "button",
        "label": "Button text",
        "default": "Shop the collection"
      },
      {
        "type": "product",
        "id": "product",
        "label": "Product"
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_swatches",
        "label": "Show swatches",
        "info": "Add swatch image files to your store's [files area](/admin/settings/files). Make sure the file names match the names of your color variants. For example, a variant called Blue would need a file called 'blue.png'",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons"
      },
      {
        "type": "checkbox",
        "id": "show_quantity_input",
        "label": "Show quantity input",
        "info": "If quantity inputs are hidden, quantities will default to 1.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "default": true
      },
      {
        "type": "header",
        "content": "Style"
      },
      {
        "id": "enable_contrast",
        "type": "checkbox",
        "label": "Enable contrast",
        "info": "Configure Contrast section colors in Theme settings",
        "default": false
      },
      {
        "id": "enable_full_width",
        "type": "checkbox",
        "label": "Enable full width",
        "info": "If enabled this section will span the entire width of the window",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Featured Collection and Product",
        "category": "Custom"
      }
    ]
  }
{% endschema %}

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{ product.title | escape }}",
  "url": "{{ shop.url }}{{ product.url }}",
  {% if product.featured_image %}
    {% assign image_size = product.featured_image.width | append: 'x' %}
    "image": [
      "https:{{ product.featured_image.src | img_url: image_size }}"
    ],
  {% endif %}
  "description": "{{ product.description | strip_html | escape }}",
  {% if current_variant.sku != blank %}
    "sku": "{{ current_variant.sku }}",
  {% endif %}
  "brand": {
    "@type": "Thing",
    "name": "{{ product.vendor | escape }}"
  },
  {% if product.variants %}
    "offers": [
      {% for variant in product.variants %}
        {
          "@type" : "Offer",
          "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
          "price" : "{{ variant.price | divided_by: 100.00 }}",
          "priceCurrency" : "{{ shop.currency }}",
          "url" : "{{ shop.url }}{{ variant.url }}",
          "itemOffered" :
          {
              "@type" : "Product",
              {% if variant.image %}
                {% assign variant_image_size = variant.image.width | append: 'x' %}
                "image": "http:{{ variant.image.src | img_url: variant_image_size }}",
              {% endif %}
              {% if variant.title != blank %}
                "name" : "{{ variant.title | escape }}",
              {% endif %}
              {% if variant.sku != blank %}
                "sku": "{{ variant.sku }}",
              {% endif %}
              {% if variant.weight != blank %}
                "weight": {
                  "@type": "QuantitativeValue",
                  {% if variant.weight_unit != blank %}
                    "unitCode": "{{ variant.weight_unit }}",
                  {% endif %}
                  "value": "{{ variant.weight | weight_with_unit: variant.weight_unit }}"
                },
              {% endif %}
              "url": "{{ shop.url }}{{ variant.url }}"
          }
        }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  {% endif %}
}
</script>

 

Many thanks in advance for any solutions/help.

Thanks,

Evan

Accepted Solution (1)
LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @superboyevan,

Please change code:

{% liquid
  assign product = all_products[section.settings.product]
  assign contrast = section.settings.enable_contrast
  assign full_width = section.settings.enable_full_width
  assign current_variant = product.selected_or_first_available_variant
  assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media
  assign collection = collections[section.settings.collection]
  assign image_object = collection.image | default: collection.products.first.featured_media.preview_image
  assign collection_2 = collections[section.settings.collection_2]
  assign image_object_2 = collection_2.image | default: collection_2.products.first.featured_media.preview_image
  assign settings = section.settings
%}


<section
  data-section-id="{{ section.id }}"
  data-section-type="collection-product"
  class="
    featured-product
    featured-product-{{ section.id }} 
    {% if contrast %}contrast{% endif %}
    {% if full_width %}full-width{% endif %}
  "
>
  <div class="grid" style="width:100%;margin:0;">
  <div class="grid__item grid__item--2 cp__col cp__collectionBlock">
    <div class="cp__col_inner">
      {%- assign image_id = collection.image.id | default: collection.products.first.featured_media.id -%}

      <a href="{{ collection.url }}" class="hover">
        {% render 'image' with
        image: image_object,
        id: image_id,
        wrapper_class: 'product-item__image'
        %}
      </a>
      <div class="cp__overlay_text">
        <h3>{{ collection.title }}</h3>
        <a class="btn btn--primary" href="{{ collection.url }}">{{ section.settings.button }}</a>
      </div>
    </div>  
  </div>
  <div class="grid__item grid__item--2 cp__col cp__collectionBlock">
    <div class="cp__col_inner">
      {%- assign image_id = collection_2.image.id | default: collection_2.products.first.featured_media.id -%}

      <a href="{{ collection_2.url }}" class="hover">
        {% render 'image' with
        image: image_object_2,
        id: image_id,
        wrapper_class: 'product-item__image'
        %}
      </a>
      <div class="cp__overlay_text">
        <h3>{{ collection_2.title }}</h3>
        <a class="btn btn--primary" href="{{ collection_2.url }}">{{ section.settings.button }}</a>
      </div>
    </div>  
  </div>
  </div>
</section>
{% style %}
  .featured-product-{{ section.id }} h3{
	color: {{ section.settings.color_heading }} !important;
  }
  .featured-product-{{ section.id }} .btn{
	color: {{ section.settings.color_text_button }} !important;
    background-color: {{ section.settings.color_background_button }} !important;
  }
{% endstyle %}
{% schema %}
  {
    "name": "Collection product",
    "class": "grid-section",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection Left"
      },
	  {
        "type": "collection",
        "id": "collection_2",
        "label": "Collection Right"
      },
      {
        "id": "color_heading",
        "type": "color",
        "label": "Heading",
        "default": "#ffffff"
      },
	  {
        "id": "color_text_button",
        "type": "color",
        "label": "Button text",
        "default": "#ffffff"
      },
 	  { 
		"id": "color_background_button",
        "type": "color",
        "label": "Button Background",
        "default": "#000000"
      },
      {
        "type": "text",
        "id": "button",
        "label": "Button text",
        "default": "Shop the collection"
      },
      {
        "type": "product",
        "id": "product",
        "label": "Product"
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_swatches",
        "label": "Show swatches",
        "info": "Add swatch image files to your store's [files area](/admin/settings/files). Make sure the file names match the names of your color variants. For example, a variant called Blue would need a file called 'blue.png'",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons"
      },
      {
        "type": "checkbox",
        "id": "show_quantity_input",
        "label": "Show quantity input",
        "info": "If quantity inputs are hidden, quantities will default to 1.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "default": true
      },
      {
        "type": "header",
        "content": "Style"
      },
      {
        "id": "enable_contrast",
        "type": "checkbox",
        "label": "Enable contrast",
        "info": "Configure Contrast section colors in Theme settings",
        "default": false
      },
      {
        "id": "enable_full_width",
        "type": "checkbox",
        "label": "Enable full width",
        "info": "If enabled this section will span the entire width of the window",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Featured Collection v2",
        "category": "Custom"
      }
    ]
  }
{% endschema %}

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{ product.title | escape }}",
  "url": "{{ shop.url }}{{ product.url }}",
  {% if product.featured_image %}
    {% assign image_size = product.featured_image.width | append: 'x' %}
    "image": [
      "https:{{ product.featured_image.src | img_url: image_size }}"
    ],
  {% endif %}
  "description": "{{ product.description | strip_html | escape }}",
  {% if current_variant.sku != blank %}
    "sku": "{{ current_variant.sku }}",
  {% endif %}
  "brand": {
    "@type": "Thing",
    "name": "{{ product.vendor | escape }}"
  },
  {% if product.variants %}
    "offers": [
      {% for variant in product.variants %}
        {
          "@type" : "Offer",
          "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
          "price" : "{{ variant.price | divided_by: 100.00 }}",
          "priceCurrency" : "{{ shop.currency }}",
          "url" : "{{ shop.url }}{{ variant.url }}",
          "itemOffered" :
          {
              "@type" : "Product",
              {% if variant.image %}
                {% assign variant_image_size = variant.image.width | append: 'x' %}
                "image": "http:{{ variant.image.src | img_url: variant_image_size }}",
              {% endif %}
              {% if variant.title != blank %}
                "name" : "{{ variant.title | escape }}",
              {% endif %}
              {% if variant.sku != blank %}
                "sku": "{{ variant.sku }}",
              {% endif %}
              {% if variant.weight != blank %}
                "weight": {
                  "@type": "QuantitativeValue",
                  {% if variant.weight_unit != blank %}
                    "unitCode": "{{ variant.weight_unit }}",
                  {% endif %}
                  "value": "{{ variant.weight | weight_with_unit: variant.weight_unit }}"
                },
              {% endif %}
              "url": "{{ shop.url }}{{ variant.url }}"
          }
        }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  {% endif %}
}
</script>

Hope it is clear to you.

 

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 7 (7)

LitCommerce
Astronaut
2860 684 732

Hi @superboyevan,

Please change code:

{% liquid
  assign product = all_products[section.settings.product]
  assign contrast = section.settings.enable_contrast
  assign full_width = section.settings.enable_full_width
  assign current_variant = product.selected_or_first_available_variant
  assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media
  assign collection = collections[section.settings.collection]
  assign image_object = collection.image | default: collection.products.first.featured_media.preview_image
  assign collection_2 = collections[section.settings.collection_2]
  assign image_object_2 = collection_2.image | default: collection_2.products.first.featured_media.preview_image
%}


<section
  data-section-id="{{ section.id }}"
  data-section-type="collection-product"
  class="
    featured-product
    {% if contrast %}contrast{% endif %}
    {% if full_width %}full-width{% endif %}
  "
>
  <div class="grid" style="width:100%;margin:0;">
  <div class="grid__item grid__item--2 cp__col cp__collectionBlock">
    <div class="cp__col_inner">
      {%- assign image_id = collection.image.id | default: collection.products.first.featured_media.id -%}

      <a href="{{ collection.url }}" class="hover">
        {% render 'image' with
        image: image_object,
        id: image_id,
        wrapper_class: 'product-item__image'
        %}
      </a>
      <div class="cp__overlay_text">
        <h3>{{ collection.title }}</h3>
        <a class="btn btn--primary" href="{{ collection.url }}">{{ section.settings.button }}</a>
      </div>
    </div>  
  </div>
  <div class="grid__item grid__item--2 cp__col cp__collectionBlock">
    <div class="cp__col_inner">
      {%- assign image_id = collection_2.image.id | default: collection_2.products.first.featured_media.id -%}

      <a href="{{ collection_2.url }}" class="hover">
        {% render 'image' with
        image: image_object_2,
        id: image_id,
        wrapper_class: 'product-item__image'
        %}
      </a>
      <div class="cp__overlay_text">
        <h3>{{ collection_2.title }}</h3>
        <a class="btn btn--primary" href="{{ collection_2.url }}">{{ section.settings.button }}</a>
      </div>
    </div>  
  </div>
  </div>
</section>

{% schema %}
  {
    "name": "Collection product",
    "class": "grid-section",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection Left"
      },
	  {
        "type": "collection",
        "id": "collection_2",
        "label": "Collection Right"
      },
      {
        "type": "text",
        "id": "button",
        "label": "Button text",
        "default": "Shop the collection"
      },
      {
        "type": "product",
        "id": "product",
        "label": "Product"
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_swatches",
        "label": "Show swatches",
        "info": "Add swatch image files to your store's [files area](/admin/settings/files). Make sure the file names match the names of your color variants. For example, a variant called Blue would need a file called 'blue.png'",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons"
      },
      {
        "type": "checkbox",
        "id": "show_quantity_input",
        "label": "Show quantity input",
        "info": "If quantity inputs are hidden, quantities will default to 1.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "default": true
      },
      {
        "type": "header",
        "content": "Style"
      },
      {
        "id": "enable_contrast",
        "type": "checkbox",
        "label": "Enable contrast",
        "info": "Configure Contrast section colors in Theme settings",
        "default": false
      },
      {
        "id": "enable_full_width",
        "type": "checkbox",
        "label": "Enable full width",
        "info": "If enabled this section will span the entire width of the window",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Featured Collection and Product",
        "category": "Custom"
      }
    ]
  }
{% endschema %}

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{ product.title | escape }}",
  "url": "{{ shop.url }}{{ product.url }}",
  {% if product.featured_image %}
    {% assign image_size = product.featured_image.width | append: 'x' %}
    "image": [
      "https:{{ product.featured_image.src | img_url: image_size }}"
    ],
  {% endif %}
  "description": "{{ product.description | strip_html | escape }}",
  {% if current_variant.sku != blank %}
    "sku": "{{ current_variant.sku }}",
  {% endif %}
  "brand": {
    "@type": "Thing",
    "name": "{{ product.vendor | escape }}"
  },
  {% if product.variants %}
    "offers": [
      {% for variant in product.variants %}
        {
          "@type" : "Offer",
          "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
          "price" : "{{ variant.price | divided_by: 100.00 }}",
          "priceCurrency" : "{{ shop.currency }}",
          "url" : "{{ shop.url }}{{ variant.url }}",
          "itemOffered" :
          {
              "@type" : "Product",
              {% if variant.image %}
                {% assign variant_image_size = variant.image.width | append: 'x' %}
                "image": "http:{{ variant.image.src | img_url: variant_image_size }}",
              {% endif %}
              {% if variant.title != blank %}
                "name" : "{{ variant.title | escape }}",
              {% endif %}
              {% if variant.sku != blank %}
                "sku": "{{ variant.sku }}",
              {% endif %}
              {% if variant.weight != blank %}
                "weight": {
                  "@type": "QuantitativeValue",
                  {% if variant.weight_unit != blank %}
                    "unitCode": "{{ variant.weight_unit }}",
                  {% endif %}
                  "value": "{{ variant.weight | weight_with_unit: variant.weight_unit }}"
                },
              {% endif %}
              "url": "{{ shop.url }}{{ variant.url }}"
          }
        }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  {% endif %}
}
</script>

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
superboyevan
Tourist
7 0 2

Hi LitCommerce,

 

Thanks so much for that! It works!

 

Is there any way of being able to adjust the color of the heading/button/button text in the visual editor?

 

I've tried adding assign settings to the liquid section

 

{% liquid
 assign settings = section.settings
}%

 

and this code to the section

 

{% render 'image' with
color_background: settings.color_overlay,
color_background_button: settings.color_background_button,
color_heading: settings.color_heading,
color_text_button: settings.color_text_button

}%

 

and adding this next part to the schema 

{ "id": "color_overlay",
        "type": "color",
        "label": "Overlay",
        "default": "#000000"
      },
      {
        "id": "color_heading",
        "type": "color",
        "label": "Heading",
        "default": "#ffffff"
      },
	  {
        "id": "color_text_button",
        "type": "color",
        "label": "Button text",
        "default": "#ffffff"
      },
{
        "id": "color_background_button",
        "type": "color",
        "label": "Button text",
        "default": "#ffffff"
      },
}

 

I can see this in the visual editor however when I change the color and save. Nothing happens. It's seems I've missed something to link the color values to the text?

 

Have I missed something?

 

Thanks in advance.

 

Cheers,

 

Evan

 

LitCommerce
Astronaut
2860 684 732

Hi @superboyevan,

I checked and the code you added is incorrect. 

The image file must have a declaration of color variables, so you can pass it at render. https://i.imgur.com/0iSIDKn.png

So can you send me the code of the image, I will check it.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
superboyevan
Tourist
7 0 2

Hi LitCommerce,

 

I had a feeling what I did was incorrect. I'm still learning html/liquid.

 

If you could take a look at the code that would be great!

 

{% liquid
  assign product = all_products[section.settings.product]
  assign contrast = section.settings.enable_contrast
  assign full_width = section.settings.enable_full_width
  assign current_variant = product.selected_or_first_available_variant
  assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media
  assign collection = collections[section.settings.collection]
  assign image_object = collection.image | default: collection.products.first.featured_media.preview_image
  assign collection_2 = collections[section.settings.collection_2]
  assign image_object_2 = collection_2.image | default: collection_2.products.first.featured_media.preview_image
  assign settings = section.settings
%}


<section
  data-section-id="{{ section.id }}"
  data-section-type="collection-product"
  class="
    featured-product
    {% if contrast %}contrast{% endif %}
    {% if full_width %}full-width{% endif %}
  "
>
  <div class="grid" style="width:100%;margin:0;">
  <div class="grid__item grid__item--2 cp__col cp__collectionBlock">
    <div class="cp__col_inner">
      {%- assign image_id = collection.image.id | default: collection.products.first.featured_media.id -%}

      <a href="{{ collection.url }}" class="hover">
        {% render 'image' with
        image: image_object,
        id: image_id,
        wrapper_class: 'product-item__image',
        color_background: settings.color_overlay,
        color_background_button: settings.color_background_button,
        color_heading: settings.color_heading,
        color_subheading: settings.color_subheading,
        color_text_button: settings.color_text_button
        color_background_button: settings.color_background_button,
               
        
        %}
      </a>
      <div class="cp__overlay_text">
        <h3>{{ collection.title }}</h3>
        <a class="btn btn--primary" href="{{ collection.url }}">{{ section.settings.button }}</a>
      </div>
    </div>  
  </div>
  <div class="grid__item grid__item--2 cp__col cp__collectionBlock">
    <div class="cp__col_inner">
      {%- assign image_id = collection_2.image.id | default: collection_2.products.first.featured_media.id -%}

      <a href="{{ collection_2.url }}" class="hover">
        {% render 'image' with
        image: image_object_2,
        id: image_id,
        wrapper_class: 'product-item__image'
        %}
      </a>
      <div class="cp__overlay_text">
        <h3>{{ collection_2.title }}</h3>
        <a class="btn btn--primary" href="{{ collection_2.url }}">{{ section.settings.button }}</a>
      </div>
    </div>  
  </div>
  </div>
</section>

{% schema %}
  {
    "name": "Collection product",
    "class": "grid-section",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection Left"
      },
	  {
        "type": "collection",
        "id": "collection_2",
        "label": "Collection Right"
      },
 	  { "id": "color_overlay",
        "type": "color",
        "label": "Overlay",
        "default": "#000000"
      },
      {
        "id": "color_heading",
        "type": "color",
        "label": "Heading",
        "default": "#ffffff"
      },
	  {
        "id": "color_text_button",
        "type": "color",
        "label": "Button text",
        "default": "#ffffff"
      },

      {
        "type": "text",
        "id": "button",
        "label": "Button text",
        "default": "Shop the collection"
      },
      {
        "type": "product",
        "id": "product",
        "label": "Product"
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_swatches",
        "label": "Show swatches",
        "info": "Add swatch image files to your store's [files area](/admin/settings/files). Make sure the file names match the names of your color variants. For example, a variant called Blue would need a file called 'blue.png'",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons"
      },
      {
        "type": "checkbox",
        "id": "show_quantity_input",
        "label": "Show quantity input",
        "info": "If quantity inputs are hidden, quantities will default to 1.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "default": true
      },
      {
        "type": "header",
        "content": "Style"
      },
      {
        "id": "enable_contrast",
        "type": "checkbox",
        "label": "Enable contrast",
        "info": "Configure Contrast section colors in Theme settings",
        "default": false
      },
      {
        "id": "enable_full_width",
        "type": "checkbox",
        "label": "Enable full width",
        "info": "If enabled this section will span the entire width of the window",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Featured Collection v2",
        "category": "Custom"
      }
    ]
  }
{% endschema %}

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{ product.title | escape }}",
  "url": "{{ shop.url }}{{ product.url }}",
  {% if product.featured_image %}
    {% assign image_size = product.featured_image.width | append: 'x' %}
    "image": [
      "https:{{ product.featured_image.src | img_url: image_size }}"
    ],
  {% endif %}
  "description": "{{ product.description | strip_html | escape }}",
  {% if current_variant.sku != blank %}
    "sku": "{{ current_variant.sku }}",
  {% endif %}
  "brand": {
    "@type": "Thing",
    "name": "{{ product.vendor | escape }}"
  },
  {% if product.variants %}
    "offers": [
      {% for variant in product.variants %}
        {
          "@type" : "Offer",
          "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
          "price" : "{{ variant.price | divided_by: 100.00 }}",
          "priceCurrency" : "{{ shop.currency }}",
          "url" : "{{ shop.url }}{{ variant.url }}",
          "itemOffered" :
          {
              "@type" : "Product",
              {% if variant.image %}
                {% assign variant_image_size = variant.image.width | append: 'x' %}
                "image": "http:{{ variant.image.src | img_url: variant_image_size }}",
              {% endif %}
              {% if variant.title != blank %}
                "name" : "{{ variant.title | escape }}",
              {% endif %}
              {% if variant.sku != blank %}
                "sku": "{{ variant.sku }}",
              {% endif %}
              {% if variant.weight != blank %}
                "weight": {
                  "@type": "QuantitativeValue",
                  {% if variant.weight_unit != blank %}
                    "unitCode": "{{ variant.weight_unit }}",
                  {% endif %}
                  "value": "{{ variant.weight | weight_with_unit: variant.weight_unit }}"
                },
              {% endif %}
              "url": "{{ shop.url }}{{ variant.url }}"
          }
        }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  {% endif %}
}
</script>

 

Much appreciate your help in advance.

 

Kind regards,

 

Evan

 

LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @superboyevan,

Please change code:

{% liquid
  assign product = all_products[section.settings.product]
  assign contrast = section.settings.enable_contrast
  assign full_width = section.settings.enable_full_width
  assign current_variant = product.selected_or_first_available_variant
  assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media
  assign collection = collections[section.settings.collection]
  assign image_object = collection.image | default: collection.products.first.featured_media.preview_image
  assign collection_2 = collections[section.settings.collection_2]
  assign image_object_2 = collection_2.image | default: collection_2.products.first.featured_media.preview_image
  assign settings = section.settings
%}


<section
  data-section-id="{{ section.id }}"
  data-section-type="collection-product"
  class="
    featured-product
    featured-product-{{ section.id }} 
    {% if contrast %}contrast{% endif %}
    {% if full_width %}full-width{% endif %}
  "
>
  <div class="grid" style="width:100%;margin:0;">
  <div class="grid__item grid__item--2 cp__col cp__collectionBlock">
    <div class="cp__col_inner">
      {%- assign image_id = collection.image.id | default: collection.products.first.featured_media.id -%}

      <a href="{{ collection.url }}" class="hover">
        {% render 'image' with
        image: image_object,
        id: image_id,
        wrapper_class: 'product-item__image'
        %}
      </a>
      <div class="cp__overlay_text">
        <h3>{{ collection.title }}</h3>
        <a class="btn btn--primary" href="{{ collection.url }}">{{ section.settings.button }}</a>
      </div>
    </div>  
  </div>
  <div class="grid__item grid__item--2 cp__col cp__collectionBlock">
    <div class="cp__col_inner">
      {%- assign image_id = collection_2.image.id | default: collection_2.products.first.featured_media.id -%}

      <a href="{{ collection_2.url }}" class="hover">
        {% render 'image' with
        image: image_object_2,
        id: image_id,
        wrapper_class: 'product-item__image'
        %}
      </a>
      <div class="cp__overlay_text">
        <h3>{{ collection_2.title }}</h3>
        <a class="btn btn--primary" href="{{ collection_2.url }}">{{ section.settings.button }}</a>
      </div>
    </div>  
  </div>
  </div>
</section>
{% style %}
  .featured-product-{{ section.id }} h3{
	color: {{ section.settings.color_heading }} !important;
  }
  .featured-product-{{ section.id }} .btn{
	color: {{ section.settings.color_text_button }} !important;
    background-color: {{ section.settings.color_background_button }} !important;
  }
{% endstyle %}
{% schema %}
  {
    "name": "Collection product",
    "class": "grid-section",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection Left"
      },
	  {
        "type": "collection",
        "id": "collection_2",
        "label": "Collection Right"
      },
      {
        "id": "color_heading",
        "type": "color",
        "label": "Heading",
        "default": "#ffffff"
      },
	  {
        "id": "color_text_button",
        "type": "color",
        "label": "Button text",
        "default": "#ffffff"
      },
 	  { 
		"id": "color_background_button",
        "type": "color",
        "label": "Button Background",
        "default": "#000000"
      },
      {
        "type": "text",
        "id": "button",
        "label": "Button text",
        "default": "Shop the collection"
      },
      {
        "type": "product",
        "id": "product",
        "label": "Product"
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_swatches",
        "label": "Show swatches",
        "info": "Add swatch image files to your store's [files area](/admin/settings/files). Make sure the file names match the names of your color variants. For example, a variant called Blue would need a file called 'blue.png'",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons"
      },
      {
        "type": "checkbox",
        "id": "show_quantity_input",
        "label": "Show quantity input",
        "info": "If quantity inputs are hidden, quantities will default to 1.",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "default": true
      },
      {
        "type": "header",
        "content": "Style"
      },
      {
        "id": "enable_contrast",
        "type": "checkbox",
        "label": "Enable contrast",
        "info": "Configure Contrast section colors in Theme settings",
        "default": false
      },
      {
        "id": "enable_full_width",
        "type": "checkbox",
        "label": "Enable full width",
        "info": "If enabled this section will span the entire width of the window",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Featured Collection v2",
        "category": "Custom"
      }
    ]
  }
{% endschema %}

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{ product.title | escape }}",
  "url": "{{ shop.url }}{{ product.url }}",
  {% if product.featured_image %}
    {% assign image_size = product.featured_image.width | append: 'x' %}
    "image": [
      "https:{{ product.featured_image.src | img_url: image_size }}"
    ],
  {% endif %}
  "description": "{{ product.description | strip_html | escape }}",
  {% if current_variant.sku != blank %}
    "sku": "{{ current_variant.sku }}",
  {% endif %}
  "brand": {
    "@type": "Thing",
    "name": "{{ product.vendor | escape }}"
  },
  {% if product.variants %}
    "offers": [
      {% for variant in product.variants %}
        {
          "@type" : "Offer",
          "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
          "price" : "{{ variant.price | divided_by: 100.00 }}",
          "priceCurrency" : "{{ shop.currency }}",
          "url" : "{{ shop.url }}{{ variant.url }}",
          "itemOffered" :
          {
              "@type" : "Product",
              {% if variant.image %}
                {% assign variant_image_size = variant.image.width | append: 'x' %}
                "image": "http:{{ variant.image.src | img_url: variant_image_size }}",
              {% endif %}
              {% if variant.title != blank %}
                "name" : "{{ variant.title | escape }}",
              {% endif %}
              {% if variant.sku != blank %}
                "sku": "{{ variant.sku }}",
              {% endif %}
              {% if variant.weight != blank %}
                "weight": {
                  "@type": "QuantitativeValue",
                  {% if variant.weight_unit != blank %}
                    "unitCode": "{{ variant.weight_unit }}",
                  {% endif %}
                  "value": "{{ variant.weight | weight_with_unit: variant.weight_unit }}"
                },
              {% endif %}
              "url": "{{ shop.url }}{{ variant.url }}"
          }
        }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  {% endif %}
}
</script>

Hope it is clear to you.

 

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
superboyevan
Tourist
7 0 2

Hi @LitCommerce 

 

Fantastic! This greats really great! Really appreciate your help!

 

I have seen where the code was meant to go now.

 

Thanks again!

 

Cheers,

 

Evan

LitCommerce
Astronaut
2860 684 732

Hi @superboyevan,

If you have any difficulty, you can contact me 🙂

Happy to help you

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!