Remove price, add to cart, from product page. What is the best way?

ryaneddylutz · ‎03-30-2021

Hello

Im uncertain as to the best way to remove or comment out all pricing, add to cart, etc, on my shopify store. Xzib.com

Its an art gallery, so I do not want to show pricing.

Here is the prodcut-template.liquid:

{%- if collection -%}

{% capture product_url %}{{ product.url }}{% endcapture %}

{%- else -%}

{% capture product_url %}{{ '/collections' }}{% endcapture %}

{%- endif -%}

</div>

</div>

<style>

/* Create two equal columns that floats next to each other */

.custom-page-column-full {

float: left;

width: 100%;

padding: 10px;

box-sizing: border-box;

}

.vendor-name{

font-size: 36px;

margin-bottom: 10px !important;

}

.custom-page-column-goback {

float: left;

width: 25%;

padding: 10px;

box-sizing: border-box;

position: -webkit-sticky;

position: sticky;

top: 20%;

}

.custom-page-column-goback-mobile{

float: left;

width: 100%;

padding: 10px;

box-sizing: border-box;

display: none;

}

.custom-page-column-product-image {

float: left;

width: 75%;

padding: 10px;

box-sizing: border-box;

text-align:center;

}

.custom-page-column-description {

float: left;

width: 55%;

padding: 10px;

box-sizing: border-box;

}

.custom-page-column-vendorimage {

float: left;

width: 10%;

padding: 10px;

box-sizing: border-box;

}

/* Clear floats after the columns */

.custom-pagerow:after {

content: "";

display: table;

clear: both;

}

.custom-product-title{

font-size: 18px;

font-family: "Gabrielle bad";

color: black;

margin-bottom: 5%;

}

/* .vendor-product-page{

margin-bottom: 5%;

} */

.vendor-product-page a{

font-size: 22px;

line-height: 1.2em;

font-family: "Gabrielle bad";

color: black;

}

.museum-placecard{

border: 2px solid white;

border-radius: 3px;

padding: 20px;

box-shadow: 6px 3px 10px 0px rgba(255,255,255,0.3);

background-color: #f4f6f8;

width: 75%;

float: right;

padding-bottom: 20%;

}

.museum-placecard-mobile{

border-radius: 3px;

padding: 10px;

box-shadow: 6px 3px 10px 0px rgba(255,255,255,0.3);

background-color: #f4f6f8;

margin-top: 4%;

display: none;

text-align: left;

}

.mobile-thumbnails{

display: none;

}

.museum-placecard-mobile p{

line-height: 18px;

}

.museum-placecard p{

margin: 0px;

line-height: 18px;

}

.discp-image-wrapped{

display: none;

}

.goBack-heading{

text-align:center;

color: white;

margin-bottom: 70%;

}

.custom-page-column-product-image-mobile{

display: none;

}

@media only screen and (max-width: 600px) {

.custom-page-column-goback{

display: none;

}

.custom-page-column-product-image{

width: 100%;

padding-top: 0px;

}

.custom-page-column-goback-mobile .go-back img{

width: 7%;

}

.custom-page-column-goback-mobile{

display: unset;

/* padding-bottom: 3%; */

position: sticky;

top: 0%;

z-index: 999999;

background-color: #000;

padding-bottom: 0px;

padding-top: 5px

}

.custom-page-column-goback-mobile h1{

margin-bottom: 5px;

}

.custom-page-column-description{

width: 100%;

}

.custom-page-column-description iframe{

width: 100%;

}

#custom-space-div{

display: none;

}

.custom-page-column-vendorimage{

display: none;

}

.discp-image-wrapped{

float: left;

margin-right: 15px;

display: unset;

}

.museum-placecard-mobile{

display: block;

}

.mobile-thumbnails{

display: block !important;

}

.custom-page-column-product-image{

display: none;

float: none;

}

.custom-page-column-product-image-mobile{

display: block;

}

@media only screen and (max-width: 700px) and (orientation : landscape) {

#custom-space-div{

display: none;

}

.custom-page-column-vendorimage{

display: none;

}

