Show featured image until variant selection is made - Pipeline 2 and 3
This customization will display the first image for your product until a variant is selected. It also forces the customer to choose a variant.
When you have images assigned to each variant, the theme will show the first variant image rather than the first image in your product setup.
Example result:
(1) A general product shot is displayed. This is the first image in your product setup and doesn't need to be associated to any of the variants.
(2) The selection options will ask the customer to pick a variant.
(3) The Add to Cart button is disabled until a variant is selected.
After a variant is chosen, the assigned image for that variant is shown and the Add to Cart button becomes active:
About the tutorial:
The following code is by Shopify from their article:
The code in this article is not by Groupthought. We have written this tutorial based off Shopify's article to assist Pipeline customers with adding the customization in Pipeline. Use at your own risk. Our support team is not able to support issues you have when making or using this customization. Always make a duplicate of your theme before making code modifications. This tutorial was written and tested with Pipeline 2.4.1 and Pipeline 3.1. There were no apps installed when testing.
This tutorial is intended to be used with Pipeline 2 - 3. There is a separate article for Pipeline 4 and above. See link a the bottom.
Note: Newer versions of Pipeline use different files so be sure to Check your theme version:
How to check your theme version
Tutorial Steps:
Start by making a duplicate of your theme - Important:
Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.
Make a duplicate before any code changes:
Important - Don't skip this step. A backup is necessary for this customization.
- 1
-
Modify your javascript file
Open shop.js.liquid from the assets folder:
In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:
_updatePrice:
Find this line:
Next, we will be commenting out this section that starts below that line:
To comment out that section, we use this format:
/* sample code to comment out */
The start is always with a slash and asterix, the end is asterix and slash. Everything inside the comments are not executed. Comments or notes are allowed inside the commented area but not outside the start or finish.
Comment out that section of code from the screenshot - It starts after the line from our search result.
Create a new blank line after the search result line and then add the starting comment. Follow with a end comment after the closing bracket:
Example result:
Once you comment out code, the code turns to a grey color. I used the word tutorial after the start of my comment - That's fine and helpful when you're looking back at your changes in the future. Just be sure to keep any comments like my "tutorial" inside the commented area. Don't add anything after the finishing */
One last tip: There can't be any spaces between the slash and asterix, they must be together or it will break the Javascript.
Verify your comments, make sure it looks like above and nothing else has changed. At this point if you haven't made a backup of your theme, cancel any changes and make that duplicate. If you make a mistake and your theme doesn't load, you will need that backup.
Next,
Find this line:
_updateImages:
Example:
We will be commenting out the section of code that starts with the "if" statement (begins two lines after our search result) and ending with the closing bracket:
Add your comments - Example after:
Verify your work - Make sure it's accurate and looks like the above.
Next,
Add the following code to the bottom of the file. Scroll right to the bottom of theme.js and add this code:
/* tutorial */
$(document).ready(function() {
if( typeof(selectProductOptions ) != "undefined" ){
for(i=0;i<selectProductOptions.length;i++) {
$('.single-option-selector:eq('+ i +')')
.filter(function() {
return $(this).find('option').length > 1
})
.prepend('<option value="">Pick a ' + selectProductOptions[i][i] + '</option>')
.val('')
.trigger('change');
}
}
});
/* end of tutorial code */
Example:
Save your file (top right):
- 2
-
Edit your product page template
Open product.liquid from the Snippets folder:
Find this line:
assign current_variant
Example:
We will be removing and replacing that entire line:
{% assign current_variant=product.selected_or_first_available_variant %}
Replace that entire line with this code:
{% if product.variants.size > 1 %}
{% assign current_variant = product.selected %}
{% else %}
{% assign current_variant = product.first_available_variant %}
{% endif %}
Example:
Next,
Add the following code to the very bottom of this file:
<script>
var selectProductOptions = [];
{% for option in product.options %}
var optionObj = {};
optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}";
selectProductOptions.push(optionObj);
{% endfor %}
</script>
Example:
Save the file:
- 3
-
Change the Add to cart button language settings
You can change the language settings for the Add to cart button so that products do not appear as "Unavailable" before a selection is made.
From your Shopify admin, click Online Store, and then click Themes.
Click Actions, and then click Edit language.
In the Filter translations box, type-in unavailable:
unavailable
Scroll down to the Products / Product section:
Change the text Unavailable to:
Make a selection
Example:
Click Save
- 4
-
Change the color of your disabled Add to Cart button
Your Add to Cart button will now be disabled for customers until they choose a variant. The standard color is a dark grey which might not be easy to read. We recommend you change to a lighter grey in order to help them read the "Make a section" text on the button.
Example of lighter version:
Open theme.scss.liquid from the Assets folder:
Scroll to the very bottom of the file and add this code:
/* -- code to change disabled button background color -- */
.btn.disabled {background-color: #f1f1f1;}
/* - end - */
Example:
Use any valid hex color code - Change #f1f1f1 to any hex color:
http://www.colorhexa.com/web-safe-colors
Save the file:
That concludes this tutorial. Be sure you've made a duplicate of your theme as mistakes are easy to make with this level of customization. Test your products and make sure the theme is working. If there's an issue, use your backup to replace files or to publish the entire theme.