How to create presets(theme styles) for shopify theme? - json

Question

I'm creating a custom theme by using dawn as reference theme. I want to create 2 presets which changes all the default colors of my header, footer, announcement bar, mobile navbar, sections and the general settings.
Now i managed to change the colors of the general settings by setting the preset name and general setting variables in settings_data.json but can't seem to figure out how to change section colors. Tried alot of stuff there but it didn't work. Here's my code
{
"current": "Beige",
"presets": {
"Beige": {
"placeholder_color": "#F8E6DA",
"pagination_tab_bg_color": "#FFF8F2",
"pagination_number_color": "#000000",
"pagination_current_page_color": "#F8E6DA",
"pagination_arrow_tab_color": "#F8E6DA",
"button_hover": "#EFF6FF",
"customer_pages_bg_colors": "#ffffff",
"container_bg_color": "#FFF8F2",
"border_color": "#F8E6DA",
"primary_button_color": "#000000",
"predictive_search_bg_color": "#F8E6DA",
"predictive_search_button_color": "#FABF9D",
"predictive_search_button_text_color": "#000000",
"cart_notify_bg_color": "#FFF8F2",
"cart_notify_border_color": "#F8E6DA",
"cart_notify_primary_button_color": "#FABF9D",
"cart_notify_primary_button_text_color": "#000000",
"cart_notify_secondary_button_color": "#000000",
"cart_count_bubble_color": "#303036",
"gift_card_bg_color": "linear-gradient(#FFF1E8, #EFD1B8)",
"gift_card_badge_color": "#F8E6DA",
"gift_card_badge_text_color": "#000000",
"gift_card_primary_button_color": "#fabf9d",
"gift_card_secondary_button_color": "#000000",
"sections": {
"announcement-bar": {
"type": "announcement-bar",
"blocks": {
"announcement-bar-0": {
"type": "announcement",
"settings": {
"show_announce_home_page": false,
"text": "Welcome to our store",
"announce_font_size": 15,
"announce_text_align": "center",
"announce_bold": false,
"link": "",
"announce_text_color": "#E22120",
"announce_bg_color": "#ffffff"
}
}
},
"block_order": [
"announcement-bar-0"
],
"settings": {
}
},
"mobile-navigation": {
"type": "mobile-navigation",
"settings": {
"nav-menu": "main-menu",
"mobile_nav_text_color": "#000000",
"icon_color": "#000000",
"border_bottom": "#f8e6da",
"mobile_nav_bg_color": "#ffffff"
}
},
"header": {
"type": "header",
"settings": {
"logo_width": 100,
"menu": "main-menu",
"enable_sticky_header": true,
"show_search_box": true,
"enable_predictive_search": true,
"header_text_color": "#000000",
"icon_color": "#000000",
"header_bg_color": "#f8e6da",
"dropdown_hover_color": "#ebd3c3",
"dropdown_hover_text_color": "#000000"
}
},
"footer": {
"type": "footer",
"blocks": {
"footer-0": {
"type": "text",
"settings": {
"address": "<p>[phone] 36979 300th St<br\/>Roseau, Minnesota(MN), 56751<\/p>",
"contact": "<p>[phone] <br\/>[phone]<\/p>",
"email": "info#collector.com"
}
},
"footer-1": {
"type": "menu",
"settings": {
"menu_heading": "Links",
"menu": "footer",
"menu_collapse": true
}
},
"88236e16-1b6c-438e-8543-f6fe494e04fb": {
"type": "menu",
"settings": {
"menu_heading": "Quick Links",
"menu": "footer-menu2",
"menu_collapse": true
}
},
"footer-2": {
"type": "info",
"settings": {
"additional_info": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis risus mi. Ut placerat quam lectus. Curabitur dictum velit non lacus<\/p>"
}
},
"footer-3": {
"type": "newsletter",
"settings": {
"newsletter_heading": "Subscribe to our emails",
"newsletter_btn_text": "Sign Up",
"newsletter_caption": "Phasellus dignissim, tellus in pellentesque mollis, mauris",
"newsletter_btn_color": "#fabf9d",
"newsletter_btn_text_color": "#000000"
}
}
},
"block_order": [
"footer-0",
"footer-1",
"88236e16-1b6c-438e-8543-f6fe494e04fb",
"footer-2",
"footer-3"
],
"settings": {
"footer_logo_width": 100,
"footer_top_bg_color": "#f8e6da",
"footer_top_text_color": "#000000",
"footer_bottom_bg_color": "#303036",
"footer_bottom_text_color": "#ffffff",
"show_social": true,
"payment_enable": true
}
}
},
"content_for_index": [
]
},
"Electronic": {
"placeholder_color": "#7DABE0",
"pagination_tab_bg_color": "#F8FBFF",
"pagination_current_page_color": "#EFF6FF",
"pagination_arrow_tab_color": "#EFF6FF",
"button_hover": "#EBD3C3",
"customer_pages_bg_colors": "#FCFEFF",
"container_bg_color": "#EFF6FF",
"border_color": "#134074",
"primary_button_color": "#E0691E",
"predictive_search_bg_color": "#C6D8ED",
"predictive_search_button_color": "#E0691E",
"predictive_search_button_text_color": "#ffffff",
"cart_notify_bg_color": "#EFF6FF",
"cart_notify_border_color": "#134074",
"cart_notify_primary_button_color": "#ED6F1E",
"cart_notify_primary_button_text_color": "#ffffff",
"cart_notify_secondary_button_color": "#134074",
"cart_count_bubble_color": "#ED6F1E",
"gift_card_bg_color": "linear-gradient(#EFF6FF, #7DABE0)",
"gift_card_badge_color": "#000000",
"gift_card_badge_text_color": "#ffffff",
"gift_card_primary_button_color": "#ED6F1E",
"gift_card_primary_text_button_color": "#ffffff",
"gift_card_secondary_button_color": "#134074",
"sections": {
"announcement-bar": {
"type": "announcement-bar",
"blocks": {
"announcement-bar-0": {
"type": "announcement",
"settings": {
"show_announce_home_page": false,
"text": "Welcome to our store",
"announce_font_size": 15,
"announce_text_align": "center",
"announce_bold": false,
"link": "",
"announce_text_color": "#E22120",
"announce_bg_color": "#ffffcf"
}
}
},
"block_order": [
"announcement-bar-0"
],
"settings": {
}
},
"mobile-navigation": {
"type": "mobile-navigation",
"settings": {
"nav-menu": "main-menu",
"mobile_nav_text_color": "#000000",
"icon_color": "#000000",
"border_bottom": "#f8e6da",
"mobile_nav_bg_color": "#fff7f2"
}
},
"header": {
"type": "header",
"settings": {
"logo_width": 100,
"menu": "main-menu",
"enable_sticky_header": true,
"show_search_box": true,
"enable_predictive_search": true,
"header_text_color": "#000000",
"icon_color": "#000000",
"header_bg_color": "#f8e6da",
"dropdown_hover_color": "#ebd3c3",
"dropdown_hover_text_color": "#000000"
}
},
"footer": {
"type": "footer",
"blocks": {
"footer-0": {
"type": "text",
"settings": {
"address": "<p>[phone] 36979 300th St<br\/>Roseau, Minnesota(MN), 56751<\/p>",
"contact": "<p>[phone] <br\/>[phone]<\/p>",
"email": "info#collector.com"
}
},
"footer-1": {
"type": "menu",
"settings": {
"menu_heading": "Links",
"menu": "footer",
"menu_collapse": true
}
},
"88236e16-1b6c-438e-8543-f6fe494e04fb": {
"type": "menu",
"settings": {
"menu_heading": "Quick Links",
"menu": "footer-menu2",
"menu_collapse": true
}
},
"footer-2": {
"type": "info",
"settings": {
"additional_info": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis risus mi. Ut placerat quam lectus. Curabitur dictum velit non lacus<\/p>"
}
},
"footer-3": {
"type": "newsletter",
"settings": {
"newsletter_heading": "Subscribe to our emails",
"newsletter_btn_text": "Sign Up",
"newsletter_caption": "Phasellus dignissim, tellus in pellentesque mollis, mauris",
"newsletter_btn_color": "#fabf9d",
"newsletter_btn_text_color": "#000000"
}
}
},
"block_order": [
"footer-0",
"footer-1",
"88236e16-1b6c-438e-8543-f6fe494e04fb",
"footer-2",
"footer-3"
],
"settings": {
"footer_logo_width": 100,
"footer_top_bg_color": "#f8e6da",
"footer_top_text_color": "#000000",
"footer_bottom_bg_color": "#303036",
"footer_bottom_text_color": "#ffffff",
"show_social": true,
"payment_enable": true
}
}
},
"content_for_index": [
]
}
}
}
The general settings variables work with the change in style but others like announcement bar, mobile-nav, header, footer doesn't work.. my index file is in json format.
Is anything here we can do to fix this problem?

Answer 1

Unfortunately, Shopify presets are just general settings presets, if, for example, you have colors in your sections the only way to create two presets is two create two different sections presets, this solution creates two sections in the section selector in the theme editor for the same section. That's why it's not recommended to add colors to sections and use color schemas instead. (just like in Dawn)