So I am wondering how I can change the image under an accordion section for just one product page and not the others. I see in the code of the product page template where the image is located but I am not experienced enough to know how to change it for just the one product. Is there a way to do this without needing to create a whole new template?
Website: https://auntethels.com (I'm trying to change the image under "heating instructions" for just the Lentil Chili Pot Pie product page)
Not sure if it helps but here is the code snippet I found: 1
(I need the 'directions.png' to be different for just the one page.)
I've been able to make other changes she needed but this one has stumped me :( I tried to reach the developer who made the custom site but he has stopped replying so I'm on my own for this one.
you can conditionally render the accordion with product handle
{% if product.handle == 'cumin-lentil-pot-pie-vegetarian'%}
<div class="accordion">
<h4>Heating Instructions</h4>
<button class="x">✕</button>
<p class="answer"><img src="//cdn.shopify.com/s/files/1/0332/6997/3128/t/15/assets/directions.png?v=63874448465039500411650314323" alt="Directions"></p>
</div>
{% endif %}
Related
i want to get cart.total_price and cart.count_item at header.liquid section.
But in my code, it's only render 1 time and not change if i'm add new product to cart.
Below is my code.
<div class="announcement-bar">
<div class="announcement-bar__value">{{ cart.total_price | money }}</div>
</div>
Thanks
This is because the liquid is not dynamic. You need to use Shopify Cart API to manually update the cart or implement your own logic to listen to changes:
https://shopify.dev/api/ajax/reference/cart
It looks like the question you are asking was already answered here:
https://stackoverflow.com/a/23503789/6110804
I am completly miffed. I'm new to using liquid but not new to programming, it's my day job. Below we have a snippet of the product-template.liquid file. Hopefully, it looks familiar to folk rather than me pasting the whole file. That being said, here's a link to a paste of it.
{% else %}
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
{% endunless %}
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
I wanted to add a footer onto descriptions as there's some copy pasted text at the bottom of every product description.
So I changed the above to the the following:
{% else %}
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
{% endunless %}
<p>Here's my footer text.</p>
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
This seemed to do the job until I noticed the duplication of the review sections. The content of the <p> tag was in between the two review sections prior to this screenshot:
I removed the <p> tag so that it was back to its original state. However, the review duplication is still there.
Inspecting the page shows one review section nested in the product description div and another one outside of it.
To make matters worse, this issue doesn't seem to be repeatable as far as I can see. I've looked at a product where there is the duplication and another product where there isn't duplication, yet no difference as far as I can see.
Either I'm completely blind in what I returned the code too or maybe Shopify takes time to propagate these changes to templates to each product?
It's worth mentioning, maybe, that I did these code changes using their site code editor.
Update 1
I've worked out the repeatable part. I'm making these changes whilst my partner is creating her products for the site. By my estimations the code changes I made and the products she's added after that point have the review duplication. It seems to be that products prior do not exhibit the duplication issue.
Update 2
Update 1 might not be the case. I duplicated a product where there was not a duplicate review section. The duplicate also showed that there was just one review section. Time of creation doesn't seem to have an impact.
I am trying to customize Supply theme in shopify In theme.liquid file and i can see {{ content_for_layout }} which loads slider, featured collection etc.Now I want to remove slider from that section.Can anyone suggest which file I should check ?
Please find for setting_data.json there you can find all declared values. There you can search for "content_for_index".
I have a Shopify product with a metafield.
The metafield returns extra information about the product to the product page.
In particular, it returns a table of contents (product features) in a tab format - see example image below.
I want the metafield to return a specific product image as well and format this in the table.
The reason I want to do it this way is that I want to use an image map (https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap) on the product image so that when a user clicks on a product feature on the image, the table row with the relating information will be highlighted.
Below is an example of what I mean.
The DETAILS tab is a getting its information from this metafield that has 2 columns - as per the code below.
The left column (1) should return a specific product image and the right column (2) is a table with the related information - so when the user clicks on the image callout (3) the related table row is highlighted (3).
My code looks as below in the metafield.
But it just renders the liquid code - not the image.
Can metafields process liquid code or can Shopify process the liquid code after it is passed from the metafield?
Or whats the best way to do this?
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-6"><!-- Image column START -->
{% for image in product.images offset:9 limit:1 %}<!-- Show specific image START -->
<img src="{{ image.src | product_img_url: 'master' }}">
{% endfor %}<!-- Show specific image END -->
</div><!-- Image column END -->
<div class="col-sm-12 col-md-12 col-lg-6"><!-- Details column START -->
<table id="product-table">
<tr>
<td>Rear view mirror</td>
</tr>
<tr>
<td>ABS Brakes</td>
</tr>
<tr>
<td>6 Speed Transmission</td>
</tr>
<tr>
<td>Lowerd Seat Height</td>
</tr>
</table>
</div><!-- Details column START -->
</div>
Your question is a little awkward but I will try and make a clear answer for you.
A Metafield is just a resource you assign to another resource. So in your case, a product will have some resources assigned to it. They can be strings, integer numbers or JSON. So that means your metafield can provide you with lots of extra data. An image is probably not a great candidate for Metafields. You have product images, and variant images. Hooking in other images is just asking for hard-coded trouble. You can do it, but it is a lot of responsibility to organize your images as file assets and get at them properly. Not fun. Not easy.
So when Shopify parses Liquid in your template, it is going to produce a gigantic string of HTML. That gigantic string of HTML is your Shopify store, and it goes out to the web browsers of your customers. So at the same time as Shopify turns your product.liquid into HTML, it also obeys any commands to render Metafields you select. That means you get even more data to place into your HTML. It is up to you to be organized about this. Usually you render your gigantic string of HTML then let the Javascript you include wire up click listeners and other mundane actions.
In your case, your question is not so much about Liquid and Metafields, but how to render your gigantic Shopify webpage, and then hook up the right Javascript. Since there is zero about that in your question, I will leave you with the answer that in order to make your motorcycle magic, you need to do some scripting in Javscript, and perhaps a touch of clever DOM work while Liquid renders.
I am editing product template on my Bigcommerce website and i am stuck at related products section.
Panel called "SideProductRelated.html" (inside Panels directory) is in charge for that section but the items themselves are being pulled by "%%SNIPPET_SideProductsRelated%%".
Aka, the code looks like this:
<div class="Block SideRelatedProducts Moveable Panel" style="display:%%GLOBAL_HideRelatedProductsPanel%%" id="SideProductRelated">
<h2>%%LNG_RelatedProducts%%</h2>
<div class="BlockContent">
<ul class="ProductList">
%%SNIPPET_SideProductsRelated%% <-- this is calling the items
</ul>
</div>
</div>
But, i searched and searched, and i cant find that snippet anywhere...
Anybody knows where that little dude hidden himself?
Thanks!
Even though the Panel SideProductRelated calls for %%SNIPPET_SideProductsRelated%%, you are looking for the SideRelatedProducts snippet which would be found in Snippets/SideRelatedProducts.html.