{"id":19312174,"url":"https://github.com/bigcommerce/themes-lib-core","last_synced_at":"2026-03-19T09:14:01.570Z","repository":{"id":46132299,"uuid":"373505864","full_name":"bigcommerce/themes-lib-core","owner":"bigcommerce","description":null,"archived":false,"fork":false,"pushed_at":"2023-06-26T15:13:53.000Z","size":499,"stargazers_count":0,"open_issues_count":0,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-24T03:44:55.942Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bigcommerce.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-03T12:51:23.000Z","updated_at":"2021-11-11T17:53:09.000Z","dependencies_parsed_at":"2025-02-24T03:42:58.984Z","dependency_job_id":"b9f0c141-b245-482b-a813-aafd0f5be055","html_url":"https://github.com/bigcommerce/themes-lib-core","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bigcommerce/themes-lib-core","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fthemes-lib-core","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fthemes-lib-core/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fthemes-lib-core/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fthemes-lib-core/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigcommerce","download_url":"https://codeload.github.com/bigcommerce/themes-lib-core/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fthemes-lib-core/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29977966,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T16:35:47.903Z","status":"ssl_error","status_checked_at":"2026-03-01T16:35:44.899Z","response_time":124,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T00:33:26.163Z","updated_at":"2026-03-01T18:01:54.122Z","avatar_url":"https://github.com/bigcommerce.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BC-Core\n\nA collection of shared templates, styles, and javascript that can be used in themes to save time.\n\nThese templates are a work-in-progress, so please feel free to jump in on the fun !\n\n## Installation\n\nAdd or update your theme using the `install.sh` script. It's a good idea to do this on a clean brach so you can easily see the changes.\n\n```\n/path/to/bc-core/install.sh /path/to/my-theme\n```\n\nThis adds the following directories to your theme:\n\n- `templates/core/`\n- `assets/js/core/`\n- `assets/scss/core/`\n\nThese should be added to git, but remember that they do not belong to your theme—if you want to make a change either copy the file, or submit a PR to the bc-core repo.\n\nIn addition, it also adds a `core` object to your `lang/en.json` file.\n\n## Templates\n\nAll core templates are installed into your theme at `templates/core`. These have no effect on your theme, unless you explicitly include them.\n\n## Account Pages\n\nThe core account pages are designed so that you can import them from your account page templates in your theme and get a fully-functioning account section for free.\n\nFor example:\n\n```html\n\u003c!-- templates/pages/account/edit.html --\u003e\n{{#partial \"page\"}}\n  {{\u003e core/account/edit}}\n{{/partial}}\n{{\u003e layout/base}}\n```\n\n## Giftcard Pages\n\nThe three giftcard pages work in the same way except each of your templates need to include two partials, one for the page content and one for the navigation.\n\nBy default the navigation will be styled as three inline-block links in a horizontal row. To drop this styling and use your own, set `$giftcard-nav-use-default-styles` to false in your scss.\n\n```html\n\u003c!-- templates/pages/gift-certificate/purchase.html --\u003e\n{{#partial \"page\"}}\n  \u003carticle class=\"page-container\"\u003e\n    {{\u003e core/gift-certificate/navigation page='purchase'}}\n    \u003cdiv class=\"page-content\"\u003e\n      {{\u003e core/gift-certificate/purchase}}\n    \u003c/div\u003e\n  \u003c/article\u003e\n{{/partial}}\n{{\u003e layout/base}}\n```\n\nThe giftcard class should be all you need for the giftcard functionality to work in your theme:\n\n```javascript\n// assets/js/theme/GiftCertificate.js\n\nimport GiftCertificate from './core/GiftCertificate';\n\nexport default GiftCertificate;\n```\n\n## Unavailable pages\n\nPartials for maintenance/hibernation pages come with their own stripped-down layout file and therefore should be included standalone without any reference to the base.html layout:\n\n```html\n\u003c!-- templates/pages/unavailable/maintenance.html --\u003e\n{{\u003e core/unavailable/maintenance}}\n\n```\n\n## Invoices\n\nThe printable invoice template (`/templates/core/account/orders/invoice.html`) is a standalone template with its own layout that does not rely on theme.scss at all. It uses invoice.css, which you'll need to include as a separate file under `/assets/scss`:\n\n```scss\n// assets/scss/invoice.scss\n@import \"core/invoice\";\n\n// this template doesn't really merit any overrides,\n// but you could do this if you really wanted to:\nbody {\n  font-family: $primary-font;\n}\n\n```\n\n## Images\n\nThe core templates rely on a few image size strings to be defined in your `settings._images` object:\n\n**core-swatch:** For swatch (product option) patterns. The maximum size is 150x150.\n\n**account-product-thumbnail:** All product images: product grids, orders/returns lists, and downloadable products.\n\n**account-logo:** The version of your theme's logo used both on the maintenance/hibernation pages as well is in the header of the printable invoice.\n\n**core-product-picklist:** The product thumbnail pulled in by the Picklist product option type.\n\n### Default image\n\nYou also must have a `settings.default_image` defined, which is a path to your theme's fallback image, i.e. `\"/assets/img/no-image.svg\"`.\n\n#### TODO\n`default_image` should be kebab-case, as we seem to moving in the direction of that being the convention.\n\n## Styles\n\nImport the core styles into your theme with `@import \"core/account\";`. Have a look at the root `core/_account.scss` for a reference of what variables are at your disposal.\n\nBelow is an example of how you could include core styles into your theme. This example is overriding some core variables and styles.\n\n```\n// Variable Overrides\n$account-light-color: $input-background-color;\n$account-accent-color: $accent-color;\n$account-border-color: $border-color;\n$account-gutter: $gutter;\n$account-font-size: $font-size;\n\n// Import\n@import \"core/account\";\n\n// Style Overrides\n.account-wrapper {\n  @extend %wrapper;\n  margin-top: $gutter * 2;\n}\n```\n\n## Javascript\n\nCore includes all javascript needed for the account pages to work -- just import and them immediately export the **Account.js**, **Auth.js** and **GiftCertificate.js** classes into your own theme:\n\n```js\n// assets/js/theme/Account.js\nimport Account from './core/Account';\n\nexport default Account;\n```\n\n###Additional `\u003cselect\u003e` JS\nBut! If you're require additional javascript for your select inputs, extend Auth and Account  instead of exporting them and enjoy to the `selectWrapCallback()` method which is called every time a new `\u003cselect\u003e` element is appended to the DOM (on any auth or account pages). Important when swapping between a select and text input in account address fields.\n\n```js\n// assets/js/theme/Auth.js\nimport CoreAuth from './core/Auth';\n\nexport default class Auth extends CoreAuth {\n  selectWrapCallback($selectEl) {\n    console.log('there is a new select element on the page', $selectEl);\n  }\n};\n```\n\n## Caveats\n\n - As of February 24, 2015, please style your own product grids. Product grid templates can be passed a custom `products_per_row_class` to assist in grid styling.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigcommerce%2Fthemes-lib-core","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigcommerce%2Fthemes-lib-core","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigcommerce%2Fthemes-lib-core/lists"}