I am working on a Shopify store, and I want to display multiple product images depending on what options are selected. This is the code I am using, which works perfectly on desktop, but messed up the way pictures are displayed on slider in mobile:
{% assign wanted_alts = product.selected_or_first_available_variant.options %}
<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 %}
{% if wanted_alts contains media.alt or media.alt == "All" %}
<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="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
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>
{% endif %}
{% endfor %}
{% if enable_thumbnail_slides == true %}
</div>
{% endif %}
</ul>
The only things I changed are:
Included {% assign wanted_alts = product.selected_or_first_available_variant.options %} before the images list to find out what options I want to display.
Wrap each <li> item in a if statement that tests if I want to show that image or not (based on the alt_text):
{% for media in product.media %}
{% if wanted_alts contains media.alt or media.alt == "All" %} //Line I added
<li>
...
</li>
{% endif %}//Line I added
{% endfor %}
This is my website.
Now my thumbnails are messed up on mobile, but they look exactly like I wanted on desktop.
Can someone help me to figure this out?
This is how it looks on mobile now:
This is how it looked before I changed the code (and the way I want it to be):
Related
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; }
I have several blog posts that fall under one umbrella blog post. For example, I have several posts about SQL Zoo tutorials, but I want to be able to link them all up to one "umbrella" post so that I only have one SQL Zoo post on the index page of my blog. I got this idea from: https://codeasashu.github.io/implement-series-post-jekyll-part-2/ and tried to follow the instructions, but now my series post does not show up on my index page. I have the following code in a file called post-series.html located in my _includes folder:
{% assign seriesarray = '|' | split : '|' %}
{% assign seriestitle = '' %}
{% assign serieslabel = '' %}
{% assign sortedposts = (site.posts | sort: 'date') %}
{% for post in sortedposts %}
{% if post.series and page.series_slug != nil and post.series == page.series_slug %}
{% capture postitem %} <li> {{ post.title }} </li> {% endcapture %}
{% assign seriesarray = seriesarray | push: postitem %}
{% assign seriestitle = 'Posts in this series' %}
{% assign serieslabel = 'Series Post' %}
{% elsif post.series != nil and page.series != nil and page.series == post.series %}
{% assign pageurl = page.url | split:'/' | last %}
{% assign posturl = post.url | split:'/' | last %}
{% if pageurl != posturl %}
{% capture postitem %} <li> {{ post.title }} </li> {% endcapture %}
{% else %}
{% capture postitem %} <li> {{ post.title }} </li> {% endcapture %}
{% endif %}
{% assign seriesarray = seriesarray | push: postitem %}
{% endif %}
{% if post.series_slug != nil and page.series != nil and page.series == post.series_slug %}
{% capture series_title %} {{ post.title }} {% endcapture %}
{% assign seriestitle = 'This posts is part of series - ' | append: series_title %}
{% assign serieslabel = 'This posts is part of series - ' | append: series_title %}
{% endif %}
{% endfor %}
{% capture serieslayout %}
{% if seriesarray.size > 0 %}
<hr />
<div class="panel">
<div class="panel-body">
<h4> {{ seriestitle }} </h4>
<ul id="post-series-list">
{% endif %}
{% for post in seriesarray %} {{ post }} {% endfor %}
{% if seriesarray.size > 0 %} </ul> </div> </div> {% endif %}
{% endcapture %}
and the following code from my index.html file in the root of my directory:
---
layout: index
---
<div id="home">
<h1>{{ site.title }}</h1>
<hr />
<ol class="posts">
{% for post in paginator.posts %}
{% assign seriesPost = nil %}
{% if post.series == nil %}
{% if post.series_slug != nil %} {% assign seriesPost = '(Series)' %} {% endif %}
<li class="post-listing">
<img class="post__image" src="/static/img/{{ post.cover_image}}" alt="{{ post.cover_alt }}" />
<div class="post__text">
<a class="post__title" href="{{ post.url }}">{{ post.title }}</a><br>
<span>
{{ post.date | date_to_string }} •
{% assign words = post.content | number_of_words %}
{% if words < 360 %}
1 min read
{% else %}
{{ words | divided_by:180 }} min read
{% endif %}
</span>
{{ post.excerpt }}
</div>
</li>
{% endif %}
{% endfor %}
</ol>
<!-- <div class="sidebar-right sidebar"></div> -->
<!-- <ul>
{% for post in paginator.posts %}
<li>
{{ post.title }}
{{ post.excerpt }}
</li>
{% endfor %}
</ul> -->
<!-- Pagination links -->
{% if paginator.total_pages > 1 %}
<ul class="pagination pagination-sm">
{% if paginator.previous_page %}
<li>«</li>
{% else %}
<li class="disabled"><span aria-hidden="true">«</span></li>
{% endif %}
<li>First</li>
{% for page in (1..paginator.total_pages) %}
{% if page == paginator.page %}
<li class="active"><a>{{ page }}<span class="sr-only">(current)</span></a></li>
{% elsif page == 1 %}
<li>{{ page }}</li>
{% else %}
<li>{{ page }}</li>
{% endif %}
{% endfor %}
<li>Last</li>
{% if paginator.next_page %}
<li>»</li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
{% endif %}
</div><!-- end #home -->
My full repo can be found here: https://github.com/thedatasleuth/thedatasleuth.github.io
In your index.html, {% if post.series == nil %} simply bares posts containing a series: someserie front matter variable to be printed.
For the second problem (note that on SO, you are supposed to ask one question at a time) :
Umbrella post always have series_slug: "My serie slug" in front
matter.
Serie's posts always have series: "My serie slug" in front
matter, and this must be strictly equal to umbrella page series_slug. (eg : you have a post with published: false and series: "SQL Zoology" that will not appear in SQL Zoo serie if you publish it.)
In _layouts/post.html remove {% include series.html %}.
In _includes/post-series.html replace all your code by the following :
{% comment %} #### On an umbrella page {% endcomment %}
{% if page.series_slug != nil %}
{% assign key = page.series_slug %}
{% assign title = page.title %}
{% assign url = page.url %}
{% assign sentence = "All posts in this serie :" %}
{% endif %}
{% comment %} #### On a serie page {% endcomment %}
{% if page.series != nil %}
{% assign key = page.series %}
{% assign umbrella_page = site.posts | where: 'series_slug', key | first %}
{% assign title = umbrella_page.title %}
{% assign url = umbrella_page.url %}
{% assign series_posts = site.posts | where: "series", key %}
{% for post in series_posts %}
{% if post.url == page.url %}
{% assign idx = forloop.index %}
{% endif %}
{% endfor %}
{% capture sentence %}
This article is <strong>Part {{ idx }}</strong> in a <strong>{{ series_posts.size }}-Part</strong> in {{ title }} serie
{% endcapture %}
{% endif %}
{% if page.series_slug != nil or page.series != nil %}
{% assign series_posts = site.posts | where: "series", key %}
<hr />
<div class="panel">
<div class="panel-body">
{% if page.series_slug != nil %}
{% assign key = page.series_slug %}
{% assign title = page.title %}
{% assign url = page.url %}
{% endif %}
<h4>{{ sentence }}</h4>
<ul id="post-series-list">
{% for post in series_posts %}
<li>
{% if page.url == post.url %}
This post : {{ post.title }} - part {{ forloop.index }}
{% else %}
{{ post.title }} - part {{ forloop.index }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
The problem you are facing
You forgot to add the series and series_slug YML variables. That is why it is not working in your case. You seem to not fully understand how the code works, probably due to the complexity of the solution. Therefore, I added another (much simpler) solution, that might fit your needs equally well.
A better/simpler solution
Simply add a YML variable called group: groupname to each post you want in a group. Do NOT skip any of the posts during pagination. Next, list the posts with the same group on the footer of each post (in your page/post layout) with the code below. Finally, add 'part 1', 'part 2', etc. to the post names in the series.
{% if post.group != nil %}
<ul>
{% for post in site.posts %}
{% if post.group == page.group %}
<li>{{ post.title }}</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
PS. If you really want to skip some posts in the pagination, I would create an universal solution. Add a skip_pagination boolean to the Front Matter (YML) and see if it is true in the pagination loop. This enables you to skip any post in the paginator.
I'm trying to create a page in my Jekyll site that will display a custom variable and list the posts that contain that custom variable.
I have created a movie review blog using a template Thiago Rossener created:
Thiago's Template: https://github.com/thiagorossener/jekflix-template
My Site: https://www.howdareyoureview.com/
in each post, I have defined custom variables in the YAML front matter that relate to the movie's details (i.e actor, director score, etc.)
for example:
---
layout: post
title: "Baby Driver"
image: 'https://res.cloudinary.com/how-dare-you-review/image/upload/c_fill,h_399,w_760/v1529865791/baby-driver.png'
tags:
- action
score: 72
director: Edgar Wright
written-by: Edgar Wright
staring:
- Ansel Elgort
- Lily James
- Eiza González
- Jon Hamm
- Jamie Foxx
---
I want to create pages exactly like the tags page that already exists in this template:
https://www.howdareyoureview.com/tags/
except I would want to sort by director, starring, etc. instead of by tags.
the tags page is created using the following code in a tags.html file:
---
layout: minimal
title: "#Tags"
permalink: /tags/index.html
description: "Procure por sua #tag favorita."
---
<div class="tags">
{% assign tags_list = site.tags %}
{% if tags_list.first[0] == null %}
{% for tag in tags_list %}
{{ tag }}
{% endfor %}
{% else %}
{% for tag in tags_list %}
{{ tag[0] }}
{% endfor %}
{% endif %}
{% assign tags_list = nil %}
</div>
{% for tag in site.tags %}
<div class="tag-wrapper">
<span class="tag-title" id="{{ tag[0] | slugify }}">{{ tag[0] }}</span>
<ul class="post-list">
{% assign pages_list = tag[1] %}
{% for post in pages_list reversed %}
{% if post.title != null %}
{% if group == null or group == post.group %}
<li>{{ post.title }}<span class="entry-date"><time datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished">{{ post.date | date: "%m/%d/%Y" }}</time></li>
{% endif %}
{% endif %}
{% endfor %}
{% assign pages_list = nil %}
{% assign group = nil %}
</ul>
</span>
</div>
{% endfor %}
To achieve this for the custom variables I created I tried replacing "tag/tags" with director and saving the file out into to root directory as "directors.html" but the page is blank.
---
layout: minimal
title: "#Directors"
permalink: /directors/index.html
description: "Procure por sua director favorita."
---
<div class="directors">
{% assign directors_list = site.director %}
{% if directors_list.first[0] == null %}
{% for director in directors_list %}
{{ director }}
{% endfor %}
{% else %}
{% for director in directors_list %}
{{ director[0] }}
{% endfor %}
{% endif %}
{% assign directors_list = nil %}
</div>
{% for director in site.director %}
<div class="director-wrapper">
<span class="director-title" id="{{ tag[0] | slugify }}">{{ director[0] }}</span>
<ul class="post-list">
{% assign pages_list = director[1] %}
{% for post in pages_list reversed %}
{% if post.title != null %}
{% if group == null or group == post.group %}
<li>{{ post.title }}<span class="entry-date"><time datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished">{{ post.date | date: "%m/%d/%Y" }}</time></li>
{% endif %}
{% endif %}
{% endfor %}
{% assign pages_list = nil %}
{% assign group = nil %}
</ul>
</span>
</div>
{% endfor %}
Since the code and the concept is exactly the same as the way tags are populated - I cannot understand why this doesn't work - I'm hoping someone can assist!
Here is my entire directory for reference:
https://github.com/howdareyoureview/howdareyoureview.github.io
Tags page uses site.tags, which is an array of site.posts grouped by tag, created by Jekyll at generation time.
You're trying to replicate by targeting site.directors but this expected array doesn't exist. But, you can use the group_by filter to achieve your goal.
<div class="directors">
{% assign directors = site.posts | group_by: 'director' | sort: "name" %}
{% for director in directors %}
{% if director.name == "" %}
{% assign name = "Anonymous" %}
{% else %}
{% assign name = director.name %}
{% endif %}
{{ name }}
{% endfor %}
</div>
{% for director in directors %}
<div class="director-wrapper">
{% if director.name == "" %}
{% assign name = "Anonymous" %}
{% else %}
{% assign name = director.name %}
{% endif %}
<span class="director-title" id="{{ name | slugify }}">{{ name | debug }}</span>
<ul class="post-list">
{% assign pages_list = director.items %}
{% for post in pages_list reversed %}
<li>{{ post.title }}<span class="entry-date"><time datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished">{{ post.date | date: "%m/%d/%Y" }}</time></li>
{% endfor %}
</ul>
</span>
</div>
{% endfor %}
Tip : You can use the inspect filter to debug your vars. {{ myvar | inspect }}
I want to create a "list" of tags from data in my post front matter to use with a lightbox plugin.
So, lets say that i have in my post front matter the following:
gallery: true
images:
- name: image-1.jpg
alt: image-1
- name: image-2.jpg
alt: image-2
- name: image-3.jpg
alt: image-3
I want to loop through that data and create the following html:
<img id="thumb01" class="thumbnail" src="/assets/images/image-1.jpg" data-src="/assets/images/image-1.jpg" data-prev="thumb03" data-next="thumb02" alt="image-1">
<img id="thumb02" class="thumbnail" src="/assets/images/image-2.jpg" data-src="/assets/images/image-2.jpg" data-prev="thumb01" data-next="thumb03" alt="image-2">
<img id="thumb03" class="thumbnail" src="/assets/images/image-3.jpg" data-src="/assets/images/image-3.jpg" data-prev="thumb02" data-next="thumb01" alt="image-3">
I was thinking of inserting in the post layout the following:
{% if page.gallery %}
some type of loop
{% endif %}
But i haven't got the slightest of clues on how to achieve that,
please help!
thanks!
Try this :
{% if page.gallery == true %}
{%- for img in page.images -%}
{% comment %}
If we have more than one image,
we calculate next and prev index
{% endcomment %}
{% if forloop.length > 1 %}
{% if forloop.first %}
{% assign prev = forloop.length %}
{% else %}
{% assign prev = forloop.index | minus: 1 %}
{% endif %}
{% if forloop.last %}
{% assign next = 1 %}
{% else %}
{% assign next = forloop.index | plus: 1 %}
{% endif %}
{% endif %}
<img id="thumb{{ forloop.index }}" class="thumbnail"
src="{{ site.basurl }}/assets/images/{{ img.name }}"
data-src="{{ site.basurl }}/assets/images/{{ img.name }}"
{% comment %} only necessary if we have more than one image {% endcomment %}
{%- if forloop.length > 1 -%}
data-prev="thumb{{ prev }}"
data-next="thumb{{ next }}"
{%- endif %}
alt="{{ img.alt }}" >
{%- endfor -%}
{% endif %}
I would like to add a dropdown menu to my big cartel site.
On Big Cartel you create categories using Big Cartel's dashboard. These categories can be used to create a drop down menu. This much I know. While trying to adjust the code, I noticed Big Cartel's category options are going into the sub-navigation as a drop down.
I want the sub-navigation to appear as a drop down navigation menu under the navigation link "Jewelry". It would be listed like this:
Jewelry
-- Earrings
-- Necklaces and sets
-- Rings
-- Arm candy
A similar dropdown menu design I am going for is like one on www.fashionative.com "Accessories".
Here is the code for my layout
{{ ---------------------------BEGIN HEADER NAVIGATION--------------------------- }}
{% capture Main_Header_Links %}
{% assign: current_page = page.name %}
{% for page in pages.all %}
{% unless page.name contains '-hide-' or page.name contains '-footer-' or page.name contains '-sidebar-' or page.name contains '-subnav-' or page.name contains '-content_block-' %}
{% if page.name == current_page %}
<li class="block current-page">
{% else %}
<li class="block">{% endif %}<span>{{ page.name }}</span></li>
{% endunless %}
{% endfor %}
{% if page.full_url contains '/contact' %}
<li class="current-page">
{% else %}
<li>
{% endif %}
{{ pages.contact | link_to }}
</li>
{% endcapture %}
{% capture Category_Links %}
{% for category in categories.all %}
{% assign parent_cat_name = category.name %}
{% assign parent_cat_url = category.url %}
{% capture sub_cat_list %}
{% for cat2 in categories.active %}
{% unless cat2.name == parent_cat_name %}
{% capture parent_cat_string %}{{ parent_cat_name }} - {% endcapture %}
{% capture parent_cat_url_string %}{{ parent_cat_url }}-{% endcapture %}
{% if cat2.name contains parent_cat_name %}
{% assign has_sub_cats = 'true' %}
{% capture new_sub_cat_name %}{{ cat2.name | replace_first: parent_cat_string, "" }}{% endcapture %}
{% if cat2.url contains parent_cat_url_string %}<li>{{ cat2 | link_to: new_sub_cat_name }}</li>{% endif %}
{% endif %}
{% endunless %}
{% endfor %}
{% endcapture %}
{% unless category.name contains ' - ' %}
<li><span>{{ category.name }}</span>{% if has_sub_cats == 'true' %}<ul id='sub-categories'><div id='subcat-container'>{{ sub_cat_list }}</div></ul>{% endif %}</li>
{% endunless %}
{% assign has_sub_cats = 'true' %}
{% endfor %}
{% endcapture %}
{% capture Alternate_Category_Links %}
{% for category in categories.all %}
{% assign parent_cat_name = category.name %}
{% capture sub_cat_list %}
{% for cat2 in categories.active %}
{% unless cat2.name == parent_cat_name %}
{% capture parent_cat_string %}{{parent_cat_name}} - {% endcapture %}
{% if cat2.name contains parent_cat_name %}
{% assign has_sub_cats = 'true' %}
{% capture new_sub_cat_name %}{{ cat2.name | replace_first: parent_cat_string, "" }}{% endcapture %}
<li>{{ cat2 | link_to: new_sub_cat_name }}</li>
{% endif %}
{% endunless %}
{% endfor %}
{% endcapture %}
{% unless category.name contains ' - ' %}
{% if page.full_url contains 'product' or page.full_url contains 'category' or page.full_url contains 'artist' %}
<li class="current-page">
{% else %}
<li>{% endif %}<span>{{ category.name }}</span>{% if has_sub_cats == 'true' %}<ul class='category-dropdown'>{{ sub_cat_list }}</ul>{% endif %}</li>
{% endunless %}
{% assign has_sub_cats = 'false' %}
{% endfor %}
{% endcapture %}
<div id="header-navigation">
<ul>
{% if page.permalink contains 'home' %}
<li class="current-page">
{% else %}
<li>{% endif %}<span>Home</span></li>
{% if page.full_url contains '/product' or page.full_url contains 'category' or page.full_url contains 'artist' or page.full_url contains '/cart' or page.full_url contains '/cart' or page.full_url contains '/new' or page.full_url contains '/sale' or page.full_url contains '/latest' %}
<li class="current-page">
{% else %}
<li>{% endif %}<span>Jewelry</span>
{% if Categories_in_Nav_Display contains 'down' %}<ul class="category-dropdown">{% for page in pages.all %}{% if page.name contains '-subnav-' or page.name contains '-sidebar-' %}<li><span>{{ page.name | remove: '-sidebar-' | remove: '-subnav-' }}</span></li>{% endif %}{% endfor %}{{ Category_Links }}</ul>{% endif %}
</li>
{% if Categories_in_Nav_Display contains 'ain' %}{% for page in pages.all %}
{% if page.name contains '-subnav-' or page.name contains '-sidebar-' %}
{% if page.full_url contains 'product' or page.full_url contains 'category' or page.full_url contains 'artist' or page.full_url contains '/cart' %}
<li class="current-page">
{% else %}
<li>{% endif %}<span>{{ page.name | remove: '-sidebar-' | remove: '-subnav-' }}</span></li>
{% endif %}{% endfor %}
{{ Alternate_Category_Links }}
{% endif %}
{{ Main_Header_Links }}
</ul>
</div>
{{ ---------------------------END HEADER NAVIGATION--------------------------- }}
</div>
</div>
</div>
{{ ---------------------------END HEADER AREA--------------------------- }}
{{ --BEGIN ERROR DISPLAY-- }}
<noscript>
<div class="error" id="error">
<ul>
<li>JavaScript must be enabled to use this store!</li>
</ul>
</div>
</noscript>{% if errors != blank %}
<div id="error" class="error">
<ul>{% for error in errors %}
<li><u>Error:</u> {{ error }}</li>{% endfor %}</ul>
</div>{% endif %}
{{ --END ERROR DISPLAY-- }}
<div id="contents">
{{ ------------BEGIN SUB-NAVIGATION------------------- }}
{% capture Sub_Navigation %}
<div id="sub-navigation" >
<div id="categories">
{% capture Category_Links %}
{% for page in pages.all %}
{% if page.name contains '-sidebar-' or page.name contains '-subnav-' %}
<li><span>{{ page.name | remove: '-sidebar-' | remove: '-subnav-' }}</span></li>
{% endif %}
{% endfor %}
{% for category in categories.all %}
{% assign parent_cat_name = category.name %}
{% capture sub_cat_list %}
{% for cat2 in categories.active %}
{% unless cat2.name == parent_cat_name %}
{% capture parent_cat_string %}{{parent_cat_name}} - {% endcapture %}
{% if cat2.name contains parent_cat_name %}
{% assign has_sub_cats = 'true' %}
{% capture new_sub_cat_name %}{{ cat2.name | replace_first: parent_cat_string, "" }}{% endcapture %}
<li><span>{{ cat2 | link_to: new_sub_cat_name }}</span></li>
{% endif %}
{% endunless %}
{% endfor %}
{% endcapture %}
{% unless category.name contains ' - ' %}
<li><span>{{ category.name }}</span>{% if has_sub_cats == 'true' %}<ul class="sub-categories"><div id="subcat-container">{{ sub_cat_list }}</div></ul>{% endif %}</li>
{% endunless %}
{% assign has_sub_cats = 'false' %}
{% endfor %}
{% endcapture %}
<ul class="categories-list">
<li>{{ Category_Nav_Title_Text }}</li>
<li><span>ALL</span></li>
{{ Category_Links }}
</ul>
</div>
{{ --BEGIN SEARCH-- }}
{% capture search_form %}
<div id="search" >
<form class="form-search" name="search" action="/products" method="get">
<input id="search-input" name="search" type="text" placeholder="Search" />
<button id="search-submit" name="search-submit" type="submit" title="Search"></button>
</form>
</div>
{% endcapture %}
{{ search_form }}
{{ --END SEARCH-- }}
</div>
{% endcapture %}
{% if page.full_url contains '/product' or page.full_url contains '/category' or page.full_url contains '/artist' or page.full_url contains '/cart' or page.full_url contains '/new' or page.full_url contains '/sale' or page.full_url contains '/latest' %}
{{ Sub_Navigation }}
{% endif %}
{{ ------------END SUB-NAVIGATION------------------- }}
<div id="main">
<div id="main-content">
{% unless page.full_url contains '/product/' or page.full_url contains 'blog' %}
<h1 class="page-title">{{ page.name | remove: '-footer-' | remove: '-hide-' | remove: '-sidebar-' | remove: '-subnav-' | remove: '-f1-' | remove: '-f2-' | remove: '-f3-' }}</h1>
{% endunless %}
{% if page.category == 'custom' %}
{{ page_content | paragraphs }}
{% else %}
{{ page_content }}
{% endif %}
</div>
</div>
</div>