Update Preset default

[ludoboludo]

Why are these changes introduced?

Fixes #58 .

What approach did you take?

Updated the default values based on the linked issue.

Other considerations

Demo links

• Store
• Editor

Checklist

• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[martinamarien]

Colors look good based on the preset values Wik provided.

I'd like us to touch base with @Guillaumegranger1 and/or @wiktoriaswiecicka about the announcement bar, header and footer preset settings. Because these are static sections, it means that their settings are going to be stored in the settings_data.json file and not in a template.json file. This means, we can provide preset values for these section's settings if they feel we should.

For example: looking at the Default preset mockups, it looks like we should be using the background-2(light grey background) color system for the announcement bar instead of the setting's default which is accent-1 (black background).

[Guillaumegranger1]

The default preset/demo actually has the Background 1 color scheme for both the announcement bar and the footer:

Background = Background 1 (white)
Text = Text (dark grey)

[martinamarien]

The default preset/demo actually has the Background 1 color scheme for both the announcement bar and the footer:

Thanks Guillaume. Is that the same for the Craft preset? Based on the mockups, the announcement bar and footer look like they use accent 1.

[Guillaumegranger1]

@martinamarien The 2nd preset uses the Accent 1 color scheme for the announcement bar and the footer. Is this problematic?

[martinamarien]

No problem at all. We just need to know this information so that we can set the footer and announcement bar color scheme as part of the preset.

For example, right now, the footer's color scheme defaults to background-1. If we don't overwrite this setting color as part of the Craft preset, merchants will get background-1 as their footer color instead of accent-1.

[martinamarien]

accent-1 is actually already the default value for the announcement bar color scheme. So we don't need to include this here because it will default to that color anyways.

Instead, we will need to include this for the Default preset (unless the default value of the color scheme changes for the announcement bar).

The code you have used here would work for a section that contains only one announcement bar - as in the section itself is an individual announcement bar. In this case, our announcement bar section contains blocks of type: announcement that each have their own settings. So we would need to provide overrides for each block instead of for the section as a whole. So it might looks something like this:

    "Default": {
      "sections": {
        "announcement-bar": {
          "type": "announcement-bar",
          "blocks": {
            "announcement-bar-0": {
              "type": "announcement",
              "settings": {
                  ... 
              }
            }
          }, 
          "block_order": [
            "announcement-bar-0" 
          ]
        }
      }
    }, 

[ludoboludo]

accent-1 is actually already the default value for the announcement bar color scheme. So we don't need to include this here because it will default to that color anyways.

I had changed the default value in the section itself since it for the default style but I do it the way you mentioned instead.

[martinamarien]

Looks good to me.

[LucasLacerdaUX]

I have a minor comment, but I'm approving this as I'm not 100% sure on this one (never implemented presets myself before). Could be a bug on my store.

Please try reproducing the issue on your own store.

[LucasLacerdaUX]

I think you need to explicitly repeat the preset values here, otherwise you can't go back to the default preset once you change it.

Suggested change

	"Default": {
	"sections": {
	"Default": {
	"colors_solid_button_labels": "#FFFFFF",
	"colors_accent_1": "#121212",
	"colors_accent_2": "#334FB4",
	"colors_text": "#121212",
	"colors_outline_button_labels": "#121212",
	"colors_background_1": "#FFFFFF",
	"colors_background_2": "#F3F3F3",
	"type_header_font": "lato_n3",
	"type_body_font": "lato_n3",
	"sections": {

To reproduce the issue:

1. Go to Theme Settings -> Theme Style
2. Change from Default to Craft.
3. Save and reload the page. You can't go back to Default preset.
4. Add the default values like I provided above. Repeat steps 1-3. It should now be possible to go back to default preset.

Maybe I'm doing something wrong or it's a bug with my store, though, so please validate before accepting this suggestion.

[martinamarien]

Ludo and I have both been able to reproduce this and have shared it with the appropriate team.
That said, if you change the current theme and upload it, it does show the preset correctly with the correct overrides. So I think we can be confident that the issue is not with the presets in the settings_data file.

[ludoboludo]

Ah but I see what Lucas means. If you set the default to Craft in settings_data.json which I think would replicate what happens when a merchant uploads a specific style from the theme store or free theme banner in the admin. Then change the style to default... it has nothing to go back to.
Video explanation (ugh my mic didn't work but basically I set the default as craft and switch back to default and nothing happens)

[ludoboludo]

@LucasLacerdaUX and @martinamarien just need a re review, I added the colors and font in the preset for the Default style.

[LucasLacerdaUX]

third time's the charm, I guess

[wiktoriaswiecicka-zz]

Looks great! ✨