Does anyone know the liquid template variable name for using the column name override instead of the name defined in the view?
<th width="{{ c.width }}" class="govuk-table__header" data-logicalname="{{ c.logical_name }}">
{% if c.sort_enabled %}
{% assign current_sort = order | current_sort:c.logical_name %}
{% case current_sort %}
{% when 'ASC' %}
<a href="{{ request.path_and_query | add_query:'order', c.sort_descending }}"><i class="fa fa-sort-asc"></i>
{{ c.name }}
</a>
{% when 'DESC' %}
<a href="{{ request.path_and_query | add_query:'order', c.sort_ascending }}"><i class="fa fa-sort-desc"></i>
{{ c.name }}
</a>
{% else %}
<a href="{{ request.path_and_query | add_query:'order', c.sort_ascending }}"><i class="fa fa-sort-desc fa-rotate-270"></i>
{{ c.name }}
</a>
{% endcase %}
{% else %}
{{ c.name }}
{% endif %}
</th>
I'm currently using c.name but I want the name to inherit the column name attribute in the entity list configuration.
ASAIK this isn't possible, you need to add the logic to the template to rename the column name, see 'XXXXXXXXXX' below:
{% if c.logical_name == "XXXXXXXXXX" %}
<th width="{{ c.width }}" class="govuk-table__header" data-logicalname="{{ c.logical_name }}">
{% if c.sort_enabled %}
{% assign current_sort = order | current_sort:c.logical_name %}
{% case current_sort %}
{% when 'ASC' %}
<a href="{{ request.path_and_query | add_query:'order', c.sort_descending }}"><i class="fa fa-sort-asc"></i>
XXXXXXXXXX
</a>
{% when 'DESC' %}
<a href="{{ request.path_and_query | add_query:'order', c.sort_ascending }}"><i class="fa fa-sort-desc"></i>
XXXXXXXXXX
</a>
{% else %}
<a href="{{ request.path_and_query | add_query:'order', c.sort_ascending }}"><i class="fa fa-sort-desc fa-rotate-270"></i>
XXXXXXXXXX
</a>
{% endcase %}
{% else %}
{{ c.name }}
{% endif %}
</th>
{% else %}
<th width="{{ c.width }}" class="govuk-table__header" data-logicalname="{{ c.logical_name }}">
{% if c.sort_enabled %}
{% assign current_sort = order | current_sort:c.logical_name %}
{% case current_sort %}
{% when 'ASC' %}
<a href="{{ request.path_and_query | add_query:'order', c.sort_descending }}"><i class="fa fa-sort-asc"></i>
{{ c.name }}
</a>
{% when 'DESC' %}
<a href="{{ request.path_and_query | add_query:'order', c.sort_ascending }}"><i class="fa fa-sort-desc"></i>
{{ c.name }}
</a>
{% else %}
<a href="{{ request.path_and_query | add_query:'order', c.sort_ascending }}"><i class="fa fa-sort-desc fa-rotate-270"></i>
{{ c.name }}
</a>
{% endcase %}
{% else %}
{{ c.name }}
{% endif %}
</th>
{% endif %}
Related
I have 2 links inside the header (one link takes you to one stores the other link takes you to another store). I need to add an active class to the store the user is on (bmx-store & skate-store are the 2 classes that need active class adding to). So if the user is on the bmx store, the link for that store becomes bold and underlined and vice versa.
{% if request.url contains 'source-bmx-testing.myshopify.com' %}
{% elsif request.url contains 'sourceskate.myshopify.com' %}
{% endif %}
I know the code needs to be similar to the snippet above but not sure how to add it into the code i have to add the active class to the store depending on which one you are on. Below is my code:
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'bmx-link' -%}
<a class="link-container" href="{{ block.settings.store_link }}">
<div class="bmx-store">
<img
width="15"
height="15"
src="{{ block.settings.icon_image | img_url: '15x15' }}"
srcset="{{ block.settings.icon_image | img_url: '15x15' }}"
alt="{{ block.settings.icon_image.alt }}">
<span>{{ block.settings.store_link_title }}</span>
</div>
</a>
{%- when 'skate-link' -%}
<a class="link-container" href="{{ block.settings.store_link }}">
<div class="skate-store">
<img
width="15"
height="15"
src="{{ block.settings.icon_image | img_url: '15x15' }}"
srcset="{{ block.settings.icon_image | img_url: '15x15' }}"
alt="{{ block.settings.icon_image.alt }}">
<span>{{ block.settings.store_link_title }}</span>
</div>
</a>
{%- endcase -%}
{%- endfor -%}
{% assign bmx_class = 'bmx-store' %}
{% assign skate_class = 'skate-store' %}
{% if shop.name == 'bmx' %} <!-- use youre store name here -->
{% assign bmx_class = 'bmx-store current-store' %}
{% elsif shop.name == 'skate' %}
{% assign skate_class = 'skate-store current-store %}
{% endif %}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'bmx-link' -%}
{% assign class_block = bmx_class %}
{%- when 'skate-link' -%}
{% assign class_block = skate_class %}
{% endcase %}
<a class="link-container" href="{{ block.settings.store_link }}">
<div class="{{ class_block }}">
<img
width="15"
height="15"
src="{{ block.settings.icon_image | img_url: '15x15' }}"
srcset="{{ block.settings.icon_image | img_url: '15x15' }}"
alt="{{ block.settings.icon_image.alt }}">
<span>{{ block.settings.store_link_title }}</span>
</div>
</a>
{%- endfor -%}
If stores are more than 2 other cleaner solutions can be found.
So I recently purchased the "Chromium 4" theme in Shopify and I've been trying to modify it to my liking.
Everything seems to be working fine, but Now I want change how the Products in Search Results appear, like Change the Product Title Colour, or something else like that.
I've been trying to look around the Search. liquid file but it doesn't seem to do anything or have anything and I'm really confused.
I'm not new to programming but It's my first time dealing with Shopify and I'm confused a hell.
Any help would be awesome!
This is what the search.liquid file looks like
{% unless settings.breadcrumb_styles == 'none' %}{% include 'breadcrumb' %}{% endunless %}
<div class="boxed">
<div id="col-main" class="page-search">
{% if search.results_count == 0 or search.performed == false %}
{% capture search_title %}{{ search.terms | escape }}{% endcapture %}
<h4 class="title">{{ 'search.general.no_products' | t: title: search_title }}</h4>
<form class="search-form" action="/search">
<input type="hidden" name="type" value="product" />
<input type="text" name="q" class="search_box" placeholder="{{settings.search_placeholder}}" value="{{ search.terms }}" />
<button type="submit" class="search-submit" title="Search">
{% if settings.search_icon_type == 'font-icon' %}
<i class="demo-icon {{ settings.search_font_icon }}"></i>
{% else %}
<img src="{{ settings.search_icon | img_url: '20x' }}" alt="Search" />
{% endif %}
</button>
</form>
{% else %}
{% if search.performed %}
{% paginate search.results by 16 %}
{% capture search_title %}{{ search.terms | escape }}{% endcapture %}
<h4 class="title">{{ 'search.general.title' | t: title: search_title }} </h4>
<div class="cata-product cp-grid">
{% for product in search.results %}
{% if product.object_type == 'product' %}
<div class="product-grid-item">
{% include 'product-item' %}
</div>
{% else %}
<div class="article-grid-item">
{% include 'article-result' %}
</div>
{% endif %}
{% endfor %}
</div>
{% if paginate.pages > 1 %}
{% include 'pagination' %}
{% endif %}
{% endpaginate %}
{% endif %}
{% endif %}
</div>
</div>
and this is what the product-item snippet contains
{% assign _item_effect = settings.product_item_hover_effect %}
{% if text_align == blank %}
{% assign text_align = settings.text_align_product_item %}
{% endif %}
<div class="product-wrapper effect-{{ _item_effect }} {% if settings.use_quick_view == blank and settings.enable_product_wishlist == blank and settings.enable_product_compare %}none-product-button{% endif %}">
<div class="product-inner-wrapper">
{% if _item_effect == 'swatch' and product.variants.size > 1 %}
<div class="product-swatch-images">
<div class="bxslider">
{% assign _option = settings.swatch_option | downcase %}
{% comment %}{% assign _swatches_color = false %}
{% if _option == "color" or _option == 'colour' %}
{% assign _swatches_color = true %}
{% endif %}{% endcomment %}
<div class="wrap-swatch-{{ _option }}">
{% include 'swatch_item' with _option %}
</div>
</div>
</div>
{% endif %}
<div class="product-head">
{% include 'product-button' %}
<div class="product-image">
{% capture _image_html %}
{{ product.featured_image | product_img_url: '420x' }}
{% endcapture %}
{% capture number_of_images %}{{ product.images | size }}{% endcapture %}
{% assign number_images = number_of_images | plus:0 %}
<div class="featured-img{% if number_images > 1 and _item_effect == 'switch' %} switch-image{% endif %}">
<a href="{{ product.url | within: collection }}"{% if _lazyload and settings.collections_product_ratio == 'false' %} style="position:relative;padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};"{% endif %}>
{% comment %}<img class="featured-image front{% if _lazyload %} lazyload{% endif %}" {% if _lazyload %}data-{% endif %}src="{% if product.images.size >= 1%}{{ _image_html }}{% else %}{{ 'default-image.jpg' | asset_url }}{% endif %}" alt="{{ product.title | escape }}" />{% endcomment %}
{% include 'image-style' with image: product.featured_image, image_size: '420x', image_lazy_class: 'featured-image front img-lazy', image_class: 'featured-image front img-lazy' %}
{% if number_images > 1 %}
<span class="img-back d-none d-lg-block">
{% comment %}<img class="back{% if _lazyload %} lazyload{% endif %}" {% if _lazyload %}data-{% endif %}src="{{ product.images[1]| product_img_url: '300x' }}" alt="{{ product.title | escape }}" /> {% endcomment %}
{% include 'image-style' with image: product.images[1], image_size: '420x', image_lazy_class: 'back', image_class: 'back' %}
</span>
{% endif %}
</a>
</div>
</div>
</div>
{% include 'product-label' %}
<div class="product-content text-{{ text_align }}">
<div class="pc-inner">
<div class="product-group-vendor-name">
{% if settings.show_product_vendor %}<div class="product-vendor">{{ product.vendor | link_to_vendor }}</div>{% endif %}
<h5 class="product-name">{{ product.title }}</h5>
</div>
{% if settings.show_product_review %}
<div class="product-review">
{% include 'include-reviews' with type: 'preview_badge' %}
</div>
{% endif %}
{% if section.settings.meta_description_excerpt %}
{% assign meta_shortdes = product.metafields.c_f %}
{% assign key = 'description_excerpt' %}
{% unless meta_shortdes.description_excerpt == blank %}
<div class="product-description">{{ meta_shortdes.description_excerpt }}</div>
{% endunless %}
{% endif %}
<div class="price-cart-wrapper">
{% include 'product-price' %}
{% assign meta_shortdes = product.metafields.c_f %}
{% assign key = 'description_excerpt' %}
{% unless meta_shortdes.description_excerpt == blank %}
<div class="product-des-list">{{ meta_shortdes.description_excerpt }}</div>
{% endunless %}
<div class="product-add-cart">
{% unless product.template_suffix == 'redirect' %}
{% if settings.disable_ajax_cart %}
<span class="demo-icon icon-chrom-online-shopping-cart"></span>
{% else %}
{% if product.variants.size > 1 %}
<span class="demo-icon icon-chrom-online-shopping-cart"></span>
{% else %}
{% if product.available %}
<form action="/cart/add" method="post" enctype="multipart/form-data">
<span class="demo-icon icon-chrom-online-shopping-cart"></span>
<select class="d-none" name="id">
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title | escape }}</option>
{% endfor %}
</select>
</form>
{% endif %}
{% endif %}
{% endif %}
{% else %}
{% assign meta_redirect = product.metafields.c_f %}
{% assign key = 'redirect_url' %}
{% unless meta_redirect.redirect_url == blank %}
<a target="_blank" rel="noopener" href="{{ meta_redirect.redirect_url }}" class="btn-add-cart select-options" title="{{ 'products.product.select_options' | t }}"><span class="demo-icon icon-chrom-online-shopping-cart"></span></a>
{% endunless %}
{% endunless %}
</div>
</div>
</div>
</div>
</div>
</div>
If you want to change the product title color and design only for the search page then using the parent class 'cp-grid' you can change the title color
for eg:
.cp-grid .product-name { color: #000000; }
or you want to change color throughout website you can go with below eg:
.product-name { color: #000000; }
This is in regards to the Shopify Debut theme!
So my main nav has two links, About us and Shop. When one clicks on Shop, one is directed to "https://myshop.com/collections". At this stage the Shop link gets the class site-nav--active and changes color to be visibly active.
My problem:
The moment I click on a collection I am directed to https://myshop.com/collections/collection-name, but the Shop link for some reason does not stay active. How can I change that? I need to the Shop link be active the moment the URL has collections in it, and also when on the cart page. Any ideas?
I think i need to change something in this block of code in the site-nav.liquid file.
{% comment %}
Renders a list of menu items
Accepts:
- linklist: {Object} Linklist Liquid object (required)
- wrapper_class: {String} CSS wrapper class for the navigation (optional)
Usage:
{% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %}
{% endcomment %}
<ul class="site-nav list--inline{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}" id="SiteNav">
{% for link in linklists[linklist].links %}
{%- assign child_list_handle = link.title | handleize -%}
{% comment %}
Check if third-level nav exists on each parent link.
{% endcomment %}
{%- assign three_level_nav = false -%}
{% if link.links != blank %}
{% if link.levels == 2 %}
{%- assign three_level_nav = true -%}
{% endif %}
{% endif %}
{% if link.links != blank %}
<li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}" data-has-dropdowns>
<button class="site-nav__link site-nav__link--main site-nav__link--button{% if link.child_active %} site-nav__link--active{% endif %}" type="button" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
<span class="site-nav__label">{{ link.title | escape }}</span>{% include 'icon-chevron-down' %}
</button>
<div class="site-nav__dropdown{% if three_level_nav %} site-nav__dropdown--centered{% endif %}" id="SiteNavLabel-{{ child_list_handle }}">
{% if three_level_nav %}
<div class="site-nav__childlist">
<ul class="site-nav__childlist-grid">
{% if link.links != blank %}
{% for childlink in link.links %}
<li class="site-nav__childlist-item">
<a href="{{ childlink.url }}"
class="site-nav__link site-nav__child-link site-nav__child-link--parent"
{% if childlink.current %} aria-current="page"{% endif %}
>
<span class="site-nav__label">{{ childlink.title | escape }}</span>
</a>
{% if childlink.links != blank %}
<ul>
{% for grandchildlink in childlink.links %}
<li>
<a href="{{ grandchildlink.url }}"
class="site-nav__link site-nav__child-link"
{% if grandchildlink.current %} aria-current="page"{% endif %}
>
<span class="site-nav__label">{{ grandchildlink.title | escape }}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endif %}
</ul>
</div>
{% else %}
<ul>
{% for childlink in link.links %}
<li>
<a href="{{ childlink.url }}"
class="site-nav__link site-nav__child-link{% if forloop.last %} site-nav__link--last{% endif %}"
{% if childlink.current %} aria-current="page"{% endif %}
>
<span class="site-nav__label">{{ childlink.title | escape }}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</li>
{% else %}
<li {% if link.active %} class="site-nav--active"{% endif %}>
<a href="{{ link.url }}"
class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}"
{% if link.current %} aria-current="page"{% endif %}>
<span class="site-nav__label">{{ link.title | escape }}</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
Below are two screenshot, which I hope will help you understand my problem.
Shop link active:
Shop link not active
The link.active
Returns true if the link object is active, or false if the link object is inactive.
So the current page URL needs to match the URL in that link.
In your case:
I need to the Shop link be active the moment the URL has collections in it, and also when on the cart page.
This should do the trick:
{%
if link.active or
request.page_type == "collection" or
request.page_type == "cart"
%}
{% assign link_active_class = "site-nav--active" %}
{% endif %}
<li class="{{ link_active_class }}">
<a href="{{ link.url }}"
class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}"
{% if link.current %} aria-current="page"{% endif %}>
<span class="site-nav__label">{{ link.title | escape }}</span>
</a>
</li>
This code expand on what you had before, so if the exact "Shop" link is active OR the page type is a "collection" or "cart", the link is going to be active. If none of the conditions are met the link_active_class won't be defined and class will be empty class="".
Just make sure that this code is only applied to the "Shop" link otherwise all links will be active on collections or the cart page.
Add this code
{% assign link_active_class = "" %}
{% liquid
if link.active
assign link_active_class = "site-nav--active"
elsif link.title == "shop" and request.page_type == "collection"
assign link_active_class = "site-nav--active"
elsif link.title == "shop" and request.page_type == "cart"
assign link_active_class = "site-nav--active"
endif
%}
If link is active then it's business as usual, if not
We check if the link title is "shop" and the current page type is of the desired types then we add the active class.
Make sure that the link title case matches the case of the string we are checking against, in our case "shop", if it's "Shop", adjust the code, for the sake of simplicity I didn't want to add a filter to adjust the link.title case.
We should be able to merge the elsif lines into one line, however for the sake of readability and clarity I left them as two lines.
Above this line of code
<li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}" data-has-dropdowns>
Replace {% if link.active %} site-nav--active{% endif %} in the line above, with {{ link_active_class }}.
Now, it should look like this
<li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %} {{ link_active_class }}" data-has-dropdowns>
I didn't test this however in theory it should do the trick!
I'm working on my Shopify using the Brooklyn theme. I need help with my footer adjustments. I can't seem to get the footer to be shorter in height. There's so much empty space in there. In the attached photo, you can see I have two columnns. The one on the left has two piece of content and the one on the right has one. How can I push all three of these out to the edge? I tried to set the padding and margins to 0...but it doesn't work. I want it closer to the outside rather than leaving a big space on both sides.
Thank you!
Footer Image
<footer class="site-footer small--text-left" role="contentinfo">
<div class="grid">
{% comment %}
Default to 1 footer column (copyright/powered_by/payment_types)
{% endcomment %}
{% comment %} Added by Ludo S on July 16 2018 {% endcomment %}
{% if section.settings.footer_newsletter_enable %}
{% assign num_footer_columns = 0 %}
{% else %}
{% assign num_footer_columns = 1 %}
{% endif %}
{% if section.settings.footer_newsletter_enable %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% endif %}
{% comment %}
Create an extra menu column if link list has more than 5 links
{% endcomment %}
{% if linklists[section.settings.footer_link_list].links.size > 0 %}
{% comment %}
We have a Footer menu that isn't empty, we will need another column
{% endcomment %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% assign extra_footer_linklist_column = false %}
{% assign footer_linklist_count = linklists[section.settings.footer_link_list].links.size %}
{% if footer_linklist_count > 5 %}
{% assign extra_footer_linklist_column = true %}
{% comment %}
We split the links so we'll need another column
{% endcomment %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% endif %}
{% comment %}
If we have an odd amount of links, we need to show 1 more link in 1st column
{% endcomment %}
{% assign extra_link = footer_linklist_count | modulo: 2 %}
{% comment %}
We start with a 2nd column after first column is filled up.
{% endcomment %}
{% assign footer_linklist_split = footer_linklist_count | divided_by: 2 | plus: extra_link | plus: 1 %}
{% endif %}
{% comment %}
Determine whether there are social links
{% endcomment %}
{% assign footer_social_enable = false %}
{% if
settings.social_twitter_link != blank
or settings.social_facebook_link != blank
or settings.social_pinterest_link != blank
or settings.social_google_plus_link != blank
or settings.social_instagram_link != blank
or settings.social_tumblr_link != blank
or settings.social_youtube_link != blank
or settings.social_vimeo_link != blank
or settings.social_fancy_link != blank
or settings.social_snapchat_link != blank
%}
{% assign footer_social_enable = true %}
{% endif %}
{% comment %}
Calculate the number of footer columns shown. Default to 1.
{% endcomment %}
{% if footer_social_enable %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% endif %}
{% case num_footer_columns %}
{% when 0 %}
{% when 1 %}
{% assign footer_column_width = '' %}
{% when 2 %}
{% assign footer_column_width = 'one-half small--one-whole' %}
{% when 3 %}
{% assign footer_column_width = 'one-third small--one-whole' %}
{% when 4 %}
{% assign footer_column_width = 'large--one-quarter medium--one-half' %}
{% endcase %}
{% if linklists[section.settings.footer_link_list].links.size > 0 %}
<div class="grid grid__item {% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}">
<ul class="no-bullets site-footer__linklist">
{% for link in linklists[section.settings.footer_link_list].links %}
{% comment %}
Create a second column
{% endcomment %}
{% if extra_footer_linklist_column and forloop.index == footer_linklist_split %}
</ul>
</div>
<div class="grid grid__item {% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}">
<ul class="no-bullets site-footer__linklist">
{% endif %}
<li>{{ link.title }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if footer_social_enable %}
{% comment %} Added the if statement for the class and made the div a grid item by Ludo S on July 16 2018 {% endcomment %}
<div class="grid grid__item {% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}">
<ul class="no-bullets social-icons">
{% if settings.social_instagram_link != blank %}
<li>
<a href="{{ settings.social_instagram_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
<span class="icon icon-instagram" aria-hidden="true"></span>
Instagram
</a>
</li>
{% endif %}
{% if settings.social_facebook_link != blank %}
<li>
<a href="{{ settings.social_facebook_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
<span class="icon icon-facebook" aria-hidden="true"></span>
Facebook
</a>
</li>
{% endif %}
{% if settings.social_twitter_link != blank %}
<li>
<a href="{{ settings.social_twitter_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
<span class="icon icon-twitter" aria-hidden="true"></span>
Twitter
</a>
</li>
{% endif %}
{% if settings.social_pinterest_link != blank %}
<li>
<a href="{{ settings.social_pinterest_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
<span class="icon icon-pinterest" aria-hidden="true"></span>
Pinterest
</a>
</li>
{% endif %}
{% if settings.social_snapchat_link != blank %}
<li>
<a href="{{ settings.social_snapchat_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Snapchat' }}">
<span class="icon icon-snapchat" aria-hidden="true"></span>
Snapchat
</a>
</li>
{% endif %}
{% if settings.social_google_plus_link != blank %}
<li>
<a href="{{ settings.social_google_plus_link | escape }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
<span class="icon icon-google_plus" aria-hidden="true"></span>
Google Plus
</a>
</li>
{% endif %}
{% if settings.social_tumblr_link != blank %}
<li>
<a href="{{ settings.social_tumblr_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
<span class="icon icon-tumblr" aria-hidden="true"></span>
Tumblr
</a>
</li>
{% endif %}
{% if settings.social_youtube_link != blank %}
<li>
<a href="{{ settings.social_youtube_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
<span class="icon icon-youtube" aria-hidden="true"></span>
YouTube
</a>
</li>
{% endif %}
{% if settings.social_vimeo_link != blank %}
<li>
<a href="{{ settings.social_vimeo_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
<span class="icon icon-vimeo" aria-hidden="true"></span>
Vimeo
</a>
</li>
{% endif %}
{% if settings.social_fancy_link != blank %}
<li>
<a href="{{ settings.social_fancy_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
<span class="icon icon-fancy" aria-hidden="true"></span>
Fancy
</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}
{% comment %} Added by Ludo S on July 16 2018 {% endcomment %}
{% if section.settings.footer_newsletter_enable %}
<div class="customNewsletter grid__item{% if num_footer_columns == 1 %} one-half push--large--one-quarter push--medium--one-quarter small--one-whole{% else %} {{ footer_column_width }}{% endif %}{% if num_footer_columns == 4 %} narrow-newsletter{% endif %}">
{% form 'customer' %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<div class="newsletter--form">
<div class="note form-success">{{ 'general.newsletter_form.newsletter_confirmation' | t }}</div>
</div>
{% else %}
<label for="Email" class="newsletter__label hidden-label">{{ 'general.newsletter_form.newsletter_email' | t }}</label>
<input type="hidden" name="contact[tags]" value="newsletter">
<div class="newsletter--form">
<p class="h2" style="color:{{ section.settings.newsletter_text_color }}">Stay in touch!</p><br>
<p class="h6" style="color:{{ section.settings.newsletter_text_color }}">Get updates on our newest styles.</p>
<div class="input-group">
<input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="contact[email]" id="Email" class="input-group-field newsletter__input" autocorrect="off" autocapitalize="off">
<span class="input-group-btn">
<button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
<span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
<span class="newsletter__submit-text--small">
<span class="icon icon-arrow-right" aria-hidden="true"></span>
</span>
</button>
</span>
</div>
</div>
{% endif %}
{% endform %}
</div>
{% endif %}
<div class="grid grid__item one-half push--large--one-quarter push--medium--one-quarter small--one-whole">
<p style="color:white">© {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: '/' }}<br>Powered by Caffeine + Doggie Kisses</p></p>
{%- if section.settings.show_payment_icons -%}
{%- unless shop.enabled_payment_types == empty -%}
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="inline-list payment-icons">
{%- for type in shop.enabled_payment_types -%}
<li>
{{ type | payment_type_svg_tag: class: 'icon' }}
</li>
{%- endfor -%}
</ul>
{%- endunless -%}
{%- endif -%}
</div>
</div>
I am trying to generate related products in one of my shopify store, its showing on some products but mostly not, what I want is, display related product first by matching vendor/brand, if not found then show the products of same category:
Can anybody please suggest how to handle this?
<div class="related-products row">
{% assign vendor = product.vendor %}
{% assign vendor_handle = vendor | handleize %}
{% assign handle = product.handle %}
<h4 style="text-align:left;">More in this collection</h4>
{% assign counter = '' %}
{% for product in collections[vendor_handle].all_products %}
{% if vendor == product.vendor and counter.size < 4 and handle != product.handle %}
{% capture temp %}{{ counter }}*{% endcapture %}
{% assign counter = temp %}
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="reveal">
<a href="{{ product.url | within: collection }}" title="{{ product.title }}">
<img src="{{ product.images.first | product_img_url: 'large' }}" class="img-responsive" alt="{{ product.title }}" />
</a>
</div>
<a href="{{ prod.url | within: collection }}" title="{{ prod.title | escape }}">
{{ product.title | escape }}
</a>
</div>
{% endif %}
{% endfor %}
</div>
You're changing the main product by using the following line
{% for product in collections[vendor_handle].all_products %}
and what is prod?
Try the following
<div class="related-products row">
{% assign vendor = product.vendor %}
{% assign vendor_handle = vendor | handleize %}
{% assign handle = product.handle %}
<h4 style="text-align:left;">More in this collection</h4>
{% assign counter = 0 %}
{% for coll_product in collections[vendor_handle].all_products %}
{% if vendor == coll_product.vendor and counter < 4 and handle != coll_product.handle %}
{% assign counter = counter | plus: 1 %}
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="reveal">
<a href="{{ coll_product.url | within: collection }}" title="{{ product.title }}">
<img src="{{ coll_product.images.first | product_img_url: 'large' }}" class="img-responsive" alt="{{ coll_product.title }}" />
</a>
</div>
<a href="{{ coll_product.url | within: collection }}" title="{{ coll_product.title | escape }}">
{{ coll_product.title | escape }}
</a>
</div>
{% endif %}
{% endfor %}
</div>