I am new to shopify I am trying to create a website with a slide show variant. I have manage to write this code but I get the following error
Line 247 — Liquid syntax error: 'schema' tag must not be nested inside other tags.
The code is meant to create the variant into a slide show using the app flex app.
Does anyone know were i am going wrong ?
<!-- /templates/product.liquid -->
<div itemscope itemtype="http://schema.org/Product" id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-image-zoom-type="{{ section.settings.product_image_zoom_type }}" data-show-extra-tab="{{ section.settings.show_extra_tab }}" data-extra-tab-content="{{ section.settings.extra_tab_content }}" data-cart-enable-ajax="{{ settings.cart_enable_ajax }}" data-enable-history-state="true">
<meta itemprop="name" content="{{ product.title }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
{% comment %}
Get first variant in stock, or deep linked one
{% endcomment %}
{% assign current_variant = product.selected_or_first_available_variant %}
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
<div class="grid product-single">
<div class="grid__item medium-up--one-half">
{% for image in product.images %}
{% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: image, width: 720, height: 600, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
<div id="{{ wrapper_id }}" class="product-single__featured-image-wrapper supports-js{% unless featured_image == image %} hidden{% endunless %}" data-image-id="{{ image.id }}">
<div class="product-single__photos" data-image-id="{{ image.id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="product-single__photo lazyload{% unless featured_image == image %} lazypreload{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} lightbox{% endif %}"
{% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024' }}"{% endif %}
src="{{ image | img_url: '200x200' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</div>
{% if product.compare_at_price_max > product.price %}
<span class="badge badge--sale"><span>{{ 'products.product.on_sale' | t }}</span></span>
{% endif %}
</div>
{% endfor %}
<noscript>
<img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
</noscript>
{% if product.images.size > 1 %}
<ul class="product-single__thumbnails grid grid--uniform" id="ProductThumbs">
{% case product.images.size %}
{% when 2 %}
{% assign thumbnail_width = 'small--one-half medium-up--push-one-sixth medium-up--one-third' %}
{% when 4 %}
{% assign thumbnail_width = 'small--one-half medium-up--one-quarter' %}
{% else %}
{% assign thumbnail_width = 'small--one-third medium-up--one-third' %}
{% endcase %}
{% for image in product.images %}
<li class="grid__item {{ thumbnail_width }}">
<a href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail" data-image-id="{{ image.id }}">
<img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if section.settings.product_image_zoom_type == 'lightbox' %}
<ul class="gallery hidden">
{% for image in product.images %}
<li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '2048x2048' }}"></li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="grid__item medium-up--one-half{% if product.images.size == 0%} medium-up--push-one-half{% endif %}">
<div class="product-single__meta small--text-center">
<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
{% if section.settings.vendor_show %}
<p class="product-single__vendor" itemprop="brand">{{ product.vendor }}</p>
{% endif %}
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
<link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">
<p class="product-single__prices">
{% if product.compare_at_price_max > product.price %}
<span id="ComparePriceA11y" class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{% endif %}
<span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
{% if product.compare_at_price_max > product.price %}
<span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product-single__price--compare" id="ComparePrice">
{{ current_variant.compare_at_price | money }}
</s>
{% endif %}
{% include 'product-unit-price', variant: current_variant, available: true %}
</p>
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product-single__policies rte">
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
{%- assign productClasses = 'product-form' -%}
{%- if product.has_only_default_variant -%}
{%- assign productClasses = productClasses | append: ' product-form--default-variant-only' -%}
{%- endif -%}
{% form 'product', product, class: productClasses %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
{% if section.settings.product_quantity_enable %}
<div class="product-single__quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1">
</div>
{% endif %}
<div class="product-single__cart-submit-wrapper{% if section.settings.enable_payment_button %} product-single__shopify-payment-btn{% endif %}{% if section.settings.add_to_cart_width == 'full_width' %} product-form--full{% endif %}">
<button type="submit" name="add" id="AddToCart" class="btn product-single__cart-submit{% if section.settings.add_to_cart_width == 'full_width' %} btn--full{% endif %}{% if section.settings.enable_payment_button %} shopify-payment-btn btn--secondary{% endif %}" data-cart-url="{{ routes.cart_url }}">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}
</div>
{% if section.settings.product_description_position == 'right' %}
{%- assign position = 'right' -%}
{% include 'product-description' %}
{% endif %}
{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
</div>
{% if section.settings.product_description_position == 'below' %}
{%- assign position = 'below' -%}
{% include 'product-description' %}
{% endif %}
</div>
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}
<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
window.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
{% if product.variants.size > 1 %}
<script>
(function($) {
var variantImages = {},
thumbnails,
variant,
variantImage,
variantImage_count = 0;
//produce mapping between variant image and options
{% for variant in product.variants %}
variant = {{ variant | json }};
if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
variantImage = variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
variantImages[variantImage] = variantImages[variantImage] || {};
{% for option in product.options %}
{% assign option_value = variant.options[forloop.index0] %}
{% assign option_key = 'option-' | append: forloop.index0 %}
if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
}
else {
var oldValue = variantImages[variantImage][{{ option_key | json }}];
if ( oldValue !== null && oldValue !== {{ option_value | json }} ) {
variantImages[variantImage][{{ option_key | json }}] = null;
}
}
{% endfor %}
variantImage_count++;
}
{% endfor %}
$(function() {
if (variantImage_count > 0) {
$('select.single-option-selector').change(function() {
var selected_color = $(this).val();
thumbnails = $('.flex-control-thumbs img').each(function(index, el) {
var image = $(el).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
if (typeof variantImages<div class="full"></div> !== 'undefined') {
if(selected_color == variantImages<div class="full"></div>['option-0']) {
//only check against the first option ['option-0'], which is Color (in my case)
$('.flexslider').flexslider(index);
}
}
});
});
}
});
})(jQuery);
</script>
}
The {% schema %} tag was introduced with Shopify's "sectioned themes". I can see that your shopify theme is using "Sections", because of all the reference to the section variable in your code!
Since searching for {% schema %} within your question code doesn't return any results, I have to conclude the syntax error is originating in a different file. (Probably one including your product.liquid file with a {% section 'product' %} directive.
In the Shopify theme docs about "Using theme sections", we see that the {% schema %} tag lives in templates that are inside of the sections/ folder in your theme's directory structure. In this case, I'd expect to find the nested tag causing the syntax error within sections/product.liquid.
Related
Currently it only zooms on the product image when hovered over. I would like to keep this feature plus make the product image pop out.
I would like for when a customer clicks on a primary/thumbnail image it pops out and the customer can click an arrow to view more product images if there are multiple images attached to a product.
{% assign featured_media = product.images[1] | default: product.featured_image %}
{%- for media in product.media -%}
{% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
{%- endfor -%}
<noscript>
{% capture product_image_size %}{{ height }}x{% endcapture %}
<img src="{{ featured_media | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_media.alt }}" id="FeaturedMedia-{{ section.id }}" class="product-featured-media" style="max-width: {{ height }}px;">
</noscript>
{% assign first_3d_model = product.media | where: "media_type", "model" | first %}
{%- if first_3d_model -%}
<button
aria-label="{{ 'products.product.view_in_space_label' | t }}"
class="product-single__view-in-space"
data-shopify-xr
data-shopify-model3d-id="{{ first_3d_model.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden
>
{% include 'icon-3d-badge-full-color' %}<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>
</button>
{%- endif -%}
{% if product.media.size > 1 %}
{% if product.media.size > 4 %}
{%- assign enable_thumbnail_slides = true -%}
{% endif %}
<div data-thumbnail-slider>
<div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} slider-active{% endif %}" data-slider>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}" data-slider-button>
{% include 'icon-chevron-left' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
</button>
{% endif %}
<ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}" data-slider-container>
{% if enable_thumbnail_slides == true %}
<div class="product-single__thumbnails-slider-track" data-slider-track>
{% endif %}
{% for media in product.media %}
<li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} {% if enable_thumbnail_slides == true %} product-single__thumbnails-item-slide{% endif %} js"{% if enable_thumbnail_slides == true %} data-slider-slide-index="{{ forloop.index0 }}" data-slider-item{% endif %}>
<a href="#"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ section.id }}-{{ media.id }}"
{% if enable_thumbnail_slides == true %} data-slider-item-link{% endif %}
{% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
{%- capture thumbnailAlt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}
<img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
{%- if media.media_type == 'video' or media.media_type =='external_video' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-video-badge-full-color' %}
</div>
{%- endif -%}
{%- if media.media_type == 'model' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-3d-badge-full-color' %}
</div>
{%- endif -%}
</a>
</li>
{% endfor %}
{% if enable_thumbnail_slides == true %}
</div>
{% endif %}
</ul>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}" data-slider-button data-slider-button-next>
{% include 'icon-chevron-right' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
</button>
{% endif %}
</div>
</div>
{% endif %}
</div>
I'm currently using a Luna theme from the big cartel website template. I am wondering if there is any way or coding I can use to make my image on the slide show clickable. I specially want it to lead my customers to certain product pages.
Yep! Hope this helps! :)
Copy and paste this into the custom code for your Home page. Change the links to your product pages that you'd like. Also, you can add more slides with links by repeating the code like I did.
{% if theme.image_sets.slideshow.size > 0 %}
<div class="flexslider home-slideshow">
<ul class="slides">
{% for image in theme.image_sets.slideshow %}
<li>
<img alt="" srcset="{{ image.url | constrain: 1068 }}, {{ image.url | constrain: 2136 }} 2x" src="{{ image.url | constrain: 1068 }}">
</li>
<li>
<img alt="" srcset="{{ image.url | constrain: 1068 }}, {{ image.url | constrain: 2136 }} 2x" src="{{ image.url | constrain: 1068 }}">
</li>
<li>
<img alt="" srcset="{{ image.url | constrain: 1068 }}, {{ image.url | constrain: 2136 }} 2x" src="{{ image.url | constrain: 1068 }}">
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if theme.max_products_per_row == 4 %}
{% assign product_image_constrain_width = 255 %}
{% assign product_image_constrain_height = 255 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% elsif theme.max_products_per_row == 3 %}
{% assign product_image_constrain_width = 346 %}
{% assign product_image_constrain_height = 346 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% elsif theme.max_products_per_row == 2 %}
{% assign product_image_constrain_width = 526 %}
{% assign product_image_constrain_height = 526 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% elsif theme.max_products_per_row == 1 %}
{% assign product_image_constrain_width = 1068 %}
{% assign product_image_constrain_height = 1068 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% endif %}
{% assign thumb_constrain_width = 30 %}
{% assign thumb_constrain_height = 30 %}
<h1 class="visually-hidden">Featured Products</h1>
{% if theme.featured_items > 0 %}
{% get products from products.all limit:theme.featured_items order:theme.featured_order %}
{% if products != blank %}
<div class="product-list-container">
<div class="product-list">
{% for product in products %}
{% assign product_status = '' %}
{% case product.status %}
{% when 'active' %}
{% if product.on_sale %}{% assign product_status = 'On sale' %}{% endif %}
{% when 'sold-out' %}
{% assign product_status = 'Sold out' %}
{% when 'coming-soon' %}
{% assign product_status = 'Coming soon' %}
{% endcase %}
{% capture image_class %}
{% if product.image.height > product.image.width %}
image-tall
{% if theme.grid_image_style == 'crop-to-square' %}
{% assign product_image_constrain_height = '' %}
{% assign product_image_constrain_height_large = '' %}
{% assign thumb_constrain_height = '' %}
{% endif %}
{% elsif product.image.height < product.image.width %}
image-wide
{% if theme.grid_image_style == 'crop-to-square' %}
{% assign product_image_constrain_width = '' %}
{% assign product_image_constrain_width_large = '' %}
{% assign thumb_constrain_width = '' %}
{% endif %}
{% else %}
image-square
{% endif %}
{% endcapture %}
<div class="product-list-thumb {{ theme.grid_image_style }} {{ theme.show_overlay }}">
<a class="product-list-link" href="{{ product.url }}" title="View {{ product.name | escape }}">
<div class="product-list-thumb-container">
<figure class="product-list-image-container">
<div class="image-wrapper">
<img alt="" class="lazy product-list-image {{ image_class }}" src="{{ product.image | product_image_url | constrain: thumb_constrain_width,thumb_constrain_height }}" data-src="{{ product.image | product_image_url | constrain: product_image_constrain_width, product_image_constrain_height }}" data-srcset="{{ product.image | product_image_url | constrain: product_image_constrain_width_large, product_image_constrain_height_large }} 2x, {{ product.image | product_image_url | constrain: product_image_constrain_width, product_image_constrain_height }} 1x">
</div>
</figure>
</div>
<div class="product-list-thumb-info">
<div class="product-list-item-background"></div>
<div class="product-list-thumb-info-headers">
<div class="product-list-thumb-name">{{ product.name }}</div>
<div class="product-list-thumb-price">
{% if product.variable_pricing %}
{{ product.min_price | money: theme.money_format }} - {{ product.max_price | money: theme.money_format }}
{% else %}
{{ product.default_price | money: theme.money_format }}
{% endif %}
{% if product_status != blank %}
<div class="product-list-thumb-status">{{ product_status }}</div>
{% endif %}
</div>
</div>
</div>
</a>
</div>
{% endfor %}
</div>
</div>
{% else %}
<div class="empty-products centered-message">No products found.</div>
{% endif %}
{% endget %}
{% endif %}
I'm trying to get my featured collections section on my Shopify site to display as a slider. It looks like it is already installed on the Debut theme but I can't get it to initialize. I'm not getting any errors in my console so does anyone know how to get the slick slider to display correctly?
Here is my site and password to view the site if it's helpful.
https://test-shop-986573.myshopify.com/
password: shecka
<ul data-slides="{{section.settings.grid}}" class="grid grid--uniform grid--view-items collection-slider ">
{
.slick-track {
display: flex;
}
.product-card {
width: 100%;
}
.slick-prev {
left: 0;
z-index: 999;
}
.slick-next {
right: 0;
z-index: 999;
}
padding-right: 25px;
overflow: hidden;
}
$(document).ready(function(){
$('.collection-slider').each(function(){
var num_slides = 2;
if(window.innerWidth >= 750)
{
var num_slides = $(this).data('slides');
}
$(this).slick({slidesToShow:num_slides});
});
});
{% case section.settings.grid %}
{% when 2 %}
{%- assign max_height = 530 -%}
{% when 3 %}
{%- assign max_height = 345 -%}
{% when 4 %}
{%- assign max_height = 250 -%}
{% when 5 %}
{%- assign max_height = 195 -%}
{% endcase %}
{% if section.settings.layout == 'grid' %}
{%- assign limit = section.settings.grid | times: section.settings.rows -%}
{% else %}
{%- assign limit = 16 -%}
{% endif %}
{% paginate collection.products by limit %}
<div data-section-id="{{ section.id }}" data-section-type="collection-template">
<header class="collection-header">
{%- assign is_filter_by_available = false -%}
{%- if section.settings.tags_enable and collection.all_tags.size > 0 -%}
{%- assign is_filter_by_available = true -%}
{%- endif -%}
{% if section.settings.show_collection_image and collection.image %}
<div class="collection-hero">
<div class="collection-hero__image ratio-container lazyload js"
data-bgset="{% include 'bgset', image: collection.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-image: url('{{ collection.image | img_url: '300x300' }});"></div>
<noscript>
<div class="collection-hero__image" style="background-image: url({{ collection.image | img_url: '2048x600', crop: 'top' }});"></div>
</noscript>
<div class="collection-hero__title-wrapper">
<h1 class="collection-hero__title page-width">
<span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
{{ collection.title }}
</h1>
</div>
</div>
{% if is_filter_by_available == false and section.settings.sort_enable == false %}
<div class="page-width">
<span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
</div>
{% endif %}
{% if collection.description != blank %}
<div class="rte collection-description page-width">
{{ collection.description }}
</div>
{% endif %}
{% else %}
<div class="page-width">
<div class="section-header text-center">
<h1>
<span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
{{ collection.title }}
</h1>
{% if collection.description != blank %}
<div class="rte">
{{ collection.description }}
</div>
{% endif %}
{% if is_filter_by_available == false and section.settings.sort_enable == false %}
<span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
{% endif %}
</div>
</div>
{% endif %}
{% if is_filter_by_available or section.settings.sort_enable %}
<div class="filters-toolbar-wrapper{% if is_filter_by_available %} filters-toolbar--has-filter{% endif %}">
<div class="page-width">
<div class="filters-toolbar">
<div class="filters-toolbar__item-wrapper">
{% if section.settings.tags_enable %}
{% unless collection.all_tags.size == 0 %}
<div class="filters-toolbar__item-child">
<label class="filters-toolbar__label select-label" for="FilterTags">{{ 'collections.filters.title_tags' | t }}</label>
<div class="filters-toolbar__input-wrapper select-group">
<select class="filters-toolbar__input hidden" name="FilterTags" id="FilterTags" aria-describedby="a11y-refresh-page-message a11y-selection-message">
<option value="{{ collection.url }}">{{ 'collections.filters.all_tags' | t }}</option>
{% for tag in collection.all_tags %}
{%- assign new_url = tag | link_to_tag: tag | split: 'href="' | last | split: '"' | first -%}
<option value="{{ new_url }}"{% if current_tags contains tag %} selected="selected"{% endif %}>{{ tag }}</option>
{% endfor %}
</select>
{% include 'icon-chevron-down' %}
</div>
</div>
{% endunless %}
{% endif %}
{% if section.settings.sort_enable %}
<div class="filters-toolbar__item-child">
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
<label class="filters-toolbar__label select-label" for="SortBy">{{ 'collections.sorting.title' | t }}</label>
<div class="filters-toolbar__input-wrapper select-group">
<select name="sort_by" id="SortBy"
class="filters-toolbar__input hidden"
aria-describedby="a11y-refresh-page-message a11y-selection-message"
data-default-sortby="{{ collection.default_sort_by }}"
>
{%- for option in collection.sort_options -%}
<option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>{{ option.name }}</option>
{%- endfor -%}
</select>
{% include 'icon-chevron-down' %}
</div>
</div>
{% endif %}
</div>
<div class="filters-toolbar__item filters-toolbar__item--count">
<span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
</div>
</div>
</div>
</div>
{% endif %}
</header>
<div class="page-width" id="Collection">
{% if section.settings.layout == 'grid' %}
{% case section.settings.grid %}
{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when 3 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when 4 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}
<ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
{% for product in collection.products %}
<li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
{% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
</li>
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
<li class="grid__item">
<div class="grid grid--uniform">
{% for i in (1..limit) %}
<div class="grid__item {{ grid_item_width }}">
<div class="grid-view-item">
<a href="#" class="grid-view-item__link">
<div class="grid-view-item__image">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="grid-view-item__meta">
<span class="product-price__price">$19.99</span>
</div>
</a>
</div>
</div>
{% endfor %}
</div>
</li>
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
</ul>
{% else %}
<ul class="list-view-items">
{% for product in collection.products %}
<li class="list-view-item">
{% include 'product-card-list', product: product, show_vendor: section.settings.show_vendor %}
</li>
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0%}
{% for i in (1..4) %}
<li class="list-view-item">
<a href="#" class="list-view-item__link">
<div class="list-view-item__image-column">
<div class="list-view-item__image-wrapper">
<div class="list-view-item__image">
{% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
</div>
<div class="list-view-item__title-column">
<div class="list-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
</div>
<div class="list-view-item__price-column">
<span class="product-price__price">$19.99</span>
</div>
</a>
</li>
{% endfor %}
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
</ul>
{% endif %}
{% if is_empty_collection %}
<div class="grid__item small--text-center">
<p class="text-center">{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endif %}
{%- if paginate.pages > 1 -%}
{% include 'pagination', paginate: paginate %}
{%- endif -%}
</div>
</div>
{% endpaginate %}
I am working on the debut theme of Shopify. here I have added the custom code of product images.
<div class="product-image-left single-itemim lightbox-pop Mobile">
{% if product.images.size > 0 %}
{% for image in product.images %}
{% capture wrapper_class %}
{%- unless featured_image == image -%}
hide
{%- endunless -%}
{% endcapture %}
<div data-index="{{ forloop.index }}" id="ImageWrapper-{{ image.id }}" data-image-id="{{ image.id }}" class="responsive-image__wrapper" {{ wrapper_attributes }}>
<a href="{{ image | img_url: '1000x' }}" class="image-popup-link"><img id="Image-{{ image.id }}"
class="responsive-image__image lazyload {{ image_class }}"
src="{{ image | img_url: '800x' }}"
data-src="{{ img_url }}"
data-widths="[{{ image_widths }}]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
tabindex="-1"
alt="{{ image.alt | escape }}"
{{ image_attributes }}
>
</a>
</div>
{% endfor %}
{%else%}
<div class="responsive-image__wrapper ">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%endif%}
</div>
Can some one here help. to tell how can I add the video file code here.So I can add all format video files.Thankyou
There's already a tutorial for it on Shopify's page.
See here: https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video
EDIT:
You should replace your whole code that you posted above with
{% for media in product.media %}
{% include 'media' %}
{% endfor %}
And then move your code to media.liquid snippet like this:
{% case media.media_type %}
{% when 'image' %}
<div class="product-image-left single-itemim lightbox-pop Mobile">
{% if product.images.size > 0 %}
{% for image in product.images %}
{% capture wrapper_class %}
{%- unless featured_image == image -%}
hide
{%- endunless -%}
{% endcapture %}
<div data-index="{{ forloop.index }}" id="ImageWrapper-{{ image.id }}" data-image-id="{{ image.id }}" class="responsive-image__wrapper" {{ wrapper_attributes }}>
<a href="{{ image | img_url: '1000x' }}" class="image-popup-link"><img id="Image-{{ image.id }}"
class="responsive-image__image lazyload {{ image_class }}"
src="{{ image | img_url: '800x' }}"
data-src="{{ img_url }}"
data-widths="[{{ image_widths }}]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
tabindex="-1"
alt="{{ image.alt | escape }}"
{{ image_attributes }}
>
</a>
</div>
{% endfor %}
{% else %}
<div class="responsive-image__wrapper ">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}
</div>
{% when 'external_video' %}
<div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100}}%;" data-media-id="{{ media.id }}">
{{ media | external_video_tag }}
</div>
{% when 'video' %}
<div class="product-single__media" data-media-id="{{ media.id }}">
{{ media | video_tag: controls: true }}
</div>
{% when 'model' %}
<div class="product-single__media" style="padding-top: 100%" data-media-id="{{ media.id }}">
{{ media | model_viewer_tag }}
</div>
{% else %}
<div class="product-single__media" style="padding-top: 100%;" data-media-id="{{ media.id }}">
{{ media | media_tag }}
</div>
{% endcase %}
On the landing page and collections page, below each product, I want the color variants to link to the variant with the color selected e.g. if I click on the red color, it takes me to the product page with the red variant selected. I managed to add the color variants but I don't know how to link them to the variants. The products also have sizes as they are clothes, so I want the XS size to be selected by default.
When the red variant is clicked, takes to the product page with variants with XS and Red selected.
When the black variant is clicked, takes to the product page with variants XS and Black selected.
When the black variant is clicked, takes to the product page with variants XS and White selected.
How do I dynamically add a link that redirects to the product page with XS + color clicked?
Source: https://cropshopboutique.com/
The code I have for the colors so far are:
color-option-row.liquid
<div class="product-option-row flex justify-between flex-column flex-row-ns tc tl-ns mb4">
<div class="option-values">
{% for value in option.values %}
{% assign radio_id = 'option-' | append: option_name | append: '-' | append: value | handleize %}
<a href="{{ product.url }}?variant={{ variant.id }}">
<label for="{{ radio_id }}">
{% if force_colors == true %}
{% include 'option-color' with color: value %}
{% else %}
{{ value }}
{% endif %}
</label>
</a>
{% endfor %}
</div>
</div>
color-variant-hover.liquid
{% assign has_multiple_variants = false %}
{% if product.variants.size > 1 %}
{% assign has_multiple_variants = true %}
{% endif %}
{% assign has_multiple_options = false %}
{% if product.options.size > 1 %}
{% assign has_multiple_options = true %}
{% endif %}
{% assign has_selected_variant = false %}
{% if product.selected_variant != nil %}
{% assign has_selected_variant = true %}
{% endif %}
{% if has_multiple_variants %}
{% include 'get-variants-with-quantity-json' with product: product %}
{% endif %}
{% assign can_add_to_cart = false %}
{% if has_selected_variant and product.selected_variant.available %}
{% assign can_add_to_cart = true %}
{% elsif has_multiple_variants == false and product.available %}
{% assign can_add_to_cart = true %}
{% endif %}
{% if has_multiple_options or has_multiple_variants %}
{% for option in product.options_with_values %}
{% assign option_name = 'option' | append: option.position %}
{% assign selected = false %}
{% if has_selected_variant %}
{% assign selected = product.selected_variant[option_name] %}
{% endif %}
{% assign default_variant = product.selected_or_first_available_variant %}
{% if option.name == 'Color' %}
<div class="option-colors">
{% include 'color-option-row' with option: option, option_name: option_name, selected: selected, force_colors: true %}
</div>
{% elsif option.name == 'Pattern' %}
<div class="option-patterns">
{% include 'color-option-row' with option: option, option_name: option_name, selected: selected, force_colors: true %}
</div>
{% else %}
<div class="dn">
{% include 'color-option-row' with option: option, option_name: option_name, type: 'select', selected: selected %}
</div>
{% endif %}
{% endfor %}
{% endif %}
<input class="js-variant-id" type="hidden" name="id" value="{{ default_variant.id }}">
featured-products.liquid
<div class="product-card fl w-50 w-25-l mb3 ph1 ph3-m ph3-l">
{% include 'product-card' %}
{% include 'color-variant-hover' %}
</div>
Try to update your color-option-row.liquid to the following:
<div class="product-option-row flex justify-between flex-column flex-row-ns tc tl-ns mb4">
<div class="option-values">
{% for value in option.values %}
{% assign radio_id = 'option-' | append: option_name | append: '-' | append: value | handleize %}
{%- for variant in product.variants -%}
{%- if variant.title contains value -%}
{%- assign productColorOptionURL = product.url | append: "?variant=" | append: variant.id -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
<a href="{{ productColorOptionURL }}">
<label for="{{ radio_id }}">
{% if force_colors == true %}
{% include 'option-color' with color: value %}
{% else %}
{{ value }}
{% endif %}
</label>
</a>
{% endfor %}
</div>
</div>