Shopify themes, liquid, logos, and UX
Hi,
We have a trade b2b & b2c store using Dawn Theme where we hide prices of products from a brand ‘Dahua’ until an approved customer is logged in.
For this Customers have to register an account and when we’ve done our checks, we approve the account by adding a tag to the customer “trade5” and then they can see prices of Dahua products and place orders for them.
So here is the conditional logic I’m trying to apply;
Do nothing
Else
Apply CSS style “display: none“ to necessary classes.
For every other brands and products customer must be able to see prices and buy products as normal.
I’ve come up with the following code and it works on product pages but the dual condition doesn’t work on home page and collection pages. If I remove the 2nd condition (Vendor if statement), it works everywhere but then it’s applying the style to all brands and products.
===========
{% assign customersTagsDowncased = customer.tags | downcase %}
{% assign ProductsVendorDowncased = product.vendor | downcase %}
{%- if customersTagsDowncased contains 'trade5' -%}
{%- else -%}
{%- if ProductsVendorDowncased contains 'dahua' -%}
<style>
.product-form__buttons, .price__container, .product__tax, .product-form__input, .card-information, .quick-add {
display: none !important;
</style>
{%- endif -%}
{%- endif -%}
==================
It fails on homepage and collection pages every time I have more than 1 conditional logics.
I’ve tried using product tags instead of vendor and other approaches like using 'unless' and 'for' tags too - like the one below but they also fail.
=================
{% unless customer.tags contains "trade5" %}
{% if product.vendor contains "dahua" %}
<style>
.product-form__buttons, .price__container, .product__tax, .product-form__input, .card-information, .quick-add {
display: none !important;
</style>
{% endif %}
{% endunless %}
=======================
Someone please tell me where I’m going wrong and how to fix it? or if there is a better approach to achieve this without apps.
Preview Store link: https://crwisj4ojn26fg0n-66693726439.shopifypreview.com
Thanks,
NS
Solved! Go to the solution
This is an accepted solution.
If you want to code at one place only then make a new file with the code above.
Now render the file via passing variable as object.
{% render 'filename' product: card_product %}
You have to write above line of code separately on main-product and card-product with appropriate variable.
This is an accepted solution.
For those looking to do the same and want full solution, here it is.
Solution
This solution allows you to hide prices for products of any brand (vendor) unless an approved customer is logged in - It's for Dawn Theme but should work on all themes as long as you match the CSS classes.
Pre-Requisits: You must approve the customers by adding a tag, in this example the tag is "approved".
Part 1 (One time - should work with theme updates unless the css classes change)
Goto Themes > Customize >
On Top centre > Click Home Page > Choose Product > Default Product
On left pane in Template section, add a "Custom Liquid Block"
Paste the following code > Change the tag / vendor values and the button styling in "<a>" tag to suit your needs and hit save.
{% assign customersTagsDowncased = customer.tags | downcase %}
{% assign ProductsVendorDowncased = product.vendor | downcase %}
{%- if customersTagsDowncased contains "approved" -%}
{% else %}
{%- if ProductsVendorDowncased contains "any-brand" %}
<style>
.product-form__buttons, .price__container, .product__tax, .product-form__input {
display: none !important;
}
</style>
<strong><a style ="color: #008CBA;" href="/account/login" class="product-form__submit button button--full-width button--secondary">Login to See Prices</a></strong>
{%- endif -%}
{%- endif -%}
Next > Drag the custom liquid block and drop it above the price block > Save and close.
Part 2 (To be repeated every time the theme updates)
Goto Theme > Edit Code > Find and Edit card-product.liquid file.
Find the code that renders the price. In Dawn 12 theme, its the following;
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
Paste the following code above that line. Change the tag and vendor from "aproved" and "any-brand" to suit your needs.
{% assign customersTagsDowncased = customer.tags | downcase %}
{% assign CardProductsVendorDowncased = card_product.vendor | downcase %}
{%- if customersTagsDowncased contains 'approved' -%}
{% else %}
{%- if CardProductsVendorDowncased contains "any-brand" %}
<br>
<div style="padding-top: 2%;">
<style>
.price__container, .quick-add {
display: none !important;
}
</style>
<a href="/account/login" style="position: absolute; bottom: 1%;" class="quick-add__submit button button--full-width button--secondary">Login to See Prices</a>
</div>
{% else %}
<style>
.price__container, .quick-add {
display: block !important;
}
</style>
{%- endif -%}
{%- endif -%}
Hit save and exit the edit code section > You're done.
All prodcuts from that brand will;
Enjoy as you just saved $20+ in monthly APP expenses thanks to @gr_trading. Feel free to buy them a coffee.
-------------------
P.S.
If you want to hide random prodcuts' prices or multiple brands, change the word "vendor" to "tags" in both of the codes above and tag each product you want to hide with the chosen tag.
Hope it helps!
Hi @Nomy_Syed
Seems issue is not with your code but the variable name product as in card-product.liquid product refer as card_product.
Let me know if it's not the case.
Hi Gr_trading,
Thanks for looking at it.
Just checked and you're right. The 'card-product.liquid' does refer to 'product' as 'card_product' but I'm lost on how to incorporate it in my if statement so the logic works on that too and the style gets applies.
I'm trying to achieve this by adding one piece of code (as above) to theme.liquid file.
Please gudie me how I can go about it if possible.
Thanks,
NS
This is an accepted solution.
If you want to code at one place only then make a new file with the code above.
Now render the file via passing variable as object.
{% render 'filename' product: card_product %}
You have to write above line of code separately on main-product and card-product with appropriate variable.
Hi @gr_trading
Smashing - Massive Thanks! It worked.
Realised, I'll have to edit the card-product.liquid file anyway to add the ""Login / Register to view prices"" button so added the css there with that variable and it worked like a charm.
-------------
For main product, instead of editing the product.liquid / theme.liquid files, I added a "custom Liquid section" on the theme (Customise Theme) and added the code there and it works perfectly fine (Should carry forward with theme updates).
Quick question:
For card-product, I was wondering if there is a way to apply the code that will carry forward with theme updates?
Again, thousand thanks for the help.
NS
This is an accepted solution.
For those looking to do the same and want full solution, here it is.
Solution
This solution allows you to hide prices for products of any brand (vendor) unless an approved customer is logged in - It's for Dawn Theme but should work on all themes as long as you match the CSS classes.
Pre-Requisits: You must approve the customers by adding a tag, in this example the tag is "approved".
Part 1 (One time - should work with theme updates unless the css classes change)
Goto Themes > Customize >
On Top centre > Click Home Page > Choose Product > Default Product
On left pane in Template section, add a "Custom Liquid Block"
Paste the following code > Change the tag / vendor values and the button styling in "<a>" tag to suit your needs and hit save.
{% assign customersTagsDowncased = customer.tags | downcase %}
{% assign ProductsVendorDowncased = product.vendor | downcase %}
{%- if customersTagsDowncased contains "approved" -%}
{% else %}
{%- if ProductsVendorDowncased contains "any-brand" %}
<style>
.product-form__buttons, .price__container, .product__tax, .product-form__input {
display: none !important;
}
</style>
<strong><a style ="color: #008CBA;" href="/account/login" class="product-form__submit button button--full-width button--secondary">Login to See Prices</a></strong>
{%- endif -%}
{%- endif -%}
Next > Drag the custom liquid block and drop it above the price block > Save and close.
Part 2 (To be repeated every time the theme updates)
Goto Theme > Edit Code > Find and Edit card-product.liquid file.
Find the code that renders the price. In Dawn 12 theme, its the following;
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
Paste the following code above that line. Change the tag and vendor from "aproved" and "any-brand" to suit your needs.
{% assign customersTagsDowncased = customer.tags | downcase %}
{% assign CardProductsVendorDowncased = card_product.vendor | downcase %}
{%- if customersTagsDowncased contains 'approved' -%}
{% else %}
{%- if CardProductsVendorDowncased contains "any-brand" %}
<br>
<div style="padding-top: 2%;">
<style>
.price__container, .quick-add {
display: none !important;
}
</style>
<a href="/account/login" style="position: absolute; bottom: 1%;" class="quick-add__submit button button--full-width button--secondary">Login to See Prices</a>
</div>
{% else %}
<style>
.price__container, .quick-add {
display: block !important;
}
</style>
{%- endif -%}
{%- endif -%}
Hit save and exit the edit code section > You're done.
All prodcuts from that brand will;
Enjoy as you just saved $20+ in monthly APP expenses thanks to @gr_trading. Feel free to buy them a coffee.
-------------------
P.S.
If you want to hide random prodcuts' prices or multiple brands, change the word "vendor" to "tags" in both of the codes above and tag each product you want to hide with the chosen tag.
Hope it helps!
Hi @Nomy_Syed
I guess my answer should be marked as a solution as my answer suggest the actual implementation flow.
😊
i applied this to specific product tag, however the price still appears on the product page for the specific tag under the 'login for price' box. how can i get it that the price doesnt show up there unless customer is logged in.
thanks,
Hi @Nomy_Syed ,
I applied this code and it worked however, when I log in, I end up in my profile page and then have to choose to "go to store." When I "go to store," the prices aren't visible and still required to "login for pricing." How do I get out of this loop? Thanks in advance!
if i use the suggested CSS Code we get the following warning : Your custom CSS has reached the size limit of 500 characters. Remove some CSS to save your changes.
we are struggling to get the prices of one vendor to be displayed without a login and other vendors need a login. so any other suggestion would
be highly appreciated.
thanks
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024