Hello, I need help hiding the price for a specific collection. Anyone can help me? I tried what I saw on YouTube but it didn’t work on the theme. I tried to edit the code I searched but it didn’t work. Please check the screenshot.
Hey @yen006 ,
I understand your concern that you want to hide the prices for products in a specific collection. Can you share your store URL and the link to the specific collection on which you want to hide the prices? This will allow me to share the exact code that will help you achieve the desired results.
And also you mentioned the screenshot, but I can’t see any screenshot attached to the question.
Thank You!
Regards,
Abhishek from Swym
@swym Thank you for your response. This is the product page I created a template that shows no price - https://www.isladesign.com.au/products/parvati-sapphire
And I want this specific collection that the price is hidden as well. - https://www.isladesign.com.au/collections/pavilion-wallpaper
I hope you can help me solve this problem. Thanks
Hi @yen006 ,
Thanks for sharing the store URL along with the collection page. This will help me draft a solution that would help you achieve your desired layout. To hide the prices for this specific collection, please follow the steps below:
- Open the code editor, as shown in the screenshot below.
- Create a snippet called ‘custom-styles’ and add the below code:
{% if template contains 'collection' and handle == 'pavilion-wallpaper' %}
{% endif %}
Please note, that I’ve used the collection’s handle (pavilion-wallpaper) in this condition. If you ever change the handle for this collection in the future, don’t forget to update it here as well.
If you want to hide prices for additional collections in the future, you can add their handles into the condition. Replace ‘new-handle1’ and ‘new-handle2’ with your collection handles, like this:
{% if template contains 'collection' %}
{% if handle == 'pavilion-wallpaper' or handle == 'new-handle1' or handle == 'new-handle2' %}
{% endif %}
{% endif %}
You can add multiple collection handles by continuing to use or handle == ‘your-collection-handle’ before the %} in line #2. This way, you can easily manage the price visibility on those collections.
- Include the ‘custom-styles.liquid’ file in your “theme.liquid” file.
Add the following include code to your theme.liquid file.
{% render 'custom-styles' %}
It would look something like below:
- Done? Now save the file, and try previewing to confirm if the changes work for you. In the reference above, it looks like something as shown below:
This will help you in getting the desired layout.
If my response helped you, please consider giving it a like ( 
) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.
Thank you!
Regards,
Abhishek from Swym
@swym Thank you so much for the help. I appreciate it so much. It’s been a while since I have searched for how to solve this problem. It really works.
@swym can you help me again? I need to hide these prices here on the home page https://www.isladesign.com.au/ styled for you section
Please see the screenshot below. I want to hide the prices below and the product carousel. How can I do this?
Hey @yen006 ,
To help you achieve this, can you please share the code for this section. Once I have the code, I share the update code which will ensure that the price remains hidden for specific collections.
Regards,
Abhishek from Swym
Hey @yen006 ,
To get the code please go to Online Store > Themes > Click on “…” > Edit Code.
On the theme file editor search for the file with the name: product-carousel.liquid or something like that.
Copy the code and share it with me here.
I hope this helps!
Regards,
Abhishek from Swym
@swym I used another email since having trouble using my old account. I cant find the liquid code of product-carousel. Please see photo below, but here’s a code for product gallary
{% assign selected_variant = product.selected_or_first_available_variant %}
{% assign selected_media = selected_variant.featured_media | default: product.featured_media %}
{% for media in product.media %}
{% case media.media_type %}
{% when ‘image’ %}
{% assign scale = 1 %}
{% if enable_zoom %}
{% assign scale = 1.5 %}
{% endif %}
{%
render ‘rimg’,
img: media,
size: ‘x700’,
scale: scale,
lazy: true
%}
{% when ‘external_video’ %}
{{ media | media_tag: image_size: ‘1024x’ }}
{% when ‘model’ %}
{{ media | model_viewer_tag: image_size: ‘1024x’, reveal: ‘interaction’ , toggleable: true, interaction-prompt-threshold: 0 }}
{% when ‘video’ %}
{{ media | media_tag: image_size: ‘1024x’ }}
{% else %}
{{ media | media_tag }}
{% endcase %}
{% assign first_model = product.media | where: “media_type”, “model” | first %}
{% if selected_media.media_type == ‘model’ %}
{% assign model = selected_media %}
{% else %}
{% assign model = first_model %}
{% endif %}
{% if model %}
<button
class=“product-gallery–viewinyourspace”
data-default-model-id=“{{ first_model.id }}”
data-shopify-xr
data-shopify-model3d-id=“{{ model.id }}”
data-shopify-title=“{{ product.title }}”
data-shopify-xr-hidden
{% render ‘icon-library’, id: ‘icon-3D’ %}
{{ ‘product.media.view_in_your_space’ | t }}
{% endif %}
{% if product.media.size > 1 %}
{% for media in product.media %}
{% if media.media_type == 'video' or media.media_type == 'external_video' %}
{% render 'icon-library', id: 'icon-play-thumb' %}
{% elsif media.media_type == 'model' %}
{% render 'icon-library', id: 'icon-model-thumb' %}
{% endif %}
{%
render 'rimg',
class: 'product-gallery--media-thumbnail-img',
img: media.preview_image,
size: '100x',
crop: 'center',
lazy: true,
%}
{% endfor %}
{% endif %}
@swym any update on this?
Hey @yenkane20 ,
Sorry for not being able to get back to you earlier. But the code you shared does not look like the right file. You need to look for the file responsible for rendering the product carousel section. This code looks more like a product gallery section.
Thanks,
Abhishek from Swym
@swym I think this is the correct code? Kindly check
{% assign aspect_ratio = section.settings.aspect_ratio %}
{% assign crop_images = ‘center’ %}
{% if section.settings.aspect_ratio == ‘original’ %}
{% assign crop_images = false %}
{% endif %}
{% assign slide_attraction = 1 %}
{% assign slide_friction = 1 %}
{% for block in section.blocks %}
{%- assign placeholder_number = forloop.index | modulo: 2 | plus: 1 -%}
{%- assign placeholder = 'lifestyle-' | append: placeholder_number -%}
{%- assign slide_number = forloop.index -%}
{%- assign overlay_opacity = 0 -%}
{%- if block.settings.background_color_opacity > 0 -%}
{%- assign overlay_opacity = block.settings.background_color_opacity | times: 0.01 -%}
{%- endif -%}
{%- if block.settings.image != blank -%}
{%
render 'rimg',
img: block.settings.image,
class: 'slideshow-slide__image',
size: '2000x2000',
crop: crop_images,
lazy: true,
canvas: true,
%}
{%- else -%}
{{ placeholder | placeholder_svg_tag: 'slideshow-slide__image slideshow-slide__placeholder' }}
{%- endif -%}
{%- if block.settings.background_color_opacity != 0 and block.settings.background_color != 'rgba(0,0,0,0)' -%}
{%- endif -%}
{%- if block.settings.link != blank -%}
<a
href=“{{ block.settings.link }}”
class=“slideshow-slide__background-link”
tabindex=“-1”
{%- endif -%}
{%- if block.settings.title != blank -%}
{% endfor %}
{{ block.settings.title }}
{%- endif -%}{%- if block.settings.subheading != blank -%}
{{ block.settings.subheading }}
{%- endif -%}{%- if block.settings.button_label != blank and block.settings.link != blank -%}
<a
href=“{{ block.settings.link }}”
class=“slideshow-slide__button”
{{ block.settings.button_label }}
{%- endif -%}
{% schema %}
{
“name”: “Slideshow”,
“max_blocks”: 5,
“settings”: [
{
“id”: “should_autoplay”,
“type”: “checkbox”,
“label”: “Auto-rotate slides”,
“default”: true
},
{
“type”: “range”,
“id”: “slide_frequency”,
“label”: “Rotation interval”,
“min”: 2,
“max”: 10,
“step”: 1,
“unit”: “sec”,
“default”: 3
},
{
“type”: “select”,
“id”: “aspect_ratio”,
“label”: “Slideshow height”,
“options”: [
{ “label”: “Small”, “value”: “23-9” },
{ “label”: “Medium”, “value”: “2-1” },
{ “label”: “Large”, “value”: “8-5” },
{ “label”: “Original aspect ratio”, “value”: “original” }
]
}
],
“blocks”: [
{
“type”: “feature”,
“name”: “Slide”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”,
“info”: “940 x 444px .jpg recommended”
},
{
“type”: “header”,
“content”: “Overlay”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Slide”
},
{
“type”: “text”,
“id”: “subheading”,
“label”: “Subheading”,
“default”: “Introduce customers to your shop with lifestyle and product imagery”
},
{
“type”: “text”,
“id”: “button_label”,
“label”: “Button label”,
“default”: “Button”
},
{
“type”: “url”,
“id”: “link”,
“label”: “Link”
},
{
“type”: “color”,
“id”: “color”,
“label”: “Color”,
“default”: “#FFFFFF”
},
{
“type”: “color”,
“id”: “background_color”,
“label”: “Background color”,
“default”: “#000000”
},
{
“type”: “range”,
“id”: “background_color_opacity”,
“label”: “Background color opacity”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “%”,
“default”: 50
},
{
“type”: “select”,
“id”: “alignment”,
“label”: “Alignment”,
“options”: [
{ “label”: “Left Top”, “value”: “left-top” },
{ “label”: “Left Center”, “value”: “left-center” },
{ “label”: “Left Bottom”, “value”: “left-bottom” },
{ “label”: “Center Top”, “value”: “center-top” },
{ “label”: “Center”, “value”: “center-center” },
{ “label”: “Center Bottom”, “value”: “center-bottom” },
{ “label”: “Right Top”, “value”: “right-top” },
{ “label”: “Right Center”, “value”: “right-center” },
{ “label”: “Right Bottom”, “value”: “right-bottom” }
],
“default”: “center-center”
}
]
}
],
“presets”: [
{
“category”: “Image”,
“name”: “Slideshow”,
“blocks”: [
{
“type”: “feature”
},
{
“type”: “feature”
}
]
}
],
“templates”: [
“index”
]
}
{% endschema %}
Hey @yen006 ,
Unfortunately, this file also does not render the product carousel section correctly. This is the slideshow section code that you shared.
But you can look for the correct file using the below steps:
-
Install this Chrome extension on the Chrome browser.
-
Open the theme code editor on the Chrome browser. You will see the extension search widget at the top of the screen as shown in the screenshot below:
- Search for the keyword “product-carousel__wrapper” and automatically, this extension will highlight the file on which this keyword is found, if it’s just one file or multiple files on which this keyword is present.
Ex: I searched for “card-product” and it highlights all the files with this word present.
- If multiple files are highlighted, in your case the desired file has to be present inside the sections folder.
Another approach is to check for the file named “index.json” in your theme code editor under the templates folder. If the file exists, search within it for the text ‘Styled For You’. If you find this text, please share that code with me.
I hope this helps you in finding the right file.
Thanks,
Abhishek from Swym
Thank you @swym I found it already and here’s the code.
.header-section { display: flex; align-items: center; margin-bottom: 15px; } .header-section a { text-decoration: underline !important; margin-left: auto; } @media screen and (max-width: 640px) { .header-section a { margin-top: -16px; } } .header-section h5 { color: #111; font-size: 0.9375em; font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: 0.4em; margin-bottom: 2em; } .product-carousel .product-carousel__wrapper { margin: 0 -0.9375em !important; margin-bottom: 3.125em !important; } .product-carousel__item { padding: 0 0.9375em; outline: 0; } .product-box { position: relative; } .badge--sale { top: 12px; right: 12px; } .thumbnail { position: relative; text-align: center; overflow: hidden; margin-bottom: 1.5625em; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; -ms-transition: all 0.7s ease; transition: all 0.7s ease; } .thumbnail__action { position: absolute; top: 26px; left: 15px; -webkit-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; opacity: 0; z-index: 9; } .thumbnail:hover .thumbnail__action { opacity: 1; } @media screen and (max-width: 640px) { .thumbnail__action { opacity: 1; } } .thumbnail__action--cart { color: #444444; display: inline-block; text-align: center; width: 40px; height: 32px; line-height: 32px; margin: 0 2px; background-color: #fff; border: 1px solid rgba(151, 151, 151, 0.3); } .thumbnail__img { display: block; height: 100%; width: 100%; } .thumbnail__img--overlay::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: .7; z-index: 7; } .thumbnail__img img:nth-child(1) { visibility: visible; } .thumbnail__img img:nth-child(2) { position: absolute; top: 0; left: 0; visibility: hidden; } .thumbnail__img:hover img { -webkit-transition: opacity 0.5s ease, -webkit-transform 1.5s cubic-bezier(0, 0, 0.44, 1.18); transition: opacity 0.5s ease, -webkit-transform 1.5s cubic-bezier(0, 0, 0.44, 1.18); transition: opacity 0.5s ease, transform 1.5s cubic-bezier(0, 0, 0.44, 1.18); transition: opacity 0.5s ease, transform 1.5s cubic-bezier(0, 0, 0.44, 1.18), -webkit-transform 2s cubic-bezier(0, 0, 0.44, 1.18); } .thumbnail__img:hover img:nth-child(2) { visibility: visible; } .product-details__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 5px; } .product-vendor { color: #888; font-size: 0.8125em; font-weight: normal; line-height: 1; text-transform: capitalize; } .product-details__name { color: #111; font-size: 1em; font-weight: 500; text-decoration: none; line-height: 1.625em; -webkit-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; cursor: pointer; display: block; margin-bottom: 3px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .product-details__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-details__footer .price--main { margin-right: 0.76923em; } .price--main { color: #111; font-size: 0.8125em; font-weight: 600; line-height: 1; } .price--discount { color: #888; font-size: 0.8125em; font-weight: normal; line-height: 1; text-decoration: line-through; } .splide__arrow--prev, .splide__arrow--next { font-size: 12px !important; } .splide__arrow--prev { left: -2.6em !important; } .splide__arrow--next { right: -2.6em !important; } .splide__pagination, .splide__arrow { z-index: initial !important; } .splide__arrow svg { fill: {{ settings.color_primary }}; } .splide__arrow:hover svg { fill: {{ settings.color_primary | color_modify: 'alpha', 0.6 }}; } .splide__pagination__page.is-active { background: {{ settings.color_primary }}; } .splide__pagination__page:hover { background: {{ settings.color_primary | color_modify: 'alpha', 0.6 }}; } /**************************\ Demo Animation Style \**************************/ @-webkit-keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes mmslideIn { from { -webkit-transform: translateY(15%); transform: translateY(15%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes mmslideIn { from { -webkit-transform: translateY(15%); transform: translateY(15%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes mmslideOut { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-10%); transform: translateY(-10%); } } @keyframes mmslideOut { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-10%); transform: translateY(-10%); } } /* RESETS */ .opacity-img { opacity: .6; } .thumbnail__action--cart:hover .header-bar__cart-icon { color: {{ settings.color_primary }}; } .modal__overlay { z-index: 10; } .badge--sold-out { top: 35% !important; }
{%- if section.settings.section_title != '' -%}
{{ section.settings.section_title }}
{%- endif -%} View All
{%- assign featured_product = collections[section.settings.featured_product_handle] -%}
{%- if featured_product != empty -%}
{%- endfor -%}
{% else %}
The collection is empty!
{%- endif -%}
{%- for product in featured_product.products -%}
{%- assign on_sale = false -%}
{%- if product.compare_at_price > product.price -%}
{%- assign on_sale = true -%}
{%- endif -%}
{%- assign sold_out = true -%}
{%- if product.available -%}
{%- assign sold_out = false -%}
{%- endif -%}
{% if on_sale and section.settings.show_sale_sticker %}
{% endif %}
{% endif %}
{{ product.title | truncate: 30 }}
{{ 'products.product.sale' | t }}
{% if sold_out and section.settings.show_sold_out_sticker %}
{{ 'products.product.sold_out' | t }}
{%- if product.available -%}
{%- endif -%}
![{{ product.featured_image.alt | escape }}]()
![{{ product.featured_image.alt | escape }}]()
{%- if product.images.size > 1 -%}
{%- if sold_out -%}{%- endif -%}{%- for image in product.images limit: 1 offset: 1 -%}
{%- endfor -%}
{%- else -%}
{%- if sold_out -%}{%- endif -%}{%- endif -%}
{{ product.vendor }}
{{ product.variants.first.price | money }}
{%- if product.variants.first.compare_at_price > product.variants.first.price -%}
{{ product.variants.first.compare_at_price | money }}
{%- endif -%}{% schema %}
{
“name”: “Product Carousel”,
“settings”: [
{
“type”: “header”,
“content”: “Section Heading”
},
{
“type”: “text”,
“id”: “section_title”,
“label”: “Section Title”,
“default”: “Section Title Here”
},
{
“type”: “header”,
“content”: “Products”
},
{
“type”: “collection”,
“id”: “featured_product_handle”,
“label”: “Select Collection”
},
{
“type”: “checkbox”,
“id”: “show_sale_sticker”,
“label”: “Show Sale Sticker”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_sold_out_sticker”,
“label”: “Show Sold out Sticker”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_arrows”,
“label”: “Show Slider Arrows”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_pagination”,
“label”: “Show Slider Pagination”,
“default”: true
}
],
“presets”: [
{
“name”: “Products slider”,
“category”: “Slider Sections”
}
]
}
{% endschema %}
Hi @yen006 ,
Thanks for sharing the code.
To achieve your desired results I have added customization settings using which you can now control the visibility of the price for the products in this section as shown in the screenshot below:
To achieve this you need to make the code changes to the section file as described below:
- Search for the code: and add the code given below before this tag as shown in this screenshot.
{% unless section.settings.swym_show_product_prices %}
#shopify-section-{{ section.id }} .price--main,
#shopify-section-{{ section.id }} .price--discount {
display: none;
}
{% endunless %}
- Search for the code: “presets:” and add the code given below as shown in this Screenshot.
,{
"type": "checkbox",
"id": "swym_show_product_prices",
"default": false,
"label": "Show Product Prices"
}
Once you implement these changes successfully, then based on the button toggle the product prices will be visible and hidden based on as shown below:
When the button is enabled:
When the button is disabled:
In case you are not able to implement these changes, then just let me know and I will share the entire updated section code which you can simply copy and paste on your store.
I hope this helps you in setting up your store as per your requirements.
Thanks.
Regards,
Abhishek from Swym
@swym It’s invalid. Not sure if i am adding them correctly since I cant see the screenshot
Hey @yen006 ,
Please check the instructions again using the updated screenshots.
- Search for the code: and add the code given below before this tag as shown in the screenshot following the code.
{% unless section.settings.swym_show_product_prices %}
#shopify-section-{{ section.id }} .price--main,
#shopify-section-{{ section.id }} .price--discount {
display: none;
}
{% endunless %}
Screenshot:
- Search for the code: “presets:” and add the code given below before this tag as shown in the screenshot following the code.
,{
"type": "checkbox",
"id": "swym_show_product_prices",
"default": false,
"label": "Show Product Prices"
}
Screenshot:
I hope this helps!
Regards,
Abhishek from Swym
@swym Thank you so much for your help! It works now! I appreciate it.