Connect with us

Blog

Magento 2 theme development tutorial

mm

Published

on

This theme discusses how to create the files that make up a theme, how to add a logo to a theme, how to add css and how to size images, etc…
Create a storefront theme intro points:
The steps required to add a new theme in the Magento are the following:

  1. Create a directory for the theme under app/design/frontend/< vendor_name>/< theme_name>.
  2. Add a declaration file theme.xml.
  3. Add a composer.json file.
  4. Add registration.php.
  5. Create directories for CSS, JavaScript, images, and fonts.
  6. Configure your theme in the Admin panel.

Declare your theme:

Add or copy from an existing xml to your theme directory app/design/frontend/<Vendor>/<theme>

Configure it using the below example:-

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>ulk</title> <!--theme name -->
     <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
     <media>
         <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
     </media>
 </theme>

Make your theme a Composer package:

{
    "name": "magento/theme-frontend-ulk",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/theme-frontend-blank": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Add registration.php:
To register your theme, in your theme directory add a registration.php file with the following content:-

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Dsvk/ulk',
    __DIR__
);

Configure images:
If you want ot add different product image sizes in your theme, add view.xml using the following steps:

  • Create the etc directory in your theme folder
  • Copy view.xml from the etc directory of an existing theme.
  • Configure all storefront product image sizes in view.xml, here is how the corresponding configuration would look below example:-
<?xml version="1.0"?>
<!--
/**
 * Copyright © 2017 Magento. All rights reserved.
 */
-->
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="bundled_product_customization_page" type="thumbnail">
                <width>140</width>
                <height>140</height>
            </image>
            <image id="cart_cross_sell_products" type="thumbnail">
                <width>200</width>
                <height>248</height>
            </image>
            <image id="cart_page_product_thumbnail" type="small_image">
                <width>165</width>
                <height>165</height>
            </image>
            <image id="category_page_grid" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
            <image id="category_page_grid-1" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
            <image id="category_page_list" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
            <image id="customer_account_my_tags_tag_view" type="small_image">
                <width>100</width>
                <height>100</height>
            </image>
            <image id="customer_account_product_review_page" type="image">
                <width>285</width>
                <height>285</height>
            </image>
            <image id="customer_shared_wishlist" type="small_image">
                <width>113</width>
                <height>113</height>
            </image>
            <image id="gift_messages_checkout_small_image" type="small_image">
                <width>75</width>
                <height>75</height>
            </image>
            <image id="gift_messages_checkout_thumbnail" type="thumbnail">
                <width>100</width>
                <height>100</height>
            </image>
            <image id="mini_cart_product_thumbnail" type="thumbnail">
                <width>75</width>
                <height>75</height>
            </image>
            <image id="new_products_content_widget_grid" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
            <image id="new_products_content_widget_list" type="small_image">
                <width>270</width>
                <height>340</height>
            </image>
            <image id="new_products_images_only_widget" type="small_image">
                <width>78</width>
                <height>78</height>
            </image>
            <image id="product_base_image" type="image">
                <width>265</width>
                <height>265</height>
            </image>
            <image id="product_comparison_list" type="small_image">
                <width>140</width>
                <height>140</height>
            </image>
            <image id="product_page_image_large" type="image"/>
            <image id="product_page_image_medium" type="image">
                <width>700</width>
                <height>560</height>
            </image>
            <image id="product_page_image_small" type="thumbnail">
                <width>88</width>
                <height>110</height>
            </image>
            <image id="product_page_main_image" type="image">
                <width>700</width>
                <height>560</height>
            </image>
            <image id="product_page_main_image_default" type="image">
                <width>700</width>
                <height>560</height>
            </image>
            <image id="product_page_more_views" type="thumbnail">
                <width>88</width>
                <height>110</height>
            </image>
            <image id="product_stock_alert_email_product_image" type="small_image">
                <width>76</width>
                <height>76</height>
            </image>
            <image id="product_small_image" type="small_image">
                <width>135</width>
                <height>135</height>
            </image>
            <image id="product_thumbnail_image" type="thumbnail">
                <width>75</width>
                <height>75</height>
            </image>
            <image id="recently_compared_products_grid_content_widget" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
            <image id="recently_compared_products_images_names_widget" type="thumbnail">
                <width>75</width>
                <height>90</height>
            </image>
            <image id="recently_compared_products_images_only_widget" type="thumbnail">
                <width>76</width>
                <height>76</height>
            </image>
            <image id="recently_compared_products_list_content_widget" type="small_image">
                <width>270</width>
                <height>340</height>
            </image>
            <image id="recently_viewed_products_grid_content_widget" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
            <image id="recently_viewed_products_images_names_widget" type="small_image">
                <width>75</width>
                <height>90</height>
            </image>
            <image id="recently_viewed_products_images_only_widget" type="small_image">
                <width>76</width>
                <height>76</height>
            </image>
            <image id="recently_viewed_products_list_content_widget" type="small_image">
                <width>270</width>
                <height>340</height>
            </image>
            <image id="related_products_list" type="small_image">
                <width>152</width>
                <height>190</height>
            </image>
            <image id="review_page_product_image" type="small_image">
                <width>285</width>
                <height>285</height>
            </image>
            <image id="rss_thumbnail" type="thumbnail">
                <width>75</width>
                <height>75</height>
            </image>
            <image id="sendfriend_small_image" type="small_image">
                <width>75</width>
                <height>75</height>
            </image>
            <image id="shared_wishlist_email" type="small_image">
                <width>135</width>
                <height>135</height>
            </image>
            <image id="side_column_widget_product_thumbnail" type="thumbnail">
                <width>75</width>
                <height>90</height>
            </image>
            <image id="upsell_products_list" type="small_image">
                <width>152</width>
                <height>190</height>
            </image>
            <image id="wishlist_sidebar_block" type="thumbnail">
                <width>75</width>
                <height>90</height>
            </image>
            <image id="wishlist_small_image" type="small_image">
                <width>113</width>
                <height>113</height>
            </image>
            <image id="wishlist_thumbnail" type="small_image">
                <width>240</width>
                <height>300</height>
            </image>
        </images>
    </media>
    <vars module="Magento_Catalog">

        <!-- Gallery and magnifier theme settings. Start -->
        <var name="gallery">
            <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
            <var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
            <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
            <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
            <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
            <var name="allowfullscreen">true</var> <!-- Turn on/off fullscreen (true/false) -->
            <var name="navdir">horizontal</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->
            <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides (true/false) -->
            <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
            <var name="transition">
                <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                <var name="duration">500</var> <!-- Sets transition duration in ms -->
            </var>
            <var name="fullscreen">
                <var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
                <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
                <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false/null) -->
                <var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview (true/false/null) -->
                <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
                <var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in full screen(horizontal/vertical)  -->
                <var name="thumbwidth">150</var> <!-- Width of thumbnails in fullscreen -->
                <var name="thumbheight">150</var> <!-- Height of thumbnails in fullscreen -->
                <var name="navigation_carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
                <var name="transition">
                    <var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                    <var name="duration">500</var> <!-- Sets transition duration in ms -->
                    <var name="carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
                </var>
            </var>
        </var>

        <var name="magnifier">
            <var name="fullscreenzoom">5</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top"></var> <!-- Top position of magnifier -->
            <var name="left"></var> <!-- Left position of magnifier -->
            <var name="width"></var> <!-- Width of magnifier block -->
            <var name="height"></var> <!-- Height of magnifier block -->
            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
            <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
        </var>

        <var name="breakpoints">
            <var name="mobile">
                <var name="conditions">
                    <var name="max-width">767px</var>
                </var>
                <var name="options">
                    <var name="options">
                        <var name="nav">dots</var>
                    </var>
                </var>
            </var>
        </var>
        <!-- end. Gallery and magnifier theme settings -->

        <var name="product_small_image_sidebar_size">100</var>  <!-- Override for small product image -->
        <var name="product_base_image_size">275</var>           <!-- Override for base product image -->
        <var name="product_base_image_icon_size">48</var>       <!-- Base product image icon size -->

        <var name="product_list_image_size">166</var>           <!-- New Product image size used in product list -->
        <var name="product_zoom_image_size">370</var>           <!-- New Product image size used for zooming -->

        <var name="product_image_white_borders">0</var>
    </vars>
 </view>

