I'm using Shopify's Debut theme and would like to add the footer navigation to the bottom. In the backend, I have two navigations, "Main menu" and "Footer menu" set up.
This works:
<ul>
{% for link in linklists.main-menu.links %}
<li>{{ link.title }}</li>
{% endfor %}
</ul>
but this doesn't when I put "footer-menu":
<ul>
{% for link in linklists.footer-menu.links %}
<li>{{ link.title }}</li>
{% endfor %}
</ul>
The default footer menu is just footer not footer-menu.
So you should call linklists.footer.links instead.
Related
I'm trying to display all my product titles and URLs using.
<ul>
<h3>Products</h3>
{% for product in collections.all.products %}
<li>
{{ product.title }}
</li>
{% endfor %}
</ul>
But it is only displaying the first 50 pages. How can I make it to show all my products
On the desktop version of our site, we have a 3 column section (the theme calls is text-adverts) with one about pickup, one about delivery, one about shipping. On mobile, it automatically converts to a flexslider with no arrows or really any way of knowing to swipe unless you watch it long enough. I'd much rather just have the 3 stacked so no users miss this critical info.
I've found the code dealing with the text-adverts on mobile but I don't know what to replace it with. Any help is much appreciated.
<div class="container d-block d-md-none">
<div class="row text-advert-section mobile-homepage-text-adverts flexslider text-adverts-alignment--{{ text-advert--alignment }}">
<ul class="slides">
{% for block in section.blocks %}
{%- assign advert_has_link = false -%}
{% if block.settings.link != blank %}
{%- assign advert_has_link = true -%}
{% endif %}
<li {{ block.shopify_attributes }}>
<div class="grid__item text-advert-section__item{% if advert_has_link %} text-advert-section__item--link{% endif %}">
{% if advert_has_link %}<a href="{{ block.settings.link }}">{% endif %}
{% if block.settings.icon != 'none' %}
<div class="text-advert-section__icon-wrapper {{ section.settings.icon-size }}">
<i data-feather="{{ block.settings.icon }}"></i>
</div>
{% endif %}
<div class="text-advert-section__text-wrapper">
{% if block.settings.heading != blank %}
<span class="text-advert-section__header type-subheading type-subheading--1">{{ block.settings.heading | escape }}</span>
{% endif %}
{% if block.settings.subheading != blank %}
<span class="text-advert-section__sub-header h6">{{ block.settings.subheading | escape }}</span>
{% endif %}
</div>
{% if advert_has_link %}</a>{% endif %}
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
The flexslider is being initialised by javascript. So you need to find the script that initialises the slider. Most likely it will look something like this: $('.flexslider').flexslider({})
You should also remove the flexslider class from the div with class text-advert-section - because it shouldn't utilise any flexslider code.
Can you please guide me, How to create third level menu in shopify.
Sub Dropdown Menu for (Almost) Any Shopify theme.
Thanks in advance.
In navigation:
If your Shopify backend updated then simple drag and drag upto three level
see: screenshot http://prntscr.com/hzu8n3
Or use as create new menu with same handle of sub menu.
And use below code
<div class="menuItems">
<ul class="mebItemParent">
{% for link in linklists.mobile-menu.links %}
{% if linklists[link.handle] == empty %}
<li class="">{{ link.title }}</li>
{% else %}
<li class="hasSubItem">
<div class="withtiggle">
{{ link.title }} <span class="toggleItem">+</span>
</div>
<ul>
{% for l in linklists[link.handle].links %}
{% if linklists[l.handle] == empty %}
<li class="">{{ l.title }}</li>
{% else %}
<li class="hasSubItem">
<div class="withtiggle">
{{ l.title }} <span class="toggleItem">+</span>
</div>
<ul>
{% for l2 in linklists[link.handle].links %}
<li class="">{{ l2.title }}</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
I'm trying to hide my cart when it is empty and found my cart code snippet in the header.liquid file
<a href="/cart" class="site-header__cart">
{% include 'icon-cart' %}
<span class="visually-hidden">{{ 'layout.cart.title' | t }}</span>
<span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
{% if cart.item_count > 0 %}
<div id="CartCount" class="site-header__cart-count">
<span>{{ cart.item_count }}</span>
<span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
</div>
{% endif %}
</a>
I've also tried using this code that I found here (https://ecommerce.shopify.com/c/ecommerce-design/t/hide-cart-checkout-button-when-cart-is-empty-115075)
{% if cart.item_count != 0 %}
Both of these aren't working for me, any suggestions?
You can use this code, do let us know if this help you to resolve your query:
{% if cart.item_count > 0 %} your html here {% endif %}
Also you need to make some changes to js if your page in not refreshing during add to cart if your theme using ajax add to cart functionality.
Thanks
I am working on a Hubspot COS website and I need to be able to run custom queries on blog posts and display a list of those blog posts in a module on the home page and in the sidebar on the website.
Where do I start? I have tried using the RSS module, but it is not specific enough for my needs.
If you have any advise it would be much appreciated. Thanks!
I was able to use blog_recent_topic_posts() to solve this problem:
<div class="row-fluid">
{% set posts = blog_recent_topic_posts('3904474513', 'featured-resource', 3) %}
{% for post in posts %}
{% set topics = post.topic_list %}
<div class="span4 resource">
<div class="resource-icon{% for topic in topics %} {{ topic.slug }}{% endfor %}"></div>
<img src="{{ post.featured_image }}" alt="{{ post.name }}">
<div class="resource-text">
<p class="r-type">
{% for topic in topics %}
{% unless topic == 'featured resource' %}
{{ topic.name }}
{% endunless %}
{% endfor %}
</p>
<h3 class="r-title">{{ post.name }}</h3>
</div>
</div>
{% endfor %}
</div>