.discp-image-wrapped{

float: left;

margin-right: 15px;

display: unset;

}

.custom-page-column-description{

width: 100%;

}

.custom-page-column-description iframe{

width: 100%;

}

.custom-page-column-goback .goBack-heading{

margin-bottom: 10%;

}

.museum-placecard .vendor-product-page a{

font-size: 18px;

}

.custom-product-title{

font-size: 12px;

}

.museum-placecard{

font-size: 60%;

line-height: 1.5em;

}

</style>

{% comment %}

<p style="font-size: 16px; line-height: 1.3em; margin-bottom: 0px; text-align: left; color: white;">go back to {{collection.title}} collection </p>

</a>

</div>

{% endcomment %}

{% if product.images.size > 1 %}

{% for image in product.images %}

<a {% if image.src== featured_image.src %} class="active" {% endif %} title="{{ image.alt | escape }}"

href="{{ image | product_img_url: 'master' }}"

data-full-size-url="{{ image | product_img_url: 'master' }}" style="width:18%; display: inline-block;">

{% include 'thumbnail-images', image: image %}

</a>

{% endfor %}

</div>

{% endif %}

</div>

{% comment %}

<img src="{{ 'colback-arrows.png' | asset_img_url: '40x' }}" style="filter: invert(1); float: left; margin-right: 2%; margin-top: 3%;"> <p style="font-size: 20px; line-height: 1.3em; font-size: 20px; margin-bottom: 0px; text-align: left; ">go back to {{collection.title}} collection </p>

<div>

</div>

</a>

</h2>

{% endcomment %}

<div>

{% if product.images.size > 1 %}

{% for image in product.images %}

<a {% if image.src== featured_image.src %} class="active" {% endif %} title="{{ image.alt | escape }}"

href="{{ image | product_img_url: 'master' }}"

data-full-size-url="{{ image | product_img_url: 'master' }}" style="width:25%; display: inline-block;">

{% include 'thumbnail-images', image: image %}

</a>

{% endfor %}

</div>

{% endif %}

</div>

<div class="vendor-product-page"><p class="vendor-name"><a href="/pages/{{ product.vendor | handle }}">{{ product.vendor }}</a></p></div>

<h1 class="custom-product-title">{{ product.title }}</h1>

{% assign short_description = product.description | split: '||' %}

</div>

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

{% include 'responsive-image', image: featured_image %}

</a>

</div>

<div class="vendor-product-page"><p class="vendor-name"><a href="/pages/{{ product.vendor | handle }}">{{ product.vendor }}</a></p></div>

<h1 class="custom-product-title">{{ product.title }}</h1>

{% assign short_description = product.description | split: '||' %}

</div>

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

{% include 'responsive-image-mobile', image: featured_image %}

</a>

</div>

<div class="vendor-product-page"><p class="vendor-name"><a href="/pages/{{ product.vendor | handle }}">{{ product.vendor }}</a></p></div>

<h1 class="custom-product-title">{{ product.title }}</h1>

{% assign short_description = product.description | split: '||' %}

</div>

{% assign variant = product.selected_or_first_available_variant %}

{% assign product_vendor_handle = product.vendor | handle %}

{% assign vendor_image = product_vendor_handle | append:'.png' %}

</div>

</div>

{% if product.available %}

{% form 'product', product, class: 'form', data-product-id: product.id, data-enable-history-state: 'true' %}

{% if product.variants.size > 1 %}

{% for option in product.options_with_values %}

</label>

{% for value in option.values %}

{{ value }} <span class="mobile-dropdown-price"> | {{product.variants[forloop.index0].price | money}} </span>

</option>

{% endfor %}

</select>

</span>

{% if variant.compare_at_price > variant.price %}

<span class="was-price theme-money">{{ variant.compare_at_price | money }}</span>

{% endif %}

<span class="price theme-money">{{ variant.price | money }}</span>

</span>

</div>

{% if settings.show_size_chart and option.name == settings.size_chart_variant %}

</a>

</div>

{% endif %}

{% endfor %}

</div>

{% for variant in product.variants %}