Add theme logo:
The default format and name of a logo image is logo.svg, which is <theme_dir>/web/images directory.
Declaring theme logo:
To declare a theme logo, add <theme_dir>/Magento_Theme/layout/default.xml layout.

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2017 Magento. All rights reserved.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_img_width" xsi:type="number">148</argument>
                <argument name="logo_img_height" xsi:type="number">43</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Now Run following commands:

Also Read :   WordPress Design and Development

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

chmod -R 777 var pub static

Note:  If you will get error in command run process then, delete pub -> frontend and var -> view_preprocessed folder and again run command.

Hi, Thank you for reading my article. I am Victor, a professional blogger from Jaipur, India.I started webetutorial for blogging & sharing solution for developer questions, and now it’s empowering globally by helping them to make money.I am writing about starting & managing a blogs, WordPress, Magento, Social Media, SEO, Marketing, making money online, Investment, Finance, Gadgets, Fitness and more.

Continue Reading
Advertisement
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

nine + 3 =

Blog

Ways to Increase Comments on Your Blog

mm

Published

on

Ways to Increase Comments on Your Blog

Everyone knows commenting on the other website blogs give the benefits of backlinks, traffic, and branding of our linked website and we are trying lots of things to create a good backlinks which would give a huge converting traffic to us. Sometime people commenting a those website which doesn’t have good reputation or not a much traffic so, their efforts are not useful for them.

Commenting is the ways to drive traffic that is facebook commenting, twitter commenting or website commenting. Here we are going to tell you about some points which may give you huge traffic to increase comments on your blog.

Blog Comment Points Are:

Get visitors to subscribe: Many readers don’t want to comment at first time on your blog because they don’t have much truest on your blog and they don’t know about how much the traffic on your blog getting. To ask them to subscribe to your blog for more blog or webinar this will help to increase comments, traffic and revenue.

Also Read :   Best eCommerce Web Development Design Company in USA & India

Disable spam prevention methods: If you are using captcha, then you need to remove them so user can comment without any interruption.

Avoid forcing registration: If you are using registration process for commenting on your site ten remove them because this create far too much resistance and makes it much more irritate for your visitors to comment.

Link to your comments section at the end of your post: Lot of blog themes have a problem with its comment section, visitors have to scroll the whole page at the bottom for the commenting. Your blog should have comment link at the top of page with blog title where visitor can click and move directly to comment section.

Go back and think about the audience you’re trying to reach: If you are getting many comments then try to give answer of your visitors which give your attention to your visitor and help you to reach your goal and focus on the right areas.

Also Read :   HTML Images

Leave an unanswered question at the end of your post: Ask a question at the end of blog which is the one of the best ways to get readers attention to comment on your blog. Your aim should to develop a discussion within your comments and the more discussion.

Respond to comments and encourage more conversations: As we talk in Go back and think about the audience you’re trying to reach engaging your audience for getting more comments in general ways to respond to comments for further conversation.

You can let us your point of views in the comment or subscribe us to get more blog from us.

Continue Reading

Trending