Hey there,
I just installed this theme for a friend of mine today and found I had the same problem. I was able to ‘fix’ the product pages in the code, though I’m not sure if there’s a simpler way. Let me describe the problem and then show you my solution.
The problem is two-fold:
-
Product pages, and their 'Product information" section (and likely all the other layouts we have the issue with) have no concept of color_scheme on the Customize theme page.
-
Even when we give those layout sections a concept of a color scheme picker, the layout doesn’t use it by default.
The solution:
- Make the color scheme picker available in the theme section. I’ll use the ‘Product information’ section in this example:
i) In your shopify admin go to Online Store > Themes > … > Edit code
ii) Use the file search to find and open main-product.liquid
iii) Find the theme “settings”: [ around line 2016 and copy and paste the following two add two settings:
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "background-1"
},
{
"type": "color_scheme",
"id": "menu_color_scheme",
"label": "t:sections.header.settings.menu_color_scheme.label",
"default": "background-1"
},
It should looks like this after you paste it in. Note: the use of commas, quotes, and curly brackets must be copied exactly.
iv) Save. Make sure it saves with no syntax errors.
Now the Product sections have a concept of color scheme. Let’s finish up in the main-product.liquid before leaving this page.
- To make your product section use and display the new theme setting:
i) Still in the same main-product.liquid file, go to the top of the file to find the opening <section tag.
ii) We will add the following two classes before the closing " of the class=" parameter:
color-{{ section.settings.color_scheme }} gradient
It should look like this:
iii) Save the file again.
That’s it for the code, but you still need to select the color scheme in your Customize theme page like you’re used to.
i) In your Shopify admin go to Online Store > Themes > Customize.
ii) Navigate to the appropriate layout from drop-down menu, e.g. change Home page to Products > Default product
iii) Find Color scheme and select the scheme you want to match the rest of your site.
iii) Save.
I’m half expecting someone to come out of the woods and say, hey you just needed to change this one global setting for all the other page layouts… because it feels like it should be easier. But I looked and couldn’t find such a setting, and support told you the solution requires code, so… here we are.
The next steps would be to repeat the steps above to edit any other layouts that don’t have this built in. I’m not sure what the section files are yet (that is, the equivalent files to main-product.liquid). I’ll try to post an update with a list of files to edit this way after I do them all on my end.
Hope that helps. LMK if you have any questions.
