HomeWiki
HomeWiki
  1. Vs Code
  • Back to home
  • 1. Themes
  • Layout
    • New Layout
    • Legacy Layout
  • Components
    • Announcement
    • Banner Carousel
    • Banner With Products Carousel
    • Blog Category List
    • Blog List
    • Brand List
    • Brands Carousel
    • Breadcrumb
    • Call To Action
    • Cart
    • Categories List
    • Change Password
    • Checkout
    • Cookie Manager
    • Filter list
    • Footer
    • Forgot Password
    • Form
    • Hero Carousel
    • Icon Block
    • Invitation
    • Last Visited Products
    • Layout
    • Login
    • Map
    • Nav Bar
    • Offer
    • Product Attachments
    • Product Attributes
    • Product Documentation
    • Product Expected
    • Product Modal
    • Products Block
    • Products Carousel
    • Product Single
    • Profile
    • Quote
    • Register
    • Related Products
    • Search
    • Stores
    • Subscribe Newsletter
    • Text with Image
    • Top Bar
    • Video
  • Reusables
    • Getting Started
  • Assets
    • Getting Started
  • SDK
    • Products
      • _findProductsByCategory
      • _findProductsByIds
      • _findProductsByTitle
      • _findProductsByFilter
      • _findProductsByCriteria
      • _findProductsAndCalculate
      • _findProductsThenCalculate
      • _getProductAttributeSet
      • _setLastVisited
    • Categories
      • _findCategoryTreeById
      • _findCategoriesByIds
      • _findCategoryByAlias
      • _findCategoryTreeByAlias
      • _getCategoryContent
    • Collections
      • _getCollectionContent
      • _findCollectionsByIds
      • _findCollectionsByIdsThenCalculate
    • Brands
      • _getBrandContent
      • _findBrandsByIds
    • Cart
      • _addToCartMulti
      • _addToCart
      • _setCart
      • _clearCart
      • _setCartListener
      • _removeFromCart
      • _calculateCart
    • Checkout
      • _startCheckout
      • _updateCheckout
      • _completeCheckout
    • Shopping Lists
      • _getShoppingLists
      • _updateShoppingList
      • _createShoppingList
      • _deleteShoppingList
      • _getShoppingListByAlias
    • Navigation
      • _getFooterMenu
      • _getHeaderMenu
    • Users
      • _getUserById
    • Utils
      • _calculateCurrency
      • _getCurrencySymbol
      • _getCulture
      • _subscribeToNewsletter
      • _findUnitsByIds
  • Vs Code
    • Getting Started
  1. Vs Code

Getting Started

Shopranos VS Code Plugin: Manage Your Theme with Ease#

Shopranos offers a powerful Visual Studio Code (VS Code) plugin that simplifies theme management, allowing developers to work within one of the most popular code editors. Here’s how it works:

Installation#

1.
Install the Plugin: Search for "Shopranos" in the VS Code Extensions marketplace or visit Shopranos VS Code Plugin to install the extension.
2.
Access the Plugin: After installation, the Shopranos app icon will appear in the left-hand toolbar within VS Code.

Login and Setup#

1.
Login: Navigate to the Shopranos plugin in the toolbar, and the app will prompt you to log in with your Shopranos credentials.
image.png
2.
Company Selection: If you have access to multiple companies, you'll need to select the company you want to edit themes for.
image.png
3.
Store Selection: If the selected company has multiple stores, you'll be asked to choose the specific store you want to work on.

Theme Management#

Automatic Download: After selecting the store, the current theme is automatically downloaded to a directory of your choice. You can upload this theme to a version control system like GitHub to maintain version history.
Directory Structure:
Assets: Manage images, scripts, and other media files.
Components: Edit and manage data components and reusable elements.
Layout: Customize the layout files for your theme.
Theme: Oversee the overall theme settings and structure.
image.png

Real-Time Updates#

Instant Reflection: Any changes you make in VS Code are instantly reflected in the staging environment of your eCommerce site, allowing you to see updates in real-time.
Component Management: Within the extension, you can create alternative views for components, delete components, upload assets, and add or edit reusable elements.
The Shopranos VS Code plugin streamlines the process of theme development, giving you a robust set of tools to manage your eCommerce site's design and functionality efficiently.
Previous
_findUnitsByIds
Built with