I am editing the code for the Image block in the Product Information section, so that the Image block can accept link inputs. I have managed to update the schema to accept link input, but I don't know how to update the code to read the link. What do I need to do?
This is my current code:
{{ 'product.css' | asset_url | stylesheet_tag }}
{%- liquid
assign first_3d_model = product.media | where: "media_type", "model" | first
assign thumbnail_position = section.settings.thumbnail_position
assign full_width = section.settings.full_width
assign hide_variants = section.settings.hide_variants
assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src'
assign featured_media = product.selected_or_first_available_variant.featured_media
assign sizes = '375x0,580x0,1160x0'
if full_width
assign sizes = sizes | append: ',1600x'
endif
-%}
{%- if first_3d_model -%}
<link id="ModelViewerStyle" rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css" media="print" onload="this.media='all'">
<link id="ModelViewerOverride" rel="stylesheet" href="{{ 'product-model-viewer-ui.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}
<div class="thb-product-detail product">
<div class="row align-center{% if full_width %} full-width-row{% endif %}">
{% if product.media.size > 0 %}
<div class="small-12 large-7 columns">
<div class="product-gallery-sticky">
<div class="product-gallery-container thumbnails-{{ thumbnail_position }}" id="MediaGallery-{{ section.id }}">
<div class="product-image-container">
<product-slider id="Product-Slider" class="product-images" data-hide-variants="{{ hide_variants }}">
{%- if featured_media != null -%}
{%- render 'product-media', product: product, section: section, forloop: false, media: featured_media, sizes: sizes, variant_images: variant_images, hide_variants: hide_variants -%}
{%- endif -%}
{%- for media in product.media -%}
{%- unless media.id == featured_media.id -%}
{%- render 'product-media', product: product, section: section, forloop: forloop, media: media, sizes: sizes, variant_images: variant_images, hide_variants: hide_variants -%}
{%- endunless -%}
{%- endfor -%}
{%- if product.media.size > 1 -%}
<div class="flickity-nav flickity-prev" tabindex="0">{% render 'svg-icons' with 'carousel-prev' %}</div>
<div class="flickity-nav flickity-next" tabindex="0">{% render 'svg-icons' with 'carousel-next' %}</div>
{%- endif -%}
</product-slider>
</div>
<scroll-shadow>
<div id="Product-Thumbnails" class="product-thumbnail-container" data-hide-variants="{{ hide_variants }}">
{%- if featured_media != null -%}
{%- render 'product-thumbnail', product: product, media: featured_media, forloop: false, variant_images: variant_images, hide_variants: hide_variants -%}
{%- endif -%}
{%- for media in product.media -%}
{%- unless media.id == featured_media.id -%}
{%- render 'product-thumbnail', product: product, media: media, forloop: forloop, variant_images: variant_images, hide_variants: hide_variants -%}
{%- endunless -%}
{%- endfor -%}
</div>
</scroll-shadow>
</div>
</div>
</div>
{% endif %}
<div class="small-12 large-5 columns product-information">
<div id="ProductInfo-{{ section.id }}" class="product-information--inner">
{% render 'product-information', product: product, section: section, update_url: true, pickup: true, hide_variants: hide_variants %}
</div>
</div>
</div>
</div>
{% assign popups = section.blocks | where: "type", "popup" %}
{%- for block in popups -%}
<modal-dialog id="PopupModal-{{ block.id }}" class="product-popup-modal" {{ block.shopify_attributes }}>
<div role="dialog" aria-label="{{ block.settings.text }}" aria-modal="true" class="product-popup-modal__content" tabindex="-1">
<div class="product-popup-modal__content-header">
<h4>{{ block.settings.page.title }}</h4>
<button id="ModalClose-{{ block.id }}" type="button" class="product-popup-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'svg-icons' with 'search-close' %}</button>
</div>
<scroll-shadow>
<div class="product-popup-modal__content-info">
{{ block.settings.page.content }}
</div>
</scroll-shadow>
</div>
</modal-dialog>
{%- endfor -%}
{%- if section.settings.lightbox != blank -%}
{% render 'photoswipe' %}
<link rel="stylesheet" href="{{ 'photoswipe.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}
<script src="{{ 'product.js' | asset_url }}" defer="defer"></script>
{%- if first_3d_model -%}
<script type="application/json" id="ProductJSON-{{ product.id }}">
{{ product.media | where: 'media_type', 'model' | json }}
</script>
<script src="{{ 'product-model.js' | asset_url }}" defer></script>
{%- endif -%}
{%- liquid
if product.selected_or_first_available_variant.featured_media
assign seo_media = product.selected_or_first_available_variant.featured_media
else
assign seo_media = product.featured_media
endif
-%}
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ request.origin | append: product.url | json }},
{% if seo_media -%}
"image": [
{{ seo_media | image_url: width: seo_media.preview_image.width | prepend: "https:" | json }}
],
{%- endif %}
"description": {{ product.description | strip_html | json }},
{% if product.selected_or_first_available_variant.sku != blank -%}
"sku": {{ product.selected_or_first_available_variant.sku | json }},
{%- endif %}
"brand": {
"@type": "Brand",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
{%- if variant.barcode.size == 12 -%}
"gtin12": {{ variant.barcode }},
{%- endif -%}
{%- if variant.barcode.size == 13 -%}
"gtin13": {{ variant.barcode }},
{%- endif -%}
{%- if variant.barcode.size == 14 -%}
"gtin14": {{ variant.barcode }},
{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ request.origin | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>
{% schema %}
{
"name": "Product information",
"tag": "section",
"class": "product-section",
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "Make section full width",
"default": false
},
{
"type": "checkbox",
"id": "show_taxes_included",
"default": true,
"label": "Show tax and shipping information",
"info": "Tax and shipping information will be displayed if [taxes are included in the price](https://help.shopify.com/en/manual/taxes/location#include-taxes-in-product-prices) or [shipping policy](https://help.shopify.com/en/manual/checkout-settings/refund-privacy-tos#add-or-generate-store-policies) is added"
},
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "select",
"id": "thumbnail_position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "bottom",
"label": "Bottom"
}
],
"default": "left",
"label": "Thumbnail position"
},
{
"type": "checkbox",
"id": "hide_variants",
"default": false,
"label": "Hide unselected variants’ media",
"info": "Media for the unselected variants will be hidden."
},
{
"type": "checkbox",
"id": "lightbox",
"default": true,
"label": "Enable image zoom"
},
{
"type": "checkbox",
"id": "enable_video_looping",
"default": false,
"label": "Enable video looping"
}
],
"blocks": [
{
"type": "@app"
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "text",
"default": "Text block",
"label": "Text"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "style_body",
"label": "Body"
},
{
"value": "subheading",
"label": "Subheading"
},
{
"value": "style_vendor",
"label": "Vendor"
}
],
"default": "style_vendor",
"label": "Text Style"
}
]
},
{
"type": "title",
"name": "Title",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_products_rating",
"default": true,
"label": "Show product rating",
"info": "To display a rating, add a product rating app. [Learn more](https://help.shopify.com/manual/online-store/themes/os20/themes-by-shopify/dawn/sections#featured-collection-show-product-rating)"
}
]
},
{
"type": "inventory_level",
"name": "Inventory level",
"limit": 1,
"settings": [
{
"type": "select",
"id": "show_inventory_notice",
"options": [
{
"value": "always",
"label": "Always"
},
{
"value": "low",
"label": "Only when inventory low"
}
],
"default": "always",
"label": "Show inventory notice"
},
{
"type": "select",
"id": "show_inventory_count",
"options": [
{
"value": "never",
"label": "Never"
},
{
"value": "always",
"label": "Always"
},
{
"value": "low",
"label": "Only when inventory low"
}
],
"default": "always",
"label": "Show count in inventory notice"
},
{
"type": "checkbox",
"id": "inventory_notice_pulse",
"default": true,
"label": "Show pulse"
},
{
"type": "checkbox",
"id": "inventory_notice_bar",
"default": true,
"label": "Show progress bar"
},
{
"type": "number",
"id": "inventory_notice_threshold",
"label": "Low inventory threshold",
"default": 10,
"info": "Set the product inventory quantity to alert customers when limited quantities are available. Insert a dynamic source to set different thresholds for multiple products."
},
{
"type": "number",
"id": "inventory_notice_base",
"label": "Inventory base quantity",
"default": 20,
"info": "Enter the initial quantity of your product inventory for progress bar. Insert a dynamic source to set different base quantities for multiple products"
}
]
},
{
"type": "variant_picker",
"name": "Variant picker",
"limit": 1,
"settings": [
{
"type": "select",
"id": "picker_type",
"options": [
{
"value": "dropdown",
"label": "Dropdown"
},
{
"value": "button",
"label": "Block"
}
],
"default": "button",
"label": "Type"
},
{
"type": "checkbox",
"id": "color_picker",
"default": true,
"label": "Enable color swatches",
"info": "[Learn more about color swatches.](https://documentation.fuelthemes.net/kb/how-do-i-set-up-product-variant-swatches/)"
},
{
"type": "checkbox",
"id": "variant_is_disabled",
"default": true,
"label": "Show availability in selectors",
"info": "When an option is selected, unavailable variants will be crossed-out."
}
]
},
{
"type": "buy_buttons",
"name": "Product form",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_quantity_selector",
"default": true,
"label": "Show quantity selector"
},
{
"type": "checkbox",
"id": "show_dynamic_checkout",
"default": true,
"label": "Show dynamic checkout buttons",
"info": "Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
},
{
"type": "checkbox",
"id": "show_gift_card_recipient",
"default": false,
"label": "Show recipient form for gift card products",
"info": "When enabled, gift card products can optionally be sent to a recipient with a personal message."
}
]
},
{
"type": "description",
"name": "Description",
"limit": 1
},
{
"type": "share",
"name": "Share",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "If you include a link in social media posts, the page’s featured image will be shown as the preview image. [Learn more](https://help.shopify.com/en/manual/online-store/images/showing-social-media-thumbnail-images)."
},
{
"type": "paragraph",
"content": "A store title and description are included with the preview image. [Learn more](https://help.shopify.com/en/manual/promoting-marketing/seo/adding-keywords#set-a-title-and-description-for-your-online-store)."
}
]
},
{
"type": "custom_liquid",
"name": "Custom liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "Custom liquid",
"info": "Add app snippets or other Liquid code to create advanced customizations."
}
]
},
{
"type": "popup",
"name": "Pop-up",
"settings": [
{
"type": "text",
"id": "text",
"default": "Sizing guide",
"label": "Link label"
},
{
"type": "select",
"id": "icon",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "apple",
"label": "Apple"
},
{
"value": "banana",
"label": "Banana"
},
{
"value": "bottle",
"label": "Bottle"
},
{
"value": "box",
"label": "Box"
},
{
"value": "carrot",
"label": "Carrot"
},
{
"value": "chat_bubble",
"label": "Chat bubble"
},
{
"value": "check_mark",
"label": "Check mark"
},
{
"value": "clipboard",
"label": "Clipboard"
},
{
"value": "dairy",
"label": "Dairy"
},
{
"value": "dairy_free",
"label": "Dairy free"
},
{
"value": "dryer",
"label": "Dryer"
},
{
"value": "eye",
"label": "Eye"
},
{
"value": "fire",
"label": "Fire"
},
{
"value": "gluten_free",
"label": "Gluten free"
},
{
"value": "heart",
"label": "Heart"
},
{
"value": "iron",
"label": "Iron"
},
{
"value": "leaf",
"label": "Leaf"
},
{
"value": "leather",
"label": "Leather"
},
{
"value": "lightning_bolt",
"label": "Lightning bolt"
},
{
"value": "lipstick",
"label": "Lipstick"
},
{
"value": "lock",
"label": "Lock"
},
{
"value": "map_pin",
"label": "Map pin"
},
{
"value": "nut_free",
"label": "Nut free"
},
{
"value": "pants",
"label": "Pants"
},
{
"value": "paw_print",
"label": "Paw print"
},
{
"value": "pepper",
"label": "Pepper"
},
{
"value": "perfume",
"label": "Perfume"
},
{
"value": "plane",
"label": "Plane"
},
{
"value": "plant",
"label": "Plant"
},
{
"value": "price_tag",
"label": "Price tag"
},
{
"value": "question_mark",
"label": "Question mark"
},
{
"value": "recycle",
"label": "Recycle"
},
{
"value": "return",
"label": "Return"
},
{
"value": "ruler",
"label": "Ruler"
},
{
"value": "serving_dish",
"label": "Serving dish"
},
{
"value": "shirt",
"label": "Shirt"
},
{
"value": "shoe",
"label": "Shoe"
},
{
"value": "silhouette",
"label": "Silhouette"
},
{
"value": "snowflake",
"label": "Snowflake"
},
{
"value": "star",
"label": "Star"
},
{
"value": "stopwatch",
"label": "Stopwatch"
},
{
"value": "truck",
"label": "Truck"
},
{
"value": "washing",
"label": "Washing"
}
],
"default": "ruler",
"label": "Icon"
},
{
"id": "page",
"type": "page",
"label": "Page"
}
]
},
{
"type": "collapsible_tab",
"name": "Collapsible row",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Collapsible row",
"info": "Include a heading that explains the content.",
"label": "Heading"
},
{
"type": "checkbox",
"id": "open",
"default": false,
"label": "Open by default"
},
{
"type": "richtext",
"id": "content",
"label": "Row content"
},
{
"type": "page",
"id": "page",
"label": "Row content from page"
},
{
"type": "liquid",
"id": "custom_liquid",
"label": "Custom liquid",
"info": "Add app snippets or other Liquid code to create advanced customizations. For product description, you can use {{ product.description }}"
}
]
},
{
"type": "complementary",
"name": "Complementary products",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To select complementary products, add the Search & Discovery app. [Learn more](https://help.shopify.com/manual/online-store/search-and-discovery/product-recommendations)"
},
{
"type": "text",
"id": "block_heading",
"default": "Pairs well with",
"label": "Heading"
},
{
"type": "range",
"id": "product_list_limit",
"min": 1,
"max": 10,
"step": 1,
"default": 10,
"label": "Maximum products to show"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "position",
"label": "Position",
"options": [
{ "value": "text-center", "label": "Center" },
{ "value": "text-left", "label": "Left" },
{ "value": "text-right", "label": "Right" }
],
"default": "text-left"
},
{
"id": "link",
"type": "url",
"label": "Link"
}
]
},
{
"type": "custom_option",
"name": "Line item property",
"settings": [
{
"type": "paragraph",
"content": "Line item properties are used to collect customization information for an item added to the cart."
},
{
"type": "select",
"id": "type",
"label": "Type",
"default": "text",
"options": [
{
"label": "Text",
"value": "text"
},
{
"label": "Textarea",
"value": "textarea"
},
{
"label": "Checkbox",
"value": "checkbox"
},
{
"label": "Multiple options",
"value": "multiple"
}
]
},
{
"type": "text",
"id": "label",
"label": "Label",
"default": "Custom option"
},
{
"type": "checkbox",
"id": "text_required",
"label": "Required",
"info": "Only works with 'Add to cart' button",
"default": false
},
{
"type": "header",
"content": "Text",
"info": "Requires line item property type to be Text or Textarea."
},
{
"type": "text",
"id": "text_placeholder",
"label": "Placeholder",
"default": "Enter your text here"
},
{
"type": "header",
"content": "Checkbox",
"info": "Requires line item property type to be Checkbox."
},
{
"type": "text",
"id": "checkbox_checked_value",
"label": "Checked value",
"default": "Yes"
},
{
"type": "text",
"id": "checkbox_unchecked_value",
"label": "Unchecked value",
"default": "No"
},
{
"type": "header",
"content": "Multiple options",
"info": "Requires line item property type to be Multiple options."
},
{
"type": "select",
"id": "multiple_style",
"label": "Style",
"default": "dropdown",
"options": [
{
"label": "Dropdown",
"value": "dropdown"
},
{
"label": "Radio",
"value": "radio"
}
]
},
{
"type": "textarea",
"id": "multiple_options",
"label": "Options",
"default": "Option 1\nOption 2\nOption 3",
"info": "One option on each line"
}
]
},
{
"type": "sku",
"name": "SKU",
"settings": [
{
"type": "select",
"id": "sku_style",
"options": [
{
"value": "style_body",
"label": "Body"
},
{
"value": "subheading",
"label": "Subheading"
},
{
"value": "style_vendor",
"label": "Vendor"
}
],
"default": "style_vendor",
"label": "SKU style"
}
]
}
]
}
{% endschema %}
Shopify Discussion
Partners and Developers
