Select each step below to view the instructions:
If you’re setting up a Shopify store for the first time, we recommend taking a gander at the Shopify Help Center for a full overview of the platform.
In our article Getting Started: Shopify Basics, we cover the essentials for getting your store up and running, including adding products, setting up collections, and creating a blog. Once you’ve got these things set up, you’ll be in a good position to start customizing your theme.
If you purchased your theme directly from Shopify, it will be automatically installed when you log into your Shopify admin.
If you purchased your theme from Arham web works, you’ll receive your theme as a .zip file named something like essential-v1.zip.
Once you’ve downloaded the theme file, go to your Shopify admin dashboard and navigate to Online Store > Themes. Then click Upload theme. Select your theme file from your computer and click Upload. Your new theme will show up below your current theme.
At this point, it is installed, but not published. When you’re ready to unveil your new look to the world, click Publish theme.
Once you’ve uploaded your theme, it’s time to make it your own. While all of your products, collections, pages, and navigation are configured in the Shopify admin, any changes you make to the look and feel of your store happens in the theme editor. Access it by navigating to Online Store > Themes and then click the purple Customize button.
The theme editor is divided into two tabs: Sections and Theme settings. We’ll cover each in detail below.
The Sections tab contains all of the sections available to you in Essential. Essentially, sections are the building blocks of your store, allowing you to assemble pages from customizable, exchangeable components. You can add, remove, and reorder sections, as well as access the customization features for each from the Sections tab. For more information, here is an in-depth blog post all about sections: Shopify Sections: Helping You Build a Better Online Store.
The Theme settings tab lets you make global changes to the look of your store, including colors, typography, and products, as well as links to your social media accounts.
Most of the time you spend in the theme editor will be on either the Sections or Theme settings pages. There are, however, a few lesser-known areas and shortcuts that can be super helpful as you’re building your store.
The Theme actions menu at the bottom of the settings bar contains a bunch of handy links.
If you’re fluent in Liquid (Shopify’s templating language) you can kick your customizations up a notch by digging into the theme’s code under Edit code. If not, our support team will be more than happy to put you in touch with someone who is.
Edit languages lets you both change the language of your theme and Checkout page, and customize the wording that is used throughout your store.
On the right side preview’s top bar, there are three buttons that let you toggle between previewing your site look on mobile, desktop, and expanded desktop.
Essential comes packaged with three different theme styles that curate your store’s colors, fonts, and styles for you.
Note that applying and saving a new theme style will overwrite your current style settings, however you will not lose any content from your store. It’s always a good idea to make a backup copy of your theme before you start making customizations. Use the duplicate copy as your working version until you’re ready to publish it.
Fixed sections are components that are assigned to certain areas of your site and cannot be moved. In Essential, there are just two fixed homepage sections: the Header and the Footer (note that these sections appear on all pages, but we’ve put them here because they’ll probably be some of the first things you want to set up).
The header is the rectangular area that runs across the top of your store featuring your logo, navigation, login, and cart. It appears on every page and is intended to be used to promote your company’s brand and make it instantly recognizable to your visitors. This is a static section and cannot be repositioned.
A sticky header—also sometimes referred to as a fixed or persistent header—is a great option that “sticks” the header to the top of the screen, even as users scroll down a page. This can improve navigability, reinforce branding, and save time (nobody likes scrolling all the way back to the top when they realize they’re browsing the wrong page).
Essential sticky header compresses to preserve screen real estate, nesting navigational elements within a hamburger menu, and removing non-essential elements like the currency converter.
To use a sticky header in your store, simply check the Enable sticky header option at the top of the Header settings.
Your store’s logo provides branding for your site and a clickable link to return to the homepage.
By default, Essential will display your store name as your logo. To replace it, click the blue Select Image button and select the file you’d like to use. We recommend you use a 120 x 49px .png image file. Larger images will be automatically resized to fit this constraint.
One of Essential distinguishing features is its robust enterprise-level site search. It features a live search (meaning it will suggest popular searches as users type), with options to include products, articles, and pages in the results. It also includes an optional “quick links” menu, which can direct customers—especially mobile customers—to products and content faster.
To enable search option , Under the theme Customize option search setting is available click on it and search Bar tab is open , select checkbox of “show search bar” . These allow you to:
To add links to your menus, you must leave the theme editor by clicking the back button in the top left hand corner (you actually need to click twice — once out of the Header settings and again on the Themes link to get back to the admin). Go to Online store > Navigation. There are two pre-populated menus here: Main menu and Footer menu. You can edit the links in these menus by clicking on the titles to edit them, or create additional menus by clicking the purple Add menu button.
With Shopify’s Nested Navigation control, you can add levels to the menus as needed. Once you have the nested menus added in the Navigation settings they become a basic nested menu in the Essential storefront. If you’re looking to enable a meganav, just head to Customize > Header, then scroll down to the Content section with Add meganav as an option. Once you click that you will just need to add the name of the menu item that you would like the mega nav to descend from.
The Announcement bar is a great place to fill your customers in on new promotions, offers and changes to your store. This bar will appear above the Header section making in the first thing customers will see at the top of the page when they visit your store.
The Announcement bar settings include Color control for the text and background, the option to add a link and the text used. We even added a secondary text field to alter what’s shown on mobile screens. There are settings to easily turn the Announcement bar off and on, or limit it to displaying only on the homepage, as well.
Mega menus also have the ability to add images. You can add up to two images per Mega menu.
Here you can change the image size to Small, Medium or Large. You can also set the image placement to the first or last column. Text can be added below the image in addition to a link for the image as well!
Like a footer on a document or report, a website footer contains information listed at the bottom of a page. Typically, the footer is the area where visitors expect to find the “fine print”—legal information such as terms and conditions and privacy policies and contact information.
Displaying the logos of the payment methods you accept is a great way of building social proof and clearly displaying your customers’ payment options. With Essential, you can easily switch these on and off in the theme editor by checking the Enable payment icons box under Footer > Payment icons.
With Essential, you can add four optional types of content to your footer: Menu, Rich text, Social accounts, and Newsletter. You can add up to five content blocks here (in the example above, we’ve added two menus, one social media links, one rich text, and one newsletter). Just click Add content and choose the one you want to add. Setting up the blocks themselves is very intuitive—just follow the prompts!
When you first install Essential, some homepage sections are already visible — namely the header and footer, which are standard for any online store.
Clicking on any of these section blocks will bring up a set of unique configuration settings. You can also click Add section, which will reveal an array of other optional sections that you can add to your homepage.
At the very bottom of each section’s settings there is a Theme settings link, which you can expand to reveal additional settings that pertain to that section. Note that many of these theme settings affect elements beyond that specific section, so be careful with the changes you make here. These will be explored in depth in the article, Essential Theme Settings.
The Blog posts section allows you to display images and text from your three most recent posts. To specify the “preview” text that appears for each post, we suggest using Shopify’s excerpt function, which you’ll find in the post editor under Online store > Blog posts.
SETTINGS
If you want to give your section a heading, you can add it in the Heading field. Next, select the blog you want to feature from the blog setting.
You can also customize the details your blog posts display by checking Show date, show ‘view all’ button and/or Show post author.
sections are designed to help you showcase new or seasonal collections on your homepage. With Essential you can feature up to twenty collections at a time.
SETTINGS
You can apply whatever heading you like to your collection list using the Heading field under Settings. Note that this is optional, and if you do not want to include a heading, you can leave the field blank and nothing will appear.
CONTENT
Here, you can select the collection(s) you want to display by clicking Add collection or one of the existing Collection blocks, then selecting the collection you want to feature from the Collection list.You can set up collections in the Products > Collections section of your Shopify admin.
By default, Essential will pull either the collections image (set on the right side of the collections screen in your Shopify admin) or the first product. If you’d like to use an alternate image, you can click the Upload image button and select one from your computer (or library).
The featured collection section is designed to—you guessed it—draw attention to products from a specific collection on your homepage. You can display up to five products per row from the same collection in this dedicated space.
SETTINGS
Start by assigning a heading to the section in the Heading field. You can call it “Featured collection,” the name of the collection, or anything else you want!
Next, select the Collection you want to pull products from using the corresponding ‘select collection’ button. If you need to make changes to your collection, you can use the Edit collection shortcut on top of the field.
CALL TO ACTION
The call to action (CTA) is the “View all” tile that falls at the end of the collection row.
To change the text color, simply click the swatch next to Text color and select a different hue.
To add a background image (and replace the opaque colored background of the CTA), click the blue Upload image button or Select from library. We recommend a 500 x 750 px .jpg image, though keep in mind that whatever image you choose will be constrained to fit the CTA container.
If you want to change the background color of your CTA, it is tied to the theme style you’ve chosen (it matches the links throughout your theme). If you wish to change this, you can do so by expanding the Theme settings at the bottom of the section and changing the color swatch next to Links. Just know that the change you make here will affect not only the color of your Featured collection CTAs, but also all of your links!
A gallery is an amazing way to visually show off the best parts of your site and impress visitors.
SETTINGS
The image sizes that show can be controlled by the Section height setting. This will crop the images to your choice of Extra Small, Small, Medium, Large and Extra Large.
CONTENT
you can change image, image alignment, link and caption.
SETTINGS
If you want to give your section a heading, you can add it in the Heading field. It allow you to change image, image alignment, heading, text, button label and button link.
This sections are a lot like Image with text sections, only they come with a different layout: text overlay. They’re a great way to use immersive, high-res images, build your brand, and highlight special promotions and products.
SETTINGS
Begin by setting the Section height of your section ( Small, Medium, Large, Extra small and Extra Large).You can customize its position using the Image alignment setting. This determines the point on your image that the section will center. This setting has the most impact if your image has a different aspect ratio as the section.
Then, you can add a Heading, Text and a Button.
An Overlay is a semi-transparent filter that lies on top of your image to make the text easier to read. To customize the overlay, select a color using the Color picker and set the Opacity using the slider at the bottom (0% will make the image more visible; 100% will obscure it entirely).
A great way of building social proof is by displaying the logos of your suppliers, collaborators, or even customers. If you’ve been lucky enough to have been featured in a reputed newspaper or magazine, use that. If you’ve worked with well-known bloggers, use that. Visitors to your store will associate your brand with the others shown.
SETTINGS
Start by assigning a heading to your section through the Heading field.
CONTENT
To add a logo, click Add logo or one of the existing Logo blocks. Select the Image you want to use (we recommend a 320 by 320px .png) and add the Link URL in the field below.
To help you build your mailing list, Essential comes with a customizable Newsletter section.
SETTINGS
You can give the section an optional Heading and Subheading.
The Slideshow section is a great place to show off new items, offers, and sales in your store. It’s a static section.
SETTINGS
To start off you can select to Enable slideshow and set the Autoplay slideshow options. You can set the duration of the slide with the slider below.
You can set section height in the settings under Section height setting.There you can set it to Small, Medium and Large.When setting the height, keep in mind that the Original aspect ratio will keep the image as uploaded but the other will crop to fit the set size with a focus on the image’s centre.
The content on the Slide image is very flexible with customizable Text and Link.slideshow contain settings like image, image alignment, Heading, Sub-heading and slide link.
To integrate your Instagram account, you will need to locate and input your Instagram Access Token. Follow the link (or click here) to learn how to generate a token. Copy and paste your token back into the Instagram access token field in the theme editor.
You can also customize the Heading for your section here.
The Featured product section is designed to draw attention to a single product on your homepage.
SETTINGS
The setup for this section is fairly simple. Just select the product you’d like to feature using the Select product button. Other settings ars image size, Show quantity selector, Show Review, Show variant labels, Show vendor, Enable image zoom, show dynamic checkout button and show social sharing buttons.
This section is a great place to show off new items collection. This section will appear beneath the Header section in your store.
SETTINGS
you can select banner image and add collection for this banner image.you can also change button name using “Mens Button” settings.
Essential comes with an eye-catching Map section that businesses with brick-and-mortar locations can use to display contact information and give directions to their store.
SETTINGS
Start by setting the Section height from the top dropdown. Then, add a Heading, then add text content (e.g. Hours & Location). Start by setting the Section heading then add text content (e.g. Address & Hours). Other settings for map address, map link label, iframe src, Image(Displayed if the map isn’t loaded), Image Position.
The Rich Text section is a flexible feature to help add valuable content to your homepage. You can use up to two blocks within each Section.
SETTINGS
Start by assigning a heading to your section through the Heading field. You can choose between Regular or Wide for the Section width to suit what you’re looking for.
The testimonials section lets you display multiple blocks of text within a single section, with all the building blocks you need to show a quote and the Author’s name.
In this section you can add content like Text, Image, Video, Product, Collection and Custom HTML.
SETTINGS
If you want to give your section heading, you can add it in the Heading field. It allow to set time duration of slides changing and it give option to set auto-rotate slides in your section.
Your products and collection pages are the central pillars of your ecommerce store. They’re where you display your products, convey their value, and, if you’re lucky, make the sale.
You upload and configure your products and collections in the Shopify admin , but when it comes to customizing how they display, you’ll do that within the theme editor.
The product page is where you highlight the features and benefits of your individual products. At minimum, it should contain the product title, images, a description, the price, and an add-to-cart button. With Essential, you can customize your product pages by product pages, product image with text and related products settings.
SETTINGS
There are a number of ways you can customize your product pages, beginning with the settings in the Sections within the Product pages tab:
Enable related products. Enabling related products allows customers to discover other items that are similar to the one they are currently viewing. Related products are automatically pulled from the same collection as the product in view. Like so:
Show product image with text Enabling this settings to display image with text.
A collection page displays all of the products in a given collection. You can configure your collections from within your Shopify admin.In Essential, you can customize your collection pages by navigating to a collection in the theme editor and clicking on Collection pages under the Sections tab.
SETTINGS
If you would like to display the collection image for your collections, you can check the Show collection image option at the top of the settings for collection pages.
These images can be set in your Shopify admin under Products > Collections by clicking on a collection and uploading an image to the Collection image area in the right-hand column. You can also set the Products per page that display on your collection pages.
Your Shopify store comes with a powerful built-in blogging engine. Blogs are great for content that you can update regularly. While many stores maintain only one, some feature multiple blogs to better categorize content.
All your blogging is done through the Shopify admin (to get your Shopify blog up and running, see their instructions), but when it comes to customizing how your blog displays, that is controlled through the theme editor.
Your blog page provides users with an index of your blog posts. Some stores choose to rename this page ‘News’ or ‘Journal’.
To access the settings for these pages, navigate to your blog in the theme editor and then click Blog pages under the Sections tab.
SETTINGS
Every time you publish a new article (or post) to your store’s blog, Shopify will generate a new page and URL for it. To access the settings for these pages, navigate to any blog post in the theme editor and then click Article pages under the Sections tab.
Shopify stores come with a page creation tool, which you can use to generate pages containing information that seldom changes, and that customers will use often, such as an About page or a Contact page. You can add as many pages as you like to your store under Online store > Pages, and configure where they appear under Online store > Navigation.
There are also a few pages like the Cart page that are generated and populated automatically, but which you can customize by navigating to them in the theme editor and finding their section settings.
Create a new page
From your Shopify admin, navigate to Online store > Pages. Click the Add page button to open a new page template.
Adding a contact page to your store is a quick and easy way of engaging your customers. To create a contact page you will first need to create a new page. Scroll to the bottom right of the screen and select page.contact from the Template suffix dropdown menu. This will create a simple form on the page that will look a lot like the form above.
If you want to change the language used on this page (or the confirmation page that follows it), you can do so by clicking Theme actions in the bottom left and clicking Edit languages.
The Theme settings tab (located to the right of the Sections tab) lets you make overall changes to the look and feel of your store, including typography, text, and background color, as well as links to your social media accounts.
Virtually every color in Essential is customizable, with clear self-explanatory names in the settings. Click on a swatch to edit the colors. A popup with a color selector will appear, which allows you to adjust and experiment with custom colors.
The checkered box on the left signifies “transparent,” while the box to the left represents the color you’ve selected. You can also enter a specific color hex code in the bottom right corner if you wish. This is handy for matching colors across your store. For example, if you want to match your footer background to your buttons, you could copy the hex code from one over to the other.
Essential comes with a curated selection of hand-picked fonts for your store. Custom fonts can be set for your store’s Base text and Headings using the corresponding dropdown menus.
You can add custom content to the newsletter popup to encourage your shop’s visitors to subscribe to your newsletter.
Available options to add to this popup include:
Essential supports social icons like Facebook, Twitter, Pinterest, Instagram, Snapchat, Tumblr, Youtube and Vimeo.
The links to your accounts will display in your footer, but only if you have added a Social accounts block to your footer under Footer > Content.
A favicon (also known as a website icon, tab icon, or bookmark icon) is a small icon that represents your website and provides a shortcut to it wherever the icon appears. There are a whole bunch of sites that can help you generate a favicon for your store, or you can create your own.
Once you have an image you want to use, upload it under the Favicon setting of the theme editor. You can also select an image from your media library. We recommend a 32px by 32px .png file.
Shopify’s online store search function is a fully featured, powerful tool for buyers to search across all of a shop’s products, articles, and pages. Sometimes, however, your clients may want to optimize their search so that buyers are seeing specific types of results.
You can customize your Checkout page. Use the settings to choose which style of checkout page to use.
SETTINGS
Settings for checkout page:-
Banner
This settings allow you to add Background image of Banner.
Logo
You can change Custom image of logo, It’s Position and it’s Logo size.
Main Content Area
This settings allow you to set background Image and Form fields.
Order Summary
This settings allow you to set Background image and Background color.
Typography
You can set the font style and size for the Heading and Body on your online store.
Colors
This settings allow you to set Accents(Links, highlights, and checkmarks), Buttons(Gift card/discount and next step buttons), Errors(Messages and invalid fields).