Product Image in mega menu
I am build a megamenu in Shopify that will show a mix of collection image, product images and a generic image for any other link that might be in there.
Currently the collection image displays fine and the generic image, but having some trouble getting the product image to display. My code for the mega menu is show below:
<ul class="megaMenu">
<div class="megaMenuWrapper">
{% for child_link in link.links %}
<li {% if child_link.active %}class="active {% if child_link.child_active %}child-active{% endif %}"{% endif %}>
<a href= "{{ child_link.url }}">
{% if child_link.type == "collection_link" and child_link.object.image %}
<div class="menuImage" style="background-image: url('{{ child_link.object.image | img_url: '500x' }}')"></div>
{% elsif child_link.type == "product_link" and child_link.object.image %}
<div class="menuImage" style="background-image: url('{{ child_link.object.image | img_url: '500x' }}')"></div>
{% else%}
<div class="menuImage" style="background-image: url('https://cdn.shopify.com/s/files/1/0924/5464/files/map_macarons_paris.jpg?1158498038497005180')"></div>
{% endif %}
<span>{{ child_link.title }}</span>
</a>
</li>
{% endfor %}
</div>
</ul>
Any ideas on what might be wrong are welcome.
image e-commerce shopify liquid
asked Nov 15 '18 at 10:47
Ben ThompsonBen Thompson
1181310
add a comment |
I am build a megamenu in Shopify that will show a mix of collection image, product images and a generic image for any other link that might be in there.
Currently the collection image displays fine and the generic image, but having some trouble getting the product image to display. My code for the mega menu is show below:
<ul class="megaMenu">
<div class="megaMenuWrapper">
{% for child_link in link.links %}
<li {% if child_link.active %}class="active {% if child_link.child_active %}child-active{% endif %}"{% endif %}>
<a href= "{{ child_link.url }}">
{% if child_link.type == "collection_link" and child_link.object.image %}
<div class="menuImage" style="background-image: url('{{ child_link.object.image | img_url: '500x' }}')"></div>
{% elsif child_link.type == "product_link" and child_link.object.image %}
<div class="menuImage" style="background-image: url('{{ child_link.object.image | img_url: '500x' }}')"></div>
{% else%}
<div class="menuImage" style="background-image: url('https://cdn.shopify.com/s/files/1/0924/5464/files/map_macarons_paris.jpg?1158498038497005180')"></div>
{% endif %}
<span>{{ child_link.title }}</span>
</a>
</li>
{% endfor %}
</div>
</ul>
Any ideas on what might be wrong are welcome.
image e-commerce shopify liquid
asked Nov 15 '18 at 10:47
Ben ThompsonBen Thompson
1181310
add a comment |
I am build a megamenu in Shopify that will show a mix of collection image, product images and a generic image for any other link that might be in there.
Currently the collection image displays fine and the generic image, but having some trouble getting the product image to display. My code for the mega menu is show below:
<ul class="megaMenu">
<div class="megaMenuWrapper">
{% for child_link in link.links %}
<li {% if child_link.active %}class="active {% if child_link.child_active %}child-active{% endif %}"{% endif %}>
<a href= "{{ child_link.url }}">
{% if child_link.type == "collection_link" and child_link.object.image %}
<div class="menuImage" style="background-image: url('{{ child_link.object.image | img_url: '500x' }}')"></div>
{% elsif child_link.type == "product_link" and child_link.object.image %}
<div class="menuImage" style="background-image: url('{{ child_link.object.image | img_url: '500x' }}')"></div>
{% else%}
<div class="menuImage" style="background-image: url('https://cdn.shopify.com/s/files/1/0924/5464/files/map_macarons_paris.jpg?1158498038497005180')"></div>
{% endif %}
<span>{{ child_link.title }}</span>
</a>
</li>
{% endfor %}
</div>
</ul>
Any ideas on what might be wrong are welcome.
image e-commerce shopify liquid
asked Nov 15 '18 at 10:47
Ben ThompsonBen Thompson
1181310
I am build a megamenu in Shopify that will show a mix of collection image, product images and a generic image for any other link that might be in there.
Currently the collection image displays fine and the generic image, but having some trouble getting the product image to display. My code for the mega menu is show below:
<ul class="megaMenu">
<div class="megaMenuWrapper">
{% for child_link in link.links %}
<li {% if child_link.active %}class="active {% if child_link.child_active %}child-active{% endif %}"{% endif %}>
<a href= "{{ child_link.url }}">
{% if child_link.type == "collection_link" and child_link.object.image %}
<div class="menuImage" style="background-image: url('{{ child_link.object.image | img_url: '500x' }}')"></div>
{% elsif child_link.type == "product_link" and child_link.object.image %}
<div class="menuImage" style="background-image: url('{{ child_link.object.image | img_url: '500x' }}')"></div>
{% else%}
<div class="menuImage" style="background-image: url('https://cdn.shopify.com/s/files/1/0924/5464/files/map_macarons_paris.jpg?1158498038497005180')"></div>
{% endif %}
<span>{{ child_link.title }}</span>
</a>
</li>
{% endfor %}
</div>
</ul>
Any ideas on what might be wrong are welcome.
image e-commerce shopify liquid
image e-commerce shopify liquid
asked Nov 15 '18 at 10:47
Ben ThompsonBen Thompson
1181310
asked Nov 15 '18 at 10:47
Ben ThompsonBen Thompson
1181310
asked Nov 15 '18 at 10:47
Ben ThompsonBen Thompson
1181310
asked Nov 15 '18 at 10:47
Ben ThompsonBen Thompson
1181310
asked Nov 15 '18 at 10:47
Ben ThompsonBen Thompson
1181310
1181310
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Products doesn't have an image object, it has a featured_image or images.
So you should call {{ child_link.object.featured_image | img_url: '500x' }} instead.
The same applies for your if check where you check if the image is present.
answered Nov 15 '18 at 14:49
dripdrip
5,96411534
Works perfectly. Thanks.
– Ben Thompson
Nov 15 '18 at 18:06
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317714%2fproduct-image-in-mega-menu%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Products doesn't have an image object, it has a featured_image or images.
So you should call {{ child_link.object.featured_image | img_url: '500x' }} instead.
The same applies for your if check where you check if the image is present.
answered Nov 15 '18 at 14:49
dripdrip
5,96411534
Works perfectly. Thanks.
– Ben Thompson
Nov 15 '18 at 18:06
add a comment |
Products doesn't have an image object, it has a featured_image or images.
So you should call {{ child_link.object.featured_image | img_url: '500x' }} instead.
The same applies for your if check where you check if the image is present.
answered Nov 15 '18 at 14:49
dripdrip
5,96411534
Works perfectly. Thanks.
– Ben Thompson
Nov 15 '18 at 18:06
add a comment |
Products doesn't have an image object, it has a featured_image or images.
So you should call {{ child_link.object.featured_image | img_url: '500x' }} instead.
The same applies for your if check where you check if the image is present.
answered Nov 15 '18 at 14:49
dripdrip
5,96411534
Products doesn't have an image object, it has a featured_image or images.
So you should call {{ child_link.object.featured_image | img_url: '500x' }} instead.
The same applies for your if check where you check if the image is present.
answered Nov 15 '18 at 14:49
dripdrip
5,96411534
answered Nov 15 '18 at 14:49
dripdrip
5,96411534
answered Nov 15 '18 at 14:49
dripdrip
5,96411534
answered Nov 15 '18 at 14:49
dripdrip
5,96411534
5,96411534
Works perfectly. Thanks.
– Ben Thompson
Nov 15 '18 at 18:06
add a comment |
Works perfectly. Thanks.
– Ben Thompson
Nov 15 '18 at 18:06
Works perfectly. Thanks.
– Ben Thompson
Nov 15 '18 at 18:06
Works perfectly. Thanks.
– Ben Thompson
Nov 15 '18 at 18:06
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317714%2fproduct-image-in-mega-menu%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
