Solved: Can I change themes with with a Square Online stor...

jwdesign · ‎06-01-2019

I have a Weebly site set up via a Square Online Store, and I would like to edit the Theme template HTML. Is this possible? I cannot even seem to find where I can change the theme after set up.

Adam7 · ‎06-02-2019

It's not currently possible to change themes or edit the html/css, although these are things that we're working on bringing to the editor experience used by a Square Online Store.

View Best Answer >

Adam7 · ‎06-02-2019

It's not currently possible to change themes or edit the html/css, although these are things that we're working on bringing to the editor experience used by a Square Online Store.

jwdesign · ‎06-02-2019

Thank you for the answer. Good to know I'm not missing anything, though adding the ability to at least *change* a theme seems fairly important. In this instance I'm glad the first one I picked was mostly workable out of the box.

Adam7 · ‎06-02-2019

No problem! With the newer editor experience you get more control over some aspects of the design that you would have to change themes for in the past. For example, you can swap the order of your logo and navigation at the top of your site.

GFB1 · ‎09-20-2019

BTW, this is not working. I tried to inject css into the custom header code section and received the following error:

Invalid HTML detected. Only <script> <noscript> <meta> are allowed as root HTML tags.

Tried to add:

Bernadette3 · ‎09-21-2019

Hi @GFB Can you clarify what you mean by "this is not working". What type of code were you adding and what was the code supposed to do? Thanks!

FrankRook · ‎10-19-2019

Bernadette,

Did you even read GFB's entire post (past "this is not working")?

As advised by Adam the "community manager" above, he tried adding custom style colde to the header section of his site but got this error:

"Invalid HTML detected. Only <script> <noscript> <meta> are allowed as root HTML tags."

I ran into the same problem. Is custom CSS not allowed in the <head>?

Adam7 · ‎10-20-2019

I wasn't aware at the time of my original answer, but we don't allow <style></style> tags in the Header Code field of the newer editor experience used for Square Online Stores and some Weebly sites. There is an Embed Code section that you can add to a page which does allow that, though. Hopefully what @GFB wants to do is only specific to that page, so they don't need to add that section to every page.

spewk · ‎10-20-2019

It seems like using the Embed Code section only lets you add css which affects that section, not even the page.

Please let us add css into the header code, it will allow for so much more customization.

pliske · ‎10-14-2020

I'm using Square Online and I'm also a web developer, so I'd like to take advantage of these style tags. But I'm not finding this editable section anywhere. Please give some direction, if you can. Thanks!

Adam7 · ‎10-20-2019

It should work for the page, although depending on where or how we have our own CSS included in the HTML structure you might have to use an !important declaration for it to override a particular rule.

spewk · ‎10-20-2019

I've tried multiple different classes, including !important, and moving the location of the section.

Can you confirm for certain that it works for the page?

Adam7 · ‎10-21-2019

What page of your site did you add your code to?

lookitscook · ‎12-30-2019

I'd also like to +1 for proper theme editing. Super hacky to do this via code insertion in the <head>. If anyone else does run into this (and proper theming has not yet been implemented). It's possible to do with the current "code" option by using something like this in the <head>:

<script>
var css = 'h1 { background: blue; }';

(function(){var s=document.createElement('style');document.head.appendChild(s);s.type='text/css';s.appendChild(document.createTextNode(css))})();
</script>

thehenpen · ‎01-16-2020

Any update on when Weebly might be adding the option to change themes for Square users? This is a much-needed option since when I initially setup my site, I didn't realize I would be married to this template forever.

Adam7 · ‎01-16-2020

I don't have any specific updates or ETAs, although I don't think we are super far off from seeing this, @thehenpen. I don't want to try and guess at a timeline, though, since release windows can fluctuate and change based on different factors.

jtgi · ‎04-22-2020

Can do like this if you want to do so inline:

<script>
var styles = `
    .w-banner h1 {
     text-shadow: 1px 1px #000;
   }
`

var styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);
</script>

Or host css externally:

    <script> 
        var head = document.getElementsByTagName('HEAD')[0];  
        var link = document.createElement('link'); 
        link.rel = 'stylesheet';  
        link.type = 'text/css'; 
        link.href = 'http://example.com/style.css';  
        head.appendChild(link);  
    </script>

joanjim · ‎04-24-2020

Hi there - sorry for this rookie question. I just set up a Square Online Store and the lack of ability to edit the design is super frustrating. When I go to Website > Integrations, I see "Add custom header code" which appears to be the place to add your code. I've tried, but nothing changes. I've edited your css to see if I can change font size or something simple and nothing happens. Am I doing something wrong?

Any help is appreciated!!

(Also, I am realizing that I have never chosen a 'theme'... does this mean I'm using a different builder?)

Adam7 · ‎04-26-2020

The header code field shouldn't actually allow you to add any CSS code, @joanjim. You can add that to individual pages with the Embed Code section, though. Also, the website editor used for some Weebly sites and Square Online Stores does not currently support changing themes, although that will be an option in the future. What part of your design are you looking to change?

joanjim · ‎04-26-2020

Thanks, @Adam. For the most part, I just want to change text sizes and text treatments. The options are really slim and I find the "Large" fonts too small.

I don't see an Embed Code section anywhere - any idea what I'm missing?

Adam7 · ‎04-26-2020

That section is only available for regular pages, but it looks like you only have an "order online" page and gift card page. It's probably not a solution that would work for you, though. For what it's worth, I don't have perfect vision and need reading glasses at times and they seem fine to me as far as size goes. The only font that looks a little small to me are the category links at the top, so you could try changing those to the large size. I'll share your feedback regarding having more control over styling, though! Hopefully we can add more to that in the future.

Can I change themes with with a Square Online store or edit the CSS?