I am looking for a particular div in the Shopify Liquid files of a large-ish site I am new to and that I did not build. However, I have to check the files one by one to find if the div is there, which is unefficient. The PHPStorm editor has the ctrl+shift+F option to search the file arborescence for a specific string in any file. Does Shopify have an equivalent, and what is it?
Not to be confused with:
Adding a search bar on a Shopify site
Searching Shopify store admin (I need to look at the Liquid code, not the store)
Tried already:
Googled 'shopify equivalent of phpstorm ctrl+shift+F'
Googled 'shopify keyboard shortcuts'
Googled 'shopify find in path'
Googled 'shopify search code'
Found no relevant result.
I'm afraid I have never seen such feature on the Shopify Editor. What I usually do, however, if you're not working with the theme locally already is:
Export the theme via Download Theme File
Download the .zip and extract it.
Open it with your favourite Editor (I personally use Sublime)
Use Find in Folder or your text-editor equivalent to search for the string on the whole theme.
Sadly, there's no better workflow as of now. You should consider however, setting up your theme locally so you can take advantage of version control and a more organized workflow that could help maintenance and new updates on that site.
2 options:
1) download locally (many devs work locally now using theme kit or another tool)
unzip theme and do a search either with text editor or with file manager
2) you can also use screaming frog to scan sites in detail - may be more useful though in cases where the div is not actually technically in theme but say in a metafield or added by an app.
Related
Creating Modified Blog Entries
I am new to React, and very much to Docusaurus, however, I've managed to get a decent looking DS site going. I am trying to capture some simple snippets to as "blog entries", just small factual snippets, etc. simple project summaries. I’ve hit the limit of the Docusaurus.config options and not sure how to expand the out of box components.
How do I begin to alter and edit Docusaurus to change the Blog page to be like "Cards" in component-speak? Ive seen some example in Infima, but not sure how to bridge that gap?
How can I easily replicate the Announcement Bar to also be at the bottom, like a Banner?
Thank You!
One possible arena for you to use is Bootstrap — specifically React-Bootstrap. They have a card component you could use where you link individual blog entries to that card. If you're comfortable with JavaScript, there's probably an automation you can build there, but hand-coded text is somewhat part and parcel with static-site generators.
If you want a different solution with the CSS code in your src file outright, CSSCodeLab has a React Card layout entry with an attached source code file. Some hand-coded text required, and not automatically integrated with a separate blog setup, but YMMV.
Otherwise Docusaurus' Showcase page does provide the card formatting. The source code for the page (coded at index.tsx) as well as the components are available.
I'm editing BigCommerce's cornerstone theme template with stencil and want to view and make changes to the admin interface. Much like what's happening in this video tutorial https://www.youtube.com/watch?v=mdhSLKpTOBY&list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0&index=9
But I'm not sure how to access the theme editor locally. I saw that the --theme-editor commands were removed from the stencil cli. It says that we should look at this documentation instead https://developer.bigcommerce.com/stencil-docs/configure-store-design-ui/store-design-overview but that doesn't show how the theme editor could be accessed from a local environment. Is this possible?
Is the only option to upload the theme and edit it from there? Has the ability to use a theme editor locally been removed?
As far as natively supported features, the Stencil CLI deprecated support for live theme editing due to it no longer matching the experience found on the platform. You can find these details on a related GitHub issue reported here: https://github.com/bigcommerce/stencil-cli/issues/601
Until this feature is reintroduced, you'll need to bundle the theme and apply it to a store to review the theme editor.
I don't think you can access the Theme Editor from a local environment directly.
If you want to add configurable options, you would be editing schema.json and adding new sections there. In that way, you can add entirely new Text Inputs, Checkboxes, Dropdowns, that would allow store administrators to edit those entries.
The values that are being changed are located in config.json -- those are all the theme_settings that you can access inside of Handlebars, and they can also be injected into JavaScript via context.
So essentially you want to create new entries in config.json, and create new mappings in schema.json to allow those entries to be edited in the Theme Previewer. You should be able to put together how to make new sections by trying to parse the existing fields in the schema file, and I think BC has additional docs here:
General Overview:
https://developer.bigcommerce.com/stencil-docs/configure-store-design-ui/defining-ui-options
Adding a new "Text Input" option in schema.json - API reference - you can navigate around that opened section in the sidebar to see all available schema types:
https://developer.bigcommerce.com/stencil-docs/page-builder/schema-settings/input
I am new to working with a CMS-platform and building an ecommerce website so please bear with me if my questions aren't spot on..
While I understand the concept behind a CMS-platform, I am trying to understand how I can build a custom website using the Liquid Theme Engine and VC. I have the platform and storefront both up and running locally (the electronics example store), and have even played around with extending a model and generating the new API endpoints for it(adding a wishlist type to the shopping cart) - this part is cool, I understand this is how the data is accessed.
However Liquid is new to me and I have a little understanding of how Angular works but not in a platform framework like VC, and Google searches are diluted with Shopify documentation which doesn't help me understand how a Liquid Theme fits into VC. If I spend the time to understand Liquid more, is my end goal to build a website theme in Liquid, and then reference that in the platform as the websites theme?
Are there any resources out there, besides what is listed on the VC website that could help connect the dots for me? (I think I've tried all the documents on the VC site and there are a lot of missing gaps)
Thanks
What the questions exactly you have? We have a large readme file for default theme. Also, here is a link to our docs about theme development. This topics describe theme structure, bundling & minification, localization and liquid language reference. Here is also a little explanation how theme work:
In Storefront, you have Controllers, which return View
ASP.NET view is template in Shopify terms. So LiquidThemeEngine try find this view in templates folder
Template may include snippets from snippets folder
Template have layout (usually header, body & footer) from layout folder (theme.liquid is default layout)
Templates and snippets may include angular components & controllers from assets/js folder and other static files (like images required by theme design) in root of assets or subfolder.
I've enabled stencil themes for my store, and am trying to use "Cornerstone" as my theme. However, the whole reason for opting in and trying out new stencil themes is their built in support for multiple languages. I need my store to at least be available in Swedish, and if possible, English as well.
I've followed the documentation adding a "sv.json" file to the langs folder, and uploaded the modified theme to my store and applied it. No changes. I've ensured my browser is setting the "Accept-Language" header to "sv".
https://stencil.bigcommerce.com/docs/the-schema
I've also tried modifying the default en.json file, but I still can't see any changes in my store...and that seems a bit strange to me?
What am I missing, is this feature not really implemented yet, or am I screwing something up with the "upload zipped theme to store admin and apply"?
https://support.bigcommerce.com/articles/Public/Custom-Theme-Upload
Any pointers are very appreciated!
I am using FCK Editor 2.6.4 and having problems trying to embed a (non-YouTube) video into a content area.
I found this previous question / post:
[EDIT -- as a new user, I am only able to post one link in this post. The post in question is titled, "Can I embed video using FCK Editor?")
and have investigated all of the proposed solutions, but none of them work properly:
1 -- Using the "Embed Flash" button in the control panel almost works. However, the video I am attempting to add contains a querystring with parameters, like this:
http://static.animoto.com/swf/w.swf?w=swf/vp1&e=1275795594&f=mGQklEgxXKs9vfEIdGnWsA&d=132&m=p&r=w&i=m&ct=Homes%20in%20Eagle%20Creek&cu=http://hometoindy.com/eagle-creek-real-estate.php&options=
and in using the Flash embed tool, it encodes all of the "&" characters to "& amp;", thus breaking them. If it were just for me, I could manually change them back, but clients who use this will not know how to do that.
2 -- I have installed the YouTube video plugin, and it works great... for YouTube. But it cannot be used to embed non-YouTube videos (it automatically changes the URL to YouTube, no matter what).
3 -- I have installed the EmbedMovies plugin, but it throws a javascript error when attempting to add a video file (such as the above) to a page. (The EmbedMovies plugin page on SourceForge says it has been updated for FCK Editor 2.6, but it does not work.)
4 -- Pasting directly into the editor window (of course) does not work. The only way I've been able to make this work is by pasting into the Source panel, and this is not a good option for clients who are not familiar with HTML.
So, is there a good, working plugin for FCK editor that will allow me to quickly and easily embed a video such as the one above into a content area? I don't need to be able to see or preview it in the editor window; I just need it to work when the page is loaded on the front end.
Thanks!
Given the question you found, and scarcity of answers to that, chances are that the plugin you want does not exist.
If your videos are actually from one, though non-standard, source, I can only repeat my advice from that topic - write your own plugin. I have code of plugin I wrote linked there, it should be easy to change it to accomodate your needs.