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
Shopify Discussion
Partners and Developers
