Getting started with the Horizon theme

[brahima]

Hello all,

I've started to play with the Horizon theme and successfully launched it locally but now I'm facing some issues.
I've read all the discussions hoping to find answers ... to no avail.

The editor

To my understanding, the horizon theme is still in beta and the integration with the swell admin interface still needs some work.
That's ok. In the meantime, I would be able to start using this theme for a future store i'd like to launch.

In my case, i see the new entries in the editor but some are not working correctly. I need to precise that i had previously tested the origin theme so i think i have some "conflicts" there.
For example the «Design and global settings» button does nothing. Also i get no preview ...

What are the conditions to be able to use the editor with the horizon theme ? (eg: a new store, no previous theme installed ...)

Sample data

In the mid term, i would like to setup my store and its content without using the editor (via a script to automate and quickly switch between environment).

Hence, is it possible to have access to all the sample (raw) data used by the horizon demo theme (https://swell-horizon-demo.vercel.app/). Maybe as json files pushed to the repo or by any other means. The current git repo «public» directory already contains the demo images.

The idea is to push this provided content via the Swell API and be able to play around with a fully functional theme and know how to use the different pages section (full_width_media, categories_preview, multiple_panels ...).

Currently what i'm getting is a visual mess because i have old content from an old theme and without the editor, it's quite tricky to format things correctly. (See below)

Here pricing are all 0 and selected product option is not visible.

Thanks in advance for your help

[rodrigoddalmeida]

Hi @brahima, could you share your store URL so I can take a look?

Since you have installed Origin and setup Horizon as well, data and some settings have been set for both. Ideally, you would need to clean up Origin's demo content and added settings to be able to start from a clean base.

[brahima]

Hello @rodrigoddalmeida and thanks for your answer.
Here it is : kotoboka-dev.swell.store

Indeed there's some misconfigurations in my settings. Some color settings are not retrieved properly on the front side.

See for example the bg-primary (should be #1D0A43) but is empty :

Notice the var(--colors-primary) in the right of the screenshot. The value is not known.

.bg-primary {
    background-color: var(--colors-primary);
}

The text-background-primary is Ok (#FFFFFF)

Hence, the selected option is not visible in my case because the bg-primary color is undefined

There's a lot of other problems like this one.

[brahima]

Hi again @rodrigoddalmeida,

In fact, i noticed that the theme_id associated to my store was origin.
This is what i saw when calling GET /settings/store. I updated it via a POST command with horizon.
It seems to have solved a few things when i run the theme locally via npm run dev. (styles/colors are ok now)

However, I still have some origin things in my settings (My product prices are still 0$ ...) and i think that every time i go to the editor and save, it puts back origin as the theme_id.

Regarding, storybook, i had to play npm run setup. I think that the theme generation helped it catch up with the new values.

I there a way to remove all the things related to origin and ensure my setup is clean ?

Thanks in advance

[DeviousLab]

Currently facing the same issue.

I just started experimenting with Swell, and I accidentally activated the Origin v2.0.12 storefront while setting up the Horizon theme repo on my local machine. Now a lot of the content/styles are broken.

Is there a way to decouple my repo from the Origin theme or to deactivate it entirely? I might just restart from scratch and create another store if that isn't the case.

[logeshswell]

@DeviousLab You can start creating a new storefront inside your store and push horizon theme code changes following the below instructions:
https://github.com/swellstores/horizon#getting-started
For more information, please refer to this thread

[dfeinberg10]

We are having a similar experience installing the Horizon theme. After previously installing Origin theme.

I was wondering if either of you made any progress decoupling? Did you have to start over?

@brahima @rodrigoddalmeida @DeviousLab

[logeshswell]

@dfeinberg10 You can start creating a new storefront inside your store and push horizon theme code changes following the below instructions:
https://github.com/swellstores/horizon#getting-started
For more information, please refer to this thread

[rodrigoddalmeida]

@brahima @DeviousLab @dfeinberg10 we'll release an update to Storefronts soon that will solve that for new stores. As a immediate workaround, you can push Horizon to your storefront repository, that way the platform will know which settings to keep.

[rishiimmehra]

How can i do that could you provide little guide on that

[rodrigoddalmeida]

@rishiimmehra You can follow this guide for setting up SSH keys and cloning your Swell repo: https://developers.swell.is/storefronts/update-swell-themes-with-git

The main difference there is that you should replace the repository contents with your Horizon-based project, or (as it is just a git repository) add a remote pointing to your Swell repository URL. You can then force push to it.

[rishiimmehra]

genrating ssh keys i add public keys in Developer tools inside ssh section after that i tried to clone my storefront repo

$ git clone git@swell.store:teess.git
Cloning into 'teess'...
git@swell.store: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

i get thist error could u tell me why it is happening
i did also add ssh key to ssh agent

[logeshswell]

@brahima We recently launched an update to the storefronts which resolved the most of the common issues raised.

What are the conditions to be able to use the editor with the horizon theme ? (eg: a new store, no previous theme installed ...)
I there a way to remove all the things related to origin and ensure my setup is clean ?

You can start creating a new storefront inside your store and push horizon theme code changes following the below instructions:
https://github.com/swellstores/horizon#getting-started

is it possible to have access to all the sample (raw) data used by the horizon demo theme?

Yes, Horizon theme generates & saves the sample data and configuration to the storefront that you created. There won't be any data corruption anymore when you use more than one theme, as the storefront data & configuration will be stored in separate storefronts instead of account-level (like previous).

Here pricing are all 0 and selected product option is not visible.

This issue will be resolved automatically as part of the auto-generation of horizon configuration.

[brahima]

Hi @logeshswell and thanks for your feedback.

I'll give it a try soon and confirm that all is fine for me.

Maybe you can also post a small comment here also to let anyone passing by in the future know that this is ok.

Thanks