<option value="{{ variant.id }}" {% if variant == product.selected_or_first_available_variant %} selected="selected"{% endif %} data-stock="{% if variant.inventory_management == 'shopify' and variant.inventory_quantity <= 0 %}out{% endif %}">{{ variant.title | escape }}</option>

{% endfor %}

</select>

{% else %}

{% unless product.has_only_default_variant %}

{% for option in product.options %}

{% assign opt_idx = 'option' | append: forloop.index %}

<label>{{ option }}: {{ product.variants.first[opt_idx] }}</label>

{% if settings.show_size_chart and option == settings.size_chart_variant %}

</a>

</div>

{% endif %}

{% endfor %}

</div>

{% if variant.compare_at_price > variant.price %}

<span class="was-price theme-money">{{ variant.compare_at_price | money }}</span>

{% endif %}

<span class="price theme-money">{{ variant.price | money }}</span>

</span>

{% endunless %}

{% endif %}

</div>

<label for="quantity">{{ 'products.product.quantity' | t }}</label>

</span>

</span>

{% if section.settings.enable_payment_button %}

{% endif %}

</div>

{% capture backorder_message %}{{ 'products.product.backorder' | t }}{% endcapture %}

{% unless backorder_message == blank %}

{% if product.variants.size == 1 %}

{% if product.variants.first.inventory_management == 'shopify' and product.variants.first.inventory_quantity < 1 %}

<p><span class="selected-variant">{{ product.title }}</span> {{ backorder_message }}</p>

</div>

{% endif %}

{% else %}

<p><span class="selected-variant"></span> {{ backorder_message }}</p>

</div>

{% endif %}

{% endunless %}

{% endform %}

{% else %}

<p><em>{{ 'products.product.product_unavailable' | t }}</em></p>

{% endif %}

</div>

{% comment %}

{% for variant in product.variants %}

{% if product.available %}

{% else %}

{% endif %}

</div>

{% endfor %}

{% assign product_collection = product.collections.first %}

{% if product_collection %}

</a></h1>

{% endif %}

{% comment %}

{% for collection in product.collections %}

<h1 class="majortitle">{{ collection.title | escape }}</h1>

{% endfor %}

{% endcomment %}

</div>

{% if section.settings.prod_show_tags and product.tags.size > 0 %}

<a href="#" data-toggle-target=".tags.nav-row">{{ 'products.product.tags' | t }} <span class="state">+</span></a>

</span>

{% endif %}

{% if section.settings.prod_show_type %}

{% assign product_type_handle = product.type | handle %}

{% if collections[product_type_handle].handle == product_type_handle %}

{% assign type_url = collections[product_type_handle].url %}

{% else %}

{% assign type_url = product.type | url_for_type %}

{% endif %}

<span class="see-more">{{ 'products.product.see_more_of_this_type' | t }} {{ product.type | link_to: type_url }}</span>

{% endif %}

</div>

{% if collection %}

{% if collection.previous_product %}

<a class="control-prev" href="{{ collection.previous_product }}">{{ 'products.product.previous' | t }}</a>

{% endif %}

{% if collection.previous_product and collection.next_product %} / {% endif %}

{% if collection.next_product %}

<a class="control-next" href="{{ collection.next_product }}">{{ 'products.product.next' | t }}</a>

{% endif %}

</span>

</div>

{% endif %}

</div>

{% if section.settings.prod_show_tags and product.tags.size > 0 %}

<ul>

{% for tag in product.tags %}

{% endfor %}

</ul>

</div>

{% endif %}

{% assign variant = product.selected_or_first_available_variant %}

<div class="product-detail spaced-row container cf {% if variant.compare_at_price > variant.price %}variant-status--on-sale{% endif %}">

<div class="gallery gallery-layout-{{ section.settings.prod_gall_thumbs_under }} layout-column-half-left {% if product.images.size > 1 %}has-thumbnails{% endif %}">

{% assign lightbox_size = 'master' %}

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

<a class="shows-lightbox" title="{{ featured_image.alt | escape }}"

