Shopify edit product.liquid page to replace the "Add to Cart" button with a non-clickable "Sold Out"

New Member
1 0 0

Can anyone help me with editing the product.liquid page under Sections?

 

I want to create a page called Sold_Out. Instead of controlling sold out items by inventory, we would just change certain items to point to this sold_out.liquid page instead of the regular product.liquid page.

It is a duplicate of the product.liquid page except for where there is a big box where it says "Add to Cart", it just says "Sold Out" and you can't click on it. That way we can mark an item to be sold out irregardless of how much inventory there is.

 

Here is the current code for our product.liquid page. It is mostly simple. I just can't find where the add to cart button is controlled.

 

{%- include 'bold-product' with product, hide_action: 'break', output: 'none' -%}
<div class="product-section" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-image-zoom-enable="{{ section.settings.zoom_enable }}">
{% include 'product' %}
</div>

{% schema %}
{
"name": "Product page",
"settings": [
{
"type": "header",
"content": "Layout"
},
{
"type": "checkbox",
"id": "product_breadcrumbs",
"label": "Show breadcrumbs",
"default": true
},
{
"type": "checkbox",
"id": "show_price_above",
"label": "Show price above product title",
"default": true
},
{
"type": "select",
"id": "form_position",
"options": [
{ "value": "below", "label": "Description above form"},
{ "value": "above", "label": "Description below form"}
],
"label": "Description position",
"default": "below"
},
{
"type": "checkbox",
"id": "show_quantity",
"label": "Show quantity selection",
"default": true
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": "Show dynamic checkout button",
"info": "Lets customers check out directly using a familiar payment method. [Learn More](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "product_show_vendor",
"label": "Show vendor",
"default": false
},
{
"type": "checkbox",
"id": "zoom_enable",
"label": "Enable image zoom"
},
{
"type": "checkbox",
"id": "related_products_enable",
"label": "Show related products from collection",
"default": true
},
{
"id": "product_reviews_enable",
"type": "checkbox",
"label": "Enable reviews",
"info": "Requires the [Shopify Product Reviews app](https://apps.shopify.com/product-reviews)."

},
{
"type": "header",
"content": "Optional sizing popup"
},
{
"id": "info_page",
"type": "page",
"label": "Select page",
"info": "This popup will show on every product."
},
{
"type": "header",
"content": "optional product tabs"
},
{
"type": "select",
"id": "tabs_position",
"options": [
{ "value": "sidebar", "label": "Tabs beside image"},
{ "value": "below", "label": "Tabs below"}
],
"label": "Tabs position",
"default": "below"
}
],
"blocks": [
{
"type": "tab_description",
"name": "Description H6",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Heading 6 titles will be converted to tab headings, tab content will be everything between the Heading 6 titles. [Product Tabs Documentation](http://help.groupthought.com/article/36-tabs)."
}
]
},
{
"type": "tab_richtext",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Label",
"default": "Text tab",
"info": "Example: Warranty policy"
},
{
"type": "richtext",
"id": "raw_content",
"label": "Tab content",
"default": "<p>This tab content type will accept <strong>rich text</strong> to help with adding styles and links to additional pages or content. Use this to add supplementary information to help your buyers.</p>"
}
]
},
{
"type": "tab_html",
"name": "HTML",
"settings": [
{
"type": "text",
"id": "title",
"label": "Label",
"default": "HTML tab",
"info": "Example: Sizing video"
},
{
"type": "html",
"id": "raw_content",
"label": "Tab content",
"default": "<p>This tab content type will accept HTML code for advanced styling. Use this to add video embeds, or other advanced HTML content.</p>"
}
]
},
{
"type": "tab_page",
"name": "Page",
"settings": [
{
"type": "text",
"id": "title",
"label": "Label",
"default": "Page tab",
"info": "Example: Size chart"
},
{
"type": "page",
"id": "raw_content",
"label": "Tab content"
}
]
}
]
}


{% endschema %}

 

 

This is what our product page looks like.

https://i.imgur.com/GQGYn6u.png

Any help would be appreciated.

 

0 Likes