I already read the tutorial, documentary and looked for similar questions. I'm following instructions as I understood them, but I'm missing something here. I'm trying to add the possibility to add an image into a section. I can add an image in the backend, but it won't show.
The position the image with the id badges1 should be loaded:
{%- when 'badges' -%}
<div class="footer-block__details-content footer-block-badges {{ block.settings.alignment }}">
{%- if block.settings.badges1 != blank -%}
{{ block.settings.badges1 | img_url: '160x160', scale: 2 | img_tag: block.settings.badges1.alt }}
{%- else -%}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
</div>
{%- endcase -%}
The Setting:
{
"type": "badges",
"name": "Badges",
"settings": [
{
"type": "image_picker",
"id": "badges1",
"label": "Image"
},
{
"type": "image_picker",
"id": "badges2",
"label": "Image"
}
]
}
You are trying to call block in your template code and block is missing in your schema setting.
Use this code in your template code:-
{%- when 'badges' -%}
<div class="footer-block__details-content footer-block-badges {{ block.settings.alignment }}">
{%- if block.settings.badges1 != blank -%}
<img class="if1img" src="{{block.settings.badges1 | img_url: '160x160' }}" alt="{{block.settings.heading1}}" />
{%- else -%}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- if block.settings.badges2 != blank -%}
<img class="if1img" src="{{block.settings.badges2 | img_url: '160x160' }}" alt="{{block.settings.heading2}}" />
{%- else -%}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
</div>
Related
So, i try to help my friend with an online shop, but is a long time since i did anything in web-dev.
He has a navigation bar at the top with dropdown menues. There should be a picture when no menu is open and this pic should change when one is opened. I think i have to alter the header-desktop-nav.liquid. But i have to admit i do not really know where. Any suggestions?
I do think i have to change/add smth here:
<a href="{{ link.url }}" class="site-nav__link site-nav__link--underline{% if has_dropdown %} site-nav__link--has-dropdown{% endif %}">
{{ link.title }}
</a>
{%- if is_megamenu -%}
{%- assign previous_column_type = '' -%}
{%- assign animation_column = 1 -%}
<div class="site-nav__dropdown megamenu text-left">
<div class="page-width">
<div class="grid{% if dropdown_alignment == 'center' %} grid--center{% endif %}">
<div class="grid__item medium-up--one-fifth appear-animation appear-delay-{{ animation_column }}">
{%- assign animation_column = animation_column | plus: 1 -%}
{%- for childlink in link.links -%}
{%- liquid
assign create_new_column = false
if childlink.levels > 0 and forloop.index != 1
assign create_new_column = true
endif
if childlink.levels == 0 and previous_column_type == 'full'
assign create_new_column = true
endif
-%}
I am attempting to create a quick add button to a product on a custom page template using Shopify liquid. The product has several variants and I would like to assign a specific variant to this product; Namely the second variant.
For the sake of example, let's say my variant ID would be 456. So, basically, I want to be able to display the product with an id of 123, shown below. And I want the quick add to be assigned to the variant id 456. Is there a way to do this using the variant ID? Below is a sample of my loop.
Any help would be appreciated!
{%- assign my_products = collections['collection-handle'] -%}
{%- for product in my_products.products -%}
{%- if product.id == 123 -%}
{%- assign product_form_id = 'quick-add-' | append: section_id | append: product.id -%}
{%- if product.variants.size > 1 -%}
{%- form 'product', product, id: product_form_id, class: 'actions__form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled />
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="add__button"
data-variant_id="{{ product.selected_or_first_available_variant.id }}"
aria-label="Add to cart - {{ product.title | escape }}"
>
<span>Add</span>
</button>
{%- endform -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
inside your product loop you can get variant like this and filter variant according to their variant id or tags.
{% for variant in product.variants %}
{% if variant.id == 456 %}
{% else %}
{% endif %}
{% endfor %}
I'm just getting used to liquid and can't for the life of me figure out how to input the code to assign a color for each row in an accordion style collapsible menu.
I've managed to make the schema for the theme editor but can't get it to control the liquid.
I'm thinking it belongs where I've written [HERE] below but have no idea. If anyone could help I would super appreciate it!
Code below:
{% endif %}
<div class="grid__item">
{%- for block in section.blocks -%}
[ HERE?? ]
<div class="accordion{% if section.settings.layout == 'row' %} content-container color-{{ section.settings.row.color }} gradient{% endif %}" {{ block.shopify_attributes }}>
<details id="Details-{{ block.id }}-{{ section.id }}"{% if section.settings.open_first_collapsible_row and forloop.first %} open{% endif %}>
<summary id="Summary-{{ block.id }}-{{ section.id }}">
{% render 'icon-accordion', icon: block.settings.icon %}
<h3 class="accordion__title h4">
{{ block.settings.heading | default: block.settings.page.title }}
</h3>
{% render 'icon-caret' %}
</summary>
<div class="accordion__content rte" id="CollapsibleAccordion-{{ block.id }}-{{ section.id }}" role="region" aria-labelledby="Summary-{{ block.id }}-{{ section.id }}">
{{ block.settings.row_content }}
{{ block.settings.page.content }}
</div>
</details>
</div>
{%- endfor -%}
</div>
Schema I created:
{
"type": "color",
"id": "row_color",
"default": "#FFFFFF",
"label": "Row Color",
"info": "Changes color for this individual row"
},
You can access the section block schema data like this:
{{ block.settings.id }}
id is the ID you defined for the specific setting, in this case it would be row_color.
In conclusion:
{{ block.settings.row_color }} // Returns either your default value `#ffffff` or the one selected in the customizer
{% for block in section.blocks %}
{% for image in product.images %} {{ image.src | product_img_url: 'grande' }} {% endfor %}
{{block.settings.product.title}}
{{all_products[product].price | money_without_trailing_zeros }}
{% endfor %}
{% schema %}
{
"name": "Demo",
"blocks": [
{
"type": "new-arrival",
"name": "New Arrival",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
}
]
}
]
}
{% endschema %}
Can anyone tell me how can I call multiple product images, product details, and product prices on the section page?
Here some code that I try but it's not correct.
Thank You for guide Onkar. I update a little bit now it properly works.
{% for block in section.blocks %}
{% assign product = all_products[block.settings.product] %}
{% for image in product.images %}
<img src="{{ image.src | product_img_url: 'grande' }}" >
{{product.title}}
{{ product.price | money_without_trailing_zeros }}
{{product.description}}
{% endfor %}
{% endfor %}
when using the input type product into Shopify schema, you need to use the all_products object to get the details of the selected product, you need to get the details and assign it to a variable, something like this one.
{% assign product = all_products[block.settings.product] %}
Then you can use the other properties of the same object. so your code is looking.
{% for block in section.blocks %}
{% assign product = all_products[block.settings.product] %}
{% for image in product.images %}
<!-- list images -->
{{ image.src | product_img_url: 'grande' }}
<!-- product title -->
{{product.title}}
<!-- product price -->
{{ product.price | money_without_trailing_zeros }}
<!-- product description -->
{{product.description}}
{% endfor %}
{% endfor %}
{% schema %}
{
"name": "Demo",
"blocks": [
{
"type": "new-arrival",
"name": "New Arrival",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
}
]
}
]
}
{% endschema %}
You can check and read more about object all_products Link
I'm using Shopify and am trying to add the options to add gift wrap and a carry case to products being bought.
I can use the item.properties to ask the user for the choice and show that in the cart.
I now want to add an additional product to the cart if item.properties is set to "gift wrap" or "carry case".
This code is placed in the product-template.liquid but does not work:
{% for property in item.properties %}
{% if property.last == "Gift Wrap" %}
<p>This would add gift wrap.</p>
<script>
jQuery.post('/cart/update.js', {
updates: {
32005672697928: 1
}
});
</script>
{% endif %}
{% if property.last == "Carry Strap" %}
<p>This would add carry strap.</p>
{% endif %}
{% endfor %}
{% endunless %}
Doesn't seem the code you have was intended to be used on the product page. It looks like it should be placed on the cart page within the {% for item in cart.items %} ... {% endfor %} loop.
Also, this code will add only 1 wrap product, even if customers add 2+ wrapped items. I would change the code to something like the below:
{%- assign numWrappedItems = 0 -%}
{%- for item in cart.items -%}
{%- for property in item.properties -%}
{%- if property.last == "Gift Wrap" -%}
{%- assign numWrappedItems = numWrappedItems | plus: item.quantity -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
...
{%- endfor -%}
{%- if numWrappedItems > 0 -%}
<script>
jQuery.post('/cart/update.js', {
updates: {
32005672697928: {{ numWrappedItems }}
}
});
</script>
I hope the above makes sense.