I am working with a page that has multiple h1's, the reason is becuase feature products have a h1 in their title.
This is what's inside featured-product.liquid, the rest is schema
{%- if section.settings.divider -%}<div class="section--divider">{%- endif -%}
{%- assign product = all_products[section.settings.featured_product] -%}
{%- if product != blank -%}
{%- render 'product-template',
product: product,
section_id: section.id,
blocks: section.blocks,
image_position: section.settings.image_position,
image_container_width: section.settings.image_size,
product_zoom_enable: section.settings.product_zoom_enable,
sku_enable: section.settings.sku_enable,
thumbnail_position: section.settings.thumbnail_position,
thumbnail_arrows: section.settings.thumbnail_arrows,
mobile_layout: section.settings.mobile_layout,
video_looping: section.settings.enable_video_looping,
video_style: section.settings.product_video_style,
is_recommendation: true
-%}
{%- endif -%}
It seems that I am simply telling the code what information to take, but how can I make that only in this area the title has a h2? I have been researching for hours on this topic, but I can't find much information.
I am working with the impulse template
inside featured-product.liquid you see the code of:
{%- render 'product-template',
......
-%}
which is referring that you are including a snippet called 'product-template' so on folder snippets you will find a file called product-template.liquid, open that file, and you will find the <h1> you can change it to <h2> if you want
if you want to keep product-template.liquid to keep using <h1>on some other places, then:
Duplicate this snippet product-template.liquid to make new-product-template.liquid and on the new-product-template.liquid change the <h1> to <h2>
Inside featured-product.liquid use the duplicated snippet new-product-template.liquid so it will be: {%- render 'new-product-template', ..... -%}
Related
So I am trying to solve a bad Schema implementation and I am not very familiar with Liquid. I got the Schema to work on the variant URL as it was not correct and giving a 404 but now the products without variants are getting flagged.
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
"url": {{ request.path }}{{ variant.url}}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
enter image description here
So I want something to pull the variant URL but when they're not a variant URL it should not generate by itself.
Looking forward to hearing from you folks!
I was not expecting it to pull variant URLs on products where there is none but I guess this is what the code says so it is expected.
I am new to shopify liquid, I am trying to get a specific collection to be output to page, but i not sure why liquid part is not functioning. The text is displaying and page.content works but nothing work on for loop
page name is "page.test.liquid"
I'm using this for a template for page called monthly products
{%- assign collection = collections['past-crates'] -%} <-- always add this if not in collection page, and make sure you set collection properly
{{ page.content }}
{%- assign collection = collections['past-crates'] -%}
{%- for product in collection.products -%}
{{product.title | capitalize}}
{%- endfor -%}
The collection object is nil unless you are on a collection page. If you want to access a specific collection object on another page you can access it via the global collections object:
{%- assign collection = collections['your-collection-handle'] -%}
I have create many collections like All Products, New Releases, T-Shirts, Pants etc. And I have two categories of products like Men's and Women's. Some collections specifically for Men's and some collections specifically for Women's. I create two tags Men's and Women's. I create menu by collections query by tags. My my products collection url is like this:
/collections/all-products/mens
/collections/all-products/womens
/collections/new-releases/mens
/collections/new-releases/womens
/collections/bras/womens
I want to show some text and menu list when collection.url show /mens or /womens.
{% if collection.url contains mens %}
do something
{% endif %
Above condition not working. I know why not working because {{ collection.url }} provide /collections/all-products. {{ page.url }} will not work for collection object. I haven't find any suggestion or liquid code reference where show men's or women's products in collections page it will show specific text.
If use in loop it will work.
{% for product in collection.products %}
{% for tag in product.tags %}
{% if tag contains 'mens' %}
<h3>Mens Products</h3>
{% endif %}
{% endfor %}
{% endfor %}
Above code will not work for me because it's inside loop. I need to show outside of loop. I don't understand how to achieve it. here is the reference site. Below have image how I want.
Need help!
You have access to the current_tags, refer to docs: https://shopify.dev/docs/themes/liquid/reference/objects/current-tags
This will return an array of all the tags you are viewing at the moment (in case you are viewing more than one tag).
So your check will be:
{% if current_tags contains 'mens' %}
do something
{% endif %}
That's pretty much the just of it.
I really like how the menu is coming along! Here are some ideas you could consider for your category specific menu, if you've not gotten where you want yet.
For your url strategy, what you're looking for is handle. Handles are specific to liquid. https://shopify.dev/docs/themes/liquid/reference/basics/handle
You could make a custom collection template if those 2 categories need to be fairly different: https://shopify.dev/tutorials/customize-theme-create-alternate-templates. If you do that, then you can use template_prefix from the collection object.
Assign a variable outside your loop and then set it inside the loop like:
{% assign is_mens = false %}
{% for tag in product.tags %}
{% if tag contains 'mens' %}
{% assign is_mens = true %}
{% endif %}
{% endfor %}
then {% if is_mens %} or {% unless is_mens %} for your dynamic content, or a case statement to define content specific to categories in your menu.
Hope this helps!
I am developing a shopify theme, i have created mini cart page as shown in this image, my website is: https://codeinspire-dev2.myshopify.com/cart
I am using vue.js for controling this mini cart page data, i have called
axios.get('/cart.js') for populating it with data, that call gives me cart object with all items on it, but there is no
inventory_quantity property there. User can change quantity on mini cart page, but i can't check if the product quantity on mini cart page gets bigger then it's inventory_quantity. How can i do that. Any help is appreciated.
You have two options.
Option 1.
As cart JSON object doesn't provide information about variant inventory quantity available, you need to create such an object manually in the theme template. See the code below that will give you an idea how to get inventory quantity available for the items in your cart:
{%- assign cart_items_count = cart.items | size -%}
var cartItemMaxQuantities = {
{%- for item in cart.items -%}
"{{ item.id }}": {{- item.variant.inventory_quantity -}}
{%- unless forloop.index == cart_items_count -%},{%- endunless -%}
{%- endfor -%}
};
This will create a JSON object that you can use in your JS logic on adjusting cart items quantity. The object would look like that:
{
variant_id_1: max_available_quantity,
variant_id_2: max_available_quantity,
...,
variant_id_x: max_available_quantity
}
If you need to get updated object on adding/removing cart items using AJAX - create a new page template e.g. page.max-qtys.liquid to output this JSON object. Then on adding/removing items, you can get the updated object by requesting any page on your website and adding a ?view=max-qtys query param e.g. /pages/about?view=max-qtys. Don't forget to add {% layout none %} at the beginning of the template file to prevent load your site layout file and just output the object JSON. Below is the code for the page template.
{%- layout none -%}
{%- assign cart_items_count = cart.items | size -%}
{
{%- for item in cart.items -%}
"{{ item.id }}": {{- item.variant.inventory_quantity -}}
{%- unless forloop.index == cart_items_count -%},{%- endunless -%}
{%- endfor -%}
}
Option 2
Use /cart/add.json on adding new items to the cart instead of /cart.update.json or /cart/change.json. Shopify will respond with 422 status code and won't allow you to add more items than available if you use /cart/add.json endpoint.
Hello Shopify Developers.
I'm a newbie on Shopify. I want to build a menu just like http://www.nastygal.com/. It shows menu items and featured products in menu area.
Would you give me a suggestion how to make a menu like this?
I'm not sure this is the best idea, though I think that I can create special collections to assign menus. I want to add a custom field in collection page to assign category to special menu. I noticed that I may use meta-fields for this but not sure.
How to add meta-fields to description fields in collection admin page?
How to get values from meta-fields in front page?
I'm open for suggestions, please teach me.
Best regards, Lorant.
I'd say there was a couple of steps to making this work, but it shouldn't be hard.
Create a collection that contains the products in it that you would like to show in the menu.
In your navigation link list create a link that points to collection you want to show in the menu. Call it something like show-products.
The menu liquid would look something like this:
{% assign linklist = linklists.main-menu %}
{% for link in linklist %}
{% if link.title == 'show-products' and link.type == 'collection_link' %}
{% assign menu_collection = link.object %}
{% for menu_product in menu_collection.products %}
{{ menu_product.featured_image | product_img_url: 'compact' | img_tag: menu_product.title }}
{{ menu_product.title }}
{% endfor %}
{% else %}
{% include 'my-normal-menu-link' with link %}
{% endif %}
{% endfor %}
Note: this code is untested, but I don't see why it wouldn't work.