Hoping someone can help with this...
We have two types of product in our store, outlet and premium.
On the checkout page, we are losing a large volume of sales as customers are trying to enter a discount code for items which are already heavily discounted.
Is it possible to create a Shopify Plus script that will..
Work out if the items in the cart are part of the outlet collection, or are tagged 'outlet'
If so, hide the discount code box
Seems simple but I can't find a good answer anywhere..
thanks!
Use checkout.liquid layout to remove that input based on current items in the cart.
{%- liquid
assign hideDiscountBox = false
assign productIdsToHideDiscountBox = "123456789012345,543210987654321,..."
for item in checkout.line_items
if productIdsToHideDiscountBox contains item.product_id
assign hideDiscountBox = true
break
endif
endfor
if hideDiscountBox
echo "<style>.order-summary__section--discount { display: none; }</style>"
endif
-%}
Related
I'm trying to find a way for the following:
I'm modifying a liquid template to also include found product variants on a search result page. But when I do the amount of visible products/product variants on a search results varies greatly and leads to bad UX.
We have a pagination break at 28 items. But this only factors in the amount of products it has already displayed. As I now show variants of the products as well, the pages have a very large amount of items on them. If I decrease the pagination limit to - let's say 4 - I end up with pages that have exactly 4 entries and pages that have let's say 500 entries depending on the matching variations for a given search term.
This is the overall goal:
Display product variants in the search result page as well as the default products and still have a correct pagination that display a fixed amount of products/variants/search result items per page.
My approach was this:
{% capture total_results %}
{%- for result in search.results -%}
{%- case result.object_type -%}
{%- when 'product' -%}
// Go over all the variants and match to the search terms
// Include product-grid-item template in case it matches
{%- when 'article' -%}
{%- when 'page' -%}
{%- endcase -%}
<!-- Divider: #### -->
{%- endfor -%}
{% endcapture %}
{% comment %}Break the captured string at the divider string into an array{% endcomment %}
{%- assign total_results = total_resuls | split: "<!-- Divider: #### -->" -%}
<div class="page__description page__description--centered">
<span>{{ 'search.general.results_count' | t: count: total_results.size, terms: search_terms }}</span>
</div>
{% paginate total_result by 28 %}
{% for result in total_resuls %}
{{ result }}
{% endfor %}
{% endpaginate %}
I get the following liquid error in the frontend: Array 'total_results' is not paginateable.
Is there a way to make it paginateble?
Or is there a way to modify the search.results collection directly so that the pagination doesn't only consider the amount of results from the shopify search but also the variations?
The reason we do this btw is that shopify does seem to find the products based on an information where only the variation matches. But in this case it only links to the product and the user whould need to go to the correct variation manually again which is very bad UX.
Even if the user searches by ID directly they get linked to the normal product page. And we want them to be linked directly to the correct variant that was the reason the product was included in the search results in the first place.
Any help would be appreciated. Or pointers on how else I could achieve this.
Unfortunately, there's no way to paginate through your array. paginate tag can only be used with search.results, collection.products on some other predefined objects.
The way you're trying to implement it doesn't seem possible to me. But here are a couple of ideas came to my mind that might help you:
Option 1. Use search.terms object to build a link to the correct variant. As the main issue is that Shopify search result
links to the product and the user would need to go to the correct variation manually
I would just suggest displaying search results as is but apply your logic from
// Go over all the variants and match to the search terms
to add a ?variant_id=xxx attribute to the search result URL. Then once customers get to the product page, the variant will be selected based on this query parameter. This logic would also perfectly suit the case when customers search by variant ID.
Option 2. Build custom search. It would require more efforts and implies not using the Shopify search at all. You would need to sync store products and return the paginated results from your database based on a query from the search form. This option would give you flexibility in displaying your product results.
I would go with option 1 if the only you want to do is select the correct variant based on the user's search query. But it may not work if you have multiple matching variants and you either want to display all of them separately or be able to redirect the customer to every matching variant from the results page.
P.S. Just a hint: you're using {%- when 'product' -%} block to filter product results only, but you can use ?type=product in your query to search only through products entities, ignoring articles and pages.
Maybe you can try this app https://apps.shopify.com/ultimate-search-and-filter-1 to show variants as separate products on Collection and Search result page without affecting the paginiation in Shopify.
Greetings Shopify Pals!
I have a website at: https://www.blakesseedbased.com/ (password: TopSecretPass)
The Goal:
We will have products that vary in quantity and would like to display this quantity information between the product title and price from the featured home page products (raspberry, chocolate chip, pineapple).
The Issue:
Currently we're able to add content to this area, but we cannot seem to get the if else statement to work correctly. We have a collection called "Snack Bars" however our logic isn't recognising this and injecting the proper code. We tried changing the collection Snack Bars to lower and uppercease snack-bars/Snack-Bars but no luck.
The Logic:
IF the product item is from the Snack Bar collection, add the box quantity (box of 12).
Else, add "no quantity"
The Code:
{% if product.collections contains 'snack-bars' %}
<span>Box of 12</span>
{% else %}
No Box Amount
{% endif %}
Thanks in advance!!
Greetings Birdie Golden!
The issue you're hitting is that product.collections is an array of Collection objects when you're accessing it in Liquid, and no collection object will ever equal a string value.
Luckily, we can easily create an array of handles using the map filter and assign that to a variable, like this:
{% assign collection_list = product.collections | map: 'handle' %}
{% if collection_list contains 'snack-bars' %}
...
The map filter above will create a new array using just the value that you pass it, so the collection_list variable will be an array of just-the-handles. Since handle is a string, we can use contains as expected to see if the value we want is in the list.
Hope that helps!
I'm working on a Shopify store that wants engraving added to their products for a $25 up-charge. I have set it up so that a checkbox on the product page triggers an engraving dropdown where the user can customize the engraving (type style, text, and symbols) and all of those values are passed as line item properties. The checkbox also adds an additional engraving product to the cart that costs $25 to account for the up-charge and has the same exact line item properties. I realize that both products having the same exact line item properties is a perfect way for them to be linked to ensure that if the original product is removed from the cart, the linked engraving product will be removed as well. But I can't for the life of me figure out the way to accomplish this.
I wrote this Liquid code which effectively removes the engraving product from the cart if it is the only item in the cart.
{% if cart.item_count == 1 %}
{% for item in cart.items %}
{% if item.title == 'Custom Engraving' %}
<script>
$.post('/cart/change.js', { quantity: 0, id: {{ item.id }} });
$("#cart_form").submit();
</script>
{% endif %}
{% endfor %}
{% elsif cart.item_count > 1 %}
Please help with the code that supposed to go in here
{% endif %}
But what if there are 2 engraved jewelry products in the cart? If a user removes one of them, they will be left with 2 $25 engraving products and only one jewlery product. I need to automatically remove the associated engraving product for any jewelry product that is removed from the cart. Please help!
Note: A user seems to have a way to do this based on a couple forum answers I found. This one (https://ecommerce.shopify.com/c/ecommerce-design/t/conditional-logic-for-variants-based-on-line-item-properties-264417) he says " In the cart itself, the only thing you need to do is ensure that if the product itself is removed, you also remove the customization product. No biggy. That is a simple pattern and you can jazz it up too. Group a product with a customization through the properties for example, ensuring the two are "glued" together." That's exactly what I need! But unfortunately he doesn't share the simple pattern he's speaking of. He seems to have answered it on stack overflow as well (Chang the product price when custom checkbox is selected in Shopify) and again doesn't reveal the simple pattern he refers to.
Thanks in advance!
Short Answer:
Make the customization products different by adding a hidden property to make them unique.
Longer Answer:
When adding the product to the cart, generate a unique value - using the current date/time (via Date.now()) is usually a good choice. When adding the product to the cart, make sure this property is added as well (probably via hidden input).
Make sure that the name of extra property is prepended with an underscore - so something like '_uniqueID' - Shopify's checkout page knows to hide any line-item properties that have an underscore as their first character
Finally, make sure your theme knows to not display underscored properties in the cart. My favourite way to do this is by adding the following line at the beginning of your properties-printing loop (usually written as 'for p in item.properties')
{% if p.first.first == '_' %}{% continue %}{% endif %}
Now you have a unique ID field as a line-item property that only you can see, and can use that field to synchronize quantities, etc. Huzzah!
I'm new in Shopify and looking for suggestions to implement a specific size chart to add product page. Adding some code in sections->product-template.liquid to get size chart using this code to filter with the product.type
{% if product.type == 'mens' %}
// put your tank top sizing chart here
{{ pages.mens-size-chart.content }}
{% endif %}
{% if product.type == 'women' %}
// put your tank top sizing chart here
{{ pages.women-size-chart.content }}
{% endif %}
This work but, I don't want to filter with the product.type .There is any way to add some dropdown in admin new product panel and get this filed to show size chart without adding any app its possible.
Here is the step by step documentation to add size chart to product pages.
Shopify create size chart
I can think of at least 5 approaches you can use in this case.
Section
Create a section for the product with blocks.
Each block will have the following fields:
product field, where you will select the product
page field, where you will select the page you want
Then loop the blocks and look if the product field is equal to the product handle and use that page
Link List
Create a link list with products.
The title will be the page handle and the url will be the product.
You loop each link in the navigation and check if it's url is equal to the product handle. If yes, you use it's title to get the page content.
Prefix pages
Since you are creating pages based on the type, you can prefix them. So if the type is "mens" the page can be called product_mens and you will get the page based on the product type with the product_ prefix.
Settings
You can create a textarea with a similar syntax:
product-handle|page-handle
product-handle|page-handle
You use the filter newline_to_br, split the result by br, loop each item and split it by | and you got the product-handle and the page handle that you can check.
Tags
You can use prefixed tags, that can target the page. The same as the prefixed pages, here you create a tag with the page-handle and add some kind of prefix to it. Then you loop all of the tags and check if there is a page with any of the prefixed tags.
In shopify, I am creating 4 dropdowns.
Dropdown 1 - City
Dropdown 2 - Category of shops (such as Apparel, stationary etc)
Dropdown 3 - Shops available in the particular city and particular shop
Dropdown 4 - Items available in the particular shop
My requirement is, when a particular shop is selected (Dropdown 3) below the dropdown all the products in that shop should be listed (I will make the product part of collection and collection name will be same as shop name).
I realize that I need to use Ajax. I checked the APIs offered by shopify but somehow I am not able to connect dots. I am not able to use it. Can you please provide a pointer where it is explained how to achieve it.
Please note, i am new to web development and shopify.
EDITED*
I have created another template called "collection.alternate".
Tagged the collection to the new template.
In theme.liquid I have used the following code, to avoid header and footer from getting displayed in iframe
{% if template != 'collection.alternate' %}
{% include 'header-bar' %}
.....
{% endif %}
Used iframe to load the collection.alternate.
However in iframe the Header is still getting displayed. When I analyze the "Elements" in Chrome developer tools for the iframe, I see the header logic is generated for collection.template. How do I stop header from appearing in iframe.
You don't need AJAX for this functionality.
Each values in the four dropdowns should be added as tags in the products. Then you can use simple JavaScript command to change the url as required and display required products.
For ex., let's say you have New York as a City, and CK as a Shop. Now to display the products that are in CK store in New York, all the said products must contain New York and CK as tags. The final URL to display the said products will be - storename.myshopify.com/collections/all/new-york+ck
To call products from shopify collects you can simply use this loop:
{% for product in collections.shop_name.products limit: 4 %} /*********** shop_name is collections name limit is used to show no. of products ******/
<li><img src="{{ product.featured_image | product_img_url: 'medium' }}" alt=""></li>
{% endfor %}
Below is the link to shopify article that describes how to filter products based on tags.
https://docs.shopify.com/support/your-store/collections/filtering-a-collection-with-multiple-tag-drop-down
Thanks #Hymnz for guiding me to the article.
Just mention your collection name in collection array index
{% for product in collections['collection-name'].products %}
{{product.name}}
{% endfor %}