Shopify

Undoubtedly, one of the features that has made Shopify one of the best e-commerce platforms is its ease of use, in a few clicks the manager of a store has many customization options available that allow them to keep their web dynamism and activity necessary for online sales. Many of the options that Shopify incorporates in its administration menus are typical of the platform’s "core", and are equally available to all users, however, there are others that fall within the scope of the "theme". While the core is the base structure of any store, the theme is responsible for giving each one their own personality and defines the characteristics that differentiate it from others in such a competitive market as internet sales. The difference, exclusivity and quality offered to the user interface are the key to success. In the Shopify Themestore  you can choose from a wide variety of topics, both free (those offering fewer, simpler options) and paid, both are available to be downloaded and installed in minutes, however, if changes are not implemented, we may find that the store does not stand out among the others or that it even resembles another one and that may cause confusion among final customers. Theme customization options allow for a more exclusive and personal theme, these are very powerful and at the same time easy to use. To access these options the manager user has to navigate the Shopify menu administration to "Online Stores Sales channel >> >> Themes" and click on "Customizetheme" on the theme they want to customize. The configuration page of the theme to which you can access has a preview of the store and a sidebar with the available customization options. Furthermore, this bar has some generic predefined sections, like "Checkout" where some options of the payment process are configured. The important and interesting is that the developer of each theme can include as many configuration options as they want and with varying purposes. Examples of use are: Change background photo of a block of the cover. Change the text and color of a message that appears in the footer of the entire web. Select a collection to be displayed in a prominent block. For the first example of the list we will assume that there is a block on the front of the store with the "highlight-cover" CSS class, we will achieve the desired effect by performing the following steps: 1. Create the configuration option. By clicking on the menu option "Edit HTML / CSS" we enter the editing screen of the theme files, we have to look for the "Settings" section, where we find two files: settings_data.json and settings_schema.json. For our purposes we will focus on the second (in case there are options left undefined it will be empty, or may not exist) in any case, we must bear in mind that this is a .json file and therefore we must respect the syntax and structure of such files. For this example and this unique configuration option, the file content would be: [ { "name": "Fondo de Bloque de Portada", "icon": "header", "settings": [ { "type": "image", "id": "bg-front-block.jpg", "label": "Imagen de fondo", "info": "Suba una imagen de 300x400px" } ] } ] The "name" property is the title of the section that appears in the sidebar on "Customizetheme" along with an icon defined the "icon" feature on a list of predefined options (blog, cart, collection, color, contact, currency, etc.) Under "settings" we specify each field yet to be filled in by the user, in this case only have one, which is the file to be used as background block for each field. There are a number of available properties: Type (required). Type of control to use. ID (Required). Internal unique identifier of the field, only alphanumeric characters, Numbers and hyphens are allowed. Label (required). Field label. Default (Optional). Default value field. Info (Optional). Additional information about the field appears as a small informative tooltip.   With the code we showed in this example the option to upload a photo background for the cover block would be available for the user, they could upload it and change it as much as they like to.   2. Use the value defined by the user. When the user saves any defined customization options, the system is responsible for storing each value and from then on, it is available for use in any of the theme’s liquid templates. To access these values, the system has the “settings” feature which properties correspond to each of the defined values ​​and can be used in any .liquid file, generally using the usual syntax ({{settings.id_propiedad}}). The way to access the property value may vary depending on the type of field, in our example it is not necessary to use the “settings” object because we can directly access the asset, the background image block cover will be used in the file style.liquid.scss: .destacado-portada { background-image: url('{{ 'bg-front-block.jpg' | asset_img_url: 'original' }}'); } When the "type" of a field has been defined as "image" and the user saves an image, automatically a file is created whose name is the "id" field within the "Assets" theme folder, being available from now on to be used like other files. If the user goes to another file field, the system automatically updates the stored file, so that wherever they are using it the new one appears. There are other types of fields, each has its own characteristics, and depending on what you want to achieve, you use one or the other. Available types and how to use them are available in the complete settings_scheme.json reference file, Combining these fields and customization settings with an intelligent and creative development, this tool becomes a very powerful and flexible system that guarantees our Shopify store won’t leave anyone indifferent, creating competitive advantages to differentiate us and make us stand out from the other shops in the sector.   Main photo: Asa Rodger