I want product title to be on the top of the price.
The answer is very specific to the theme you are using. You need to find which file is being used for product item. Generally its under "snippets" folder and named as "product-grid-item.liquid" ( it can be different in your theme )
Next you need to move your product title code in that file which looks like this
{{ product_title }}
Then you need to move that above the price tag code which may look like this
{{ featured.price | money }} or {{ product.price | money }}
You will need experience with html coding to make the changes properly.
Or you can download and share the theme files with me so that i can tell you exactly what changes you need done.
Related
I have duplicate products which offer same size or different size products with same title but vendors is different. I want to display products which ever cheaper in my website. So my website will always display products from one vendor only ( Which ever cheaper ). In product details page i want to check this logic to find the same title products from different vendors. I tried the below code . When i given the handle statically then it is showing other vendor products finely. I want to make it dynamic. Can anybody help me on this.
Now i want to display the lowest price product if available.
Product is having different sku,handle, price but title is same.
Please help me to show lowest price product.
{% assign some_handle = product.handle %}
{% assign custom_product = all_products[some_handle] %}
{{ product.title }} is {{ product.price | money }}, but {{ custom_product.title }} is {{ custom_product.price | money }}
i tried this code in product_template.liquid file but it is not working as expected.
I am using a plugin that filters products. This means that products are no longer shown in the traditional product loop. I think the plugin has switched to using javascript to show products on the collection page rather than liquid.
For every product on a collection page, I wish to show its colour. Each product has a colour associated with it using a custom field.
If I manually manually enter a product handle in the below code, the colour for the product handle that has been entered successfully displays for each product.
{{ all_products["MANUALLY ENTERED PRODUCT HANDLE"].metafields.custom_fields["colour"] }}
I am also able to dynamically able to get a products handle with {!productHandle!}
For some reason however when I put the two together like this:
{{ all_products["{!productHandle!}"].metafields.custom_fields["colour"] }}
The result is that nothing is shown.
My question is, how can I dynamically pull the product handle into the custom field? I have already tried
{{ all_products[product.handle].metafields.custom_fields["colour"] }}
and
{{ all_products[product-handle].metafields.custom_fields["colour"] }}
Try saving the handle as a string. Eg:
{% capture fizz %}{{product.handle}}{%endcapture%}
{{ all_products[fizz].metafields.custom_fields["colour"] }}
Note that all_products is also limited to just 20 products.
I'm new to Shopify and liquid (I have programming background). What i'm currently trying to achieve is adding some unique custom information in a HTML div into the product layout.
My approach: Because I couldn't directly edit the product.liquid file (was generating the same information for all products), I decided to make a hack, so I created liquid files into the snippets by joining the product id + product. The filename would look like "11598995151product.liquid".
Into the product.liquid, I then added the following:
{% if product.description %}<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 visible-xl" style="display:block !important">
{% assign z = x | append: product.id | append: "product" %}
{% include z %}
</div>{% endif %}
Is this the best practice or can it be done easier ?
I slightly confused, you can't directly update the product.liquid but yet you are adding an include there. So can you or you can't?
Here a few approaches how can you add custom unique information to products.
1) Use an metafeild application such as https://apps.shopify.com/metafields-editor where you can set fields for each product
2) Use shortcodes for example with this snippet https://github.com/culturekings/shopify-shortcodes
3) Create prefixed pages, for example you have a product with a handle test-1, and you will have a page with a handle product-test-1. You perform a check for each product if there is such a page.
4) Similiar to 3 but use a global navigation that will point to page, so that you don't have to prefix each one.
5) Use sections. Create blocks with a product field and a richtext field (or the information you need) and set the product and information for each product as blocks. Then on the product page you check if this product handle is equal to any of the block product field.
All of the above examples require you to modify the product.liquid page if you like for it to be unique for each product.
In my customized Shopify theme, a "Final Sale" message displays for any product that is 70% off using the following code:
{% assign finalSale = product.metafields.details.final_sale | upcase %}
{% if finalSale == 'TRUE' %}
<p style="color: #B21F1F;">
This item is final sale -- no returns or exchanges are accepted.
</p>
{% endif %}
I am trying to change this so it displays the Final Sale message when the product is 60% off. My theme is using the Metafields 2 app and I do see the active metafield called "final_sale" under the "Configure Product Metafields" page but I don't see where I can adjust the percentage that is assigned to this custom metafield...Does anyone know where I can find this?
The 60% figure isn't anywhere in this code, and isn't part of the theme at all. The percentage comparison is being done when the metafield gets assigned to TRUE. It's only possible to read metafields in liquid, though—you can't write to them there. You'd definitely need to look for code that sets the metafield elsewhere; perhaps as part of a custom app.
I don't think you need the metafield for this case at all, though. You could set up the logic right in liquid using product.price attributes and the math filters.
It would look something like this in liquid:
if compare_at_price | minus price | divided_by compare_at_price >= 0.6
One thing to pay attention to with this approach is Shopify's math filters rounding to the nearest integer at times, but you can fix that by multiplying by 100 before you start.
assign sale_amount = compare_at_price | minus price | times 100
assign adjusted_compare_price = compare_at_price | times 100
if sale_amount | divided_by adjusted_compare_price >= 60
The actual implementation might need to be a little more complex than this depending on how you use variants and variant pricing, plus this example can't handle the case where "price" is the original and "compare at" is the sale amount. Those can also be handled with liquid's logic. Here are the relevant liquid references to help you build this out further if needed:
https://help.shopify.com/themes/liquid/objects/product
https://help.shopify.com/themes/liquid/filters/math-filters
Each product has the custom fields options. Can I output those custom fields on each product item in the product list page? If so, how? I have tried adding the ProductOtherDetails and the %%SNIPPET_ProductCustomFieldItem%% in the CategoryProductsItem.html, but got no output at all of any of the items I have tried. Any suggestions or pointers on how and if this is possible?
As of September 2015, you can now access %%GLOBAL_ProductCustomFields%% on any template file that renders a particular panel's individual items. For example:
-Snippets/CategoryProductsItem.html for category list pages
-Snippets/HomeFeaturedProductsItem.html for the featured products panel
I recommend adding the custom field name as a class to each field for easy hiding, and accessing of the value in case the custom fields ever change you won't be accessing them via :nth-child CSS which would break. You can do so by modify Snippets/ProductCustomFieldItem.html to add the custom field name to the CSS class or ID like this:
<div class="DetailRow %%GLOBAL_CustomFieldName%%">
<div class="Label">%%GLOBAL_CustomFieldName%%:</div>
<div class="Value">
%%GLOBAL_CustomFieldValue%%
</div>
</div>
Doing so, will output like this in each item in the category list.
Above, I am using the custom fields to send through shipping time, as well as "Starting At" to prepend to the list page price if the item is a parent which has children of higher prices. In my opinion, these features greatly increase the user experience.
For Faceted Search (handlebars.js)
I recommend adding this to Panels/FacetedSearchProductGrid.html:
{{#each product.custom_fields}}
{{ id }} : {{ name }} : {{ value }}
{{/each}}
Those filters will be limited to the Product pages specifically. The only way around it is to hash together a solution using jQuery to go and fetch items in question from the product page. A pain, but do-able with unnecessary effort.