href="{{ featured_image | product_img_url: lightbox_size }}"

data-full-size-url="{{ featured_image | product_img_url: 'master' }}">

{% include 'responsive-image', image: featured_image, imgClass: 'cbb-loupe' %}

</a>

</div>

{% if product.images.size > 1 %}

{% for image in product.images %}

<a {% if forloop.first %} class="active" {% endif %} title="{{ image.alt | escape }}"

href="{{ image | product_img_url: lightbox_size }}"

data-full-size-url="{{ image | product_img_url: 'master' }}">

{% include 'responsive-image', image: image %}

</a>

{% endfor %}

</div>

{% endif %}

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

{% include 'responsive-image', image: featured_image, manual_image_load: true, imgClass: 'cbb-loupe'%}

</div>

{% for image in product.images %}

{% unless image contains featured_image %}

{% include 'responsive-image', image: image %}

</div>

{% endunless %}

{% endfor %}

</div>

{% include 'product-label' with product %}

{% if settings.prod_show_vendor or settings.prod_show_sku %}

{%- if settings.prod_show_vendor -%}

{%- comment -%}

Do we have a collection that has the same name as our product vendor name?

If we do, let's have the vendor link point to it.

If not, we will point to the automatic vendor collection.

{%- endcomment -%}

{%- assign product_vendor_handle = product.vendor | handle -%}

{% assign vendor_image = product_vendor_handle | append:'.png' %}

{%- if collections[product_vendor_handle].handle == product_vendor_handle -%}

{%- assign vendor_url = collections[product_vendor_handle].url -%}

{%- else -%}

{%- assign vendor_url = product.vendor | url_for_vendor -%}

{%- endif -%}

</div>

<div class="vendor"><a href="/pages/{{ product.vendor | handle }}">{{ product.vendor }}</a></div>

{%- endif -%}

{%- if settings.prod_show_sku -%}

<div class="sku {% if product.selected_or_first_available_variant.sku == blank %}sku--no-sku{% endif %}">{{ 'products.product.sku' | t }} <span class="sku__value">{{ product.selected_or_first_available_variant.sku }}</span></div>

{%- endif -%}

</div>

{% endif %}

<h1 class="title">{{ product.title }}</h1>

</div>

</div>

{% if variant.compare_at_price > variant.price %}

<span class="was-price theme-money">{{ variant.compare_at_price | money }}</span>

{% endif %}

<span class="price theme-money">{{ variant.price | money }}</span>

</h2>

{% if product.available %}

{% form 'product', product, class: 'form', data-product-id: product.id, data-enable-history-state: 'true' %}

{% if product.variants.size > 1 %}

{% for option in product.options_with_values %}

</label>

{% for value in option.values %}

</option>

{% endfor %}

</select>

</span>

</div>

{% if settings.show_size_chart and option.name == settings.size_chart_variant %}

</a>

</div>

{% endif %}

{% endfor %}

</div>

{% for variant in product.variants %}

<option value="{{ variant.id }}" {% if variant == product.selected_or_first_available_variant %} selected="selected"{% endif %} data-stock="{% if variant.inventory_management == 'shopify' and variant.inventory_quantity <= 0 %}out{% endif %}">{{ variant.title | escape }}</option>

{% endfor %}

</select>

{% else %}

{% unless product.has_only_default_variant %}

{% for option in product.options %}

{% assign opt_idx = 'option' | append: forloop.index %}

<label>{{ option }}: {{ product.variants.first[opt_idx] }}</label>

{% if settings.show_size_chart and option == settings.size_chart_variant %}

</a>

</div>

{% endif %}

{% endfor %}

</div>

{% endunless %}

{% endif %}

</div>

<label for="quantity">{{ 'products.product.quantity' | t }}</label>

</span>

</span>

{% if section.settings.enable_payment_button %}

{% endif %}

</div>

{% capture backorder_message %}{{ 'products.product.backorder' | t }}{% endcapture %}

{% unless backorder_message == blank %}

{% if product.variants.size == 1 %}

{% if product.variants.first.inventory_management == 'shopify' and product.variants.first.inventory_quantity < 1 %}

