coding

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

Google remarketing is a powerful tool for displaying AdWords ads to visitors to our web site based on a set of rules that can be customized. The drupal webform module is one of the most used, especially to create contact forms, information requests, registrations, etc. In this article we will explain how to make a module that allows us to remarket to users who have submitted a form with a specific value selected, which will create a callback in our module responsible for creating the webform submission confirmation url, including only a single parameter of product, service or topic on which we want to remarket.  We will use as an example a webform that has a product selection component in which there are 3 options: 1 | Premium 2 | Advanced 3 | Basic The aim is for the webform submission confirmation page to include the selection code for which the user has requested information, so that we can configure our AdWords product knowing what the user is interested in. To do this, we will set a confirmation page with a fixed part and a second dynamic part, including the selected product from the webform, so the possible URLs in our example would be: /envio-realizado/1 /envio-realizado/2 /envio-realizado/3 We must additionally configure the webform to use a custom URL that we create as the confirmation page and add it to the parameters that the user has selected on the form. The first thing to do is create the module, in Drupal's hook_menu, which will provide a custom URL and callback to handle these requests. We will call our example "webform_remarketing." /** * Implements hook_menu(). */ function webform_remarketing _menu() { $items = array(); $items['envio-realizado/%'] = array( 'title' => 'Submission received', 'description' => 'Confirmation page for webform', 'page callback' => 'webform_remarketing _confirmation_page', 'page arguments' => array(1), 'access arguments' => array('access content'), ); return $items; } Once we have created the menu, we need to add the function defined in the callback page that will provide the content for display on screen: /** * Confirmation page menu callback. */ function webform_remarketing _confirmation_page ($producto) { return . t('Submission received') . ; } This function is an example for teaching purposes, so it just shows a simple message.  Logically, it's common to want to show more content, so it's good to remember that all content displayed to the user should use a theming feature so it can be easily modified by the site developer. The next step we need to take is to modify the configuration webform to use the confirmation page that we created in our module and pass the value selected by the user.  To do this, edit the webform options in the "form settings" tab.  Among other options, there is a section called "address redirection" which offers 3 options.  We need to select "Custom URL" and enter the URL that we defined in our module and make the webform correctly pass to the second part of the URL the value set by the user in the product selection component.  For this we use the corresponding token, which in this case would be [submission: values :?] where the “?” must be replaced by the form_key of the component.   Assuming that the value is “product," what we should put in this field would be: envio-realizado/[submission:values:producto] With this, we have achieved our goal.  When a user fills out the form and requests information about a product, the confirmation URL includes the code for that product, so we can configure remarketing using these URLs in AdWords and set our campaigns.