Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
Solved! Go to the solution
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.
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!
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
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.
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
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.
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
Hi @superboyevan,
If you have any difficulty, you can contact me 🙂
Happy to help you
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025