<p><span class="selected-variant">{{ product.title }}</span> {{ backorder_message }}</p>

</div>

{% endif %}

{% else %}

<p><span class="selected-variant"></span> {{ backorder_message }}</p>

</div>

{% endif %}

{% endunless %}

{% endform %}

{% else %}

<p><em>{{ 'products.product.product_unavailable' | t }}</em></p>

{% endif %}

</div>

{% if section.settings.prod_desc_pos == 'beside' %}

<div class="description user-content">{{ product.description }}</div>

{% comment %} Add code to show under the description on the line below this one, if beside the image {% endcomment %}

{% endif %}

{% include 'social-sharing' %}

</div>

{% if section.settings.prod_desc_pos == 'below' %}

<div class="description user-content padded-row">{{ product.description }}</div>

{% comment %} Add code to show under the description on the line below this one, if full-width underneath the image {% endcomment %}

{% endif %}

</div>

{% if section.settings.prod_show_tags and product.tags.size > 0 %}

<label>{{ 'products.product.tags' | t }}</label>

<ul>

{% for tag in product.tags %}

{% endfor %}

</ul>

</div>

{% endif %}

{% include 'social-sharing' %}

</div>

{% if collection.previous_product %}

<a class="control-prev" href="{{ collection.previous_product }}">{% include 'svg-chevron-left' %}</a>

{% endif %}

</div>

{% if section.settings.prod_show_type %}

{% assign product_type_handle = product.type | handle %}

{% if collections[product_type_handle].handle == product_type_handle %}

{% assign type_url = collections[product_type_handle].url %}

{% else %}

{% assign type_url = product.type | url_for_type %}

{% endif %}

</div>

{% if collection.next_product %}

<a class="control-next" href="{{ collection.next_product }}">{% include 'svg-chevron-right' %}</a>

{% endif %}

</div>

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

</div>

{% if section.settings.show_related_products %}

{% include 'related-products' %}

{% endif %}

</div>

{% endcomment %}

{% schema %}

{

"name": "Product pages",

"settings": [

{

"type": "checkbox",

"id": "prod_show_tags",

"label": "Show tags"

},

{

"type": "checkbox",

"id": "prod_show_type",

"label": "Show 'See more (type)'"

},

{

"type": "radio",

"id": "prod_gall_thumbs_under",

"label": "Thumbnail position",

"options": [

{

"value": "beside",

"label": "Beside main image"

},

{

"value": "under",

"label": "Underneath main image"

}

],

"default": "beside"

},

{

"type": "select",

"id": "prod_desc_pos",

"label": "Description position",

"options": [

{

"value": "beside",

"label": "Beside main image, under price"

},

{

"value": "below",

"label": "Underneath image and price"

}

]

},

{

"type": "checkbox",

"id": "enable_payment_button",

"label": "Show dynamic checkout button",

"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",

"default": true

},

{

"type": "header",

"content": "Related products"

},

{

"type": "paragraph",

"content": "Show other products from the same collection, underneath the product details"

},

{

"type": "checkbox",

"id": "show_related_products",

"label": "Show",

"default": false

}

]

}

{% endschema %}

ryaneddylutz · ‎03-31-2021

hey thank you very much

I dont have that theme.scss. but I do have styles.scss.liquid. When I paste, it removes the button, but still leaves the "drop down" box. How Do I remove that?

I also have a "cart" button Im wanting to remove site wide.

Is there a quick solution for these 2 issues?

View solution in original post

Hardik29418 · ‎03-31-2021

.option-selectors {

display: none !important;

}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!

- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Hardik29418 · ‎03-31-2021

Please place this code at the end of theme.scss

.price-area, .quantity-submit-row {
display: none;
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!

- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

ryaneddylutz · ‎03-31-2021

hey thank you very much

I dont have that theme.scss. but I do have styles.scss.liquid. When I paste, it removes the button, but still leaves the "drop down" box. How Do I remove that?

I also have a "cart" button Im wanting to remove site wide.

Is there a quick solution for these 2 issues?