SHOPIFY Premium Theme Settings Customize Home Page Design

2. choose theme (premium theme from shopify store) – its free to use / 14 days

• from shopify panel > online store > themes > Shopify Theme Store > visit theme store > collection
  (now depending on clients – no of product/ store size/ client preferance – choose perfect one for you )
  https://themes.shopify.com/login

• here we are trying for : small inventories :
• let’s choose “Kingdom Theme” > choose > try theme :
• login to store (my site is: cmbd38.myshopify.com) > try theme > customize theme

2. Shopify Premium Theme Settings

• at top-right of customizing panem : click: “Theme Settings”
  ** COLOR: CHANGE COLOR OF SIDEBAR – TEXT – LINKS – BACKGROUND
  ** Typography > heading > change font > choose preferred font(client/you) > select >
  ** fav icon > upload a smaller image then logo > select
  ** social media : just put the link of the social media – that you want to execute
  — finally from top – right > save

Theme Customization(Home Page)
SLIDESHOW
click slide -01 > add banner image > add sub geading + main heading + button test & url (same-slide-02) > save

featured collection

• 2nd section of home page: – featured collection > Add & Show some collections that created !

Announcement Bar
Content: Get Any Product “40% Golden Autumn Discount”
Discount Link : https://cmbd38.myshopify.com/discount/gold40
NB: how to configure a specific discount & get the offer link : That’s shown at next section

DISCOUNT & Offers Configure :

Go : https://cmbd38.myshopify.com/admin > discounts Or,
Go: https://cmbd38.myshopify.com/admin/discounts
now we will configure discount amount & coupon codes
Discount code: SummerSale40
Types: %
Value: 40
Apply to: entire products (discount on all products)
Apply to: Specific collections (discount on some collections that we created)
Apply to: Specific products (discount on some specific product – manually we need to choose)
Minimum requirements: None
Customer eligibility: everyone
Usage limits:
Tick/ Check: Limit number of times – discount will be applied : 40
Tick/ Check: Limit to one use per customer

Active dates

start date : 14-SEP-2019
end date: 30-SEP-2019
(If needed – you can allow specific time range based offers: like “happy 2 hours Mother’s Discount” – 16SEP (9 am to 11 am)

Get Discount Link
after all configurations : you will get a discount link to do further marketing ..
Discount Link : https://cmbd38.myshopify.com/discount/gold40

SIDEBAR
Subscriber Pop up/ Newsletter :

Tick/ Check: Subscriber Pop up
Pop Up Text : SUBSCRIBE

@very Bottom : Click “NEWSLETTER” | POP UP NEWSLETTER CUSTOMIZE

HEADER IMAGE : ADD AN IMAGE FOR POP UP HEADER
TITLE; Subscribe us & Get Offers !
SUB-TITLE:
Stay up to date with our latest offers!
Get Any Product “40% Golden Autumn Discount”.

POP UP SETTING

TICK: enable pop up
show pop up after : 10 second (Standard)
show pop up : Choose from Dropdown>> each day

FEATURED PRODUCTS

choose a perfect / well rated – product (FEATURED FOR UR STORE)
Content : – all tick :
vendor : tick
Show truncated description : tick > set line : 5
Show quantity selector : tick
Hide out of stock variants : tick
Show dynamic checkout button : tick (add a “buy now button” – to directly pay without going to cart page

Gallery

image size: NORMAL
transition : SLIDE
interval: 4 sec
Enable image zoom: Tick
“SAVE” – From top – right

Subscriber to newsletter section :
Headline: Subscribe Us To Get Offers!
Sub-Heading:
Stay up to date with our latest offers!
Get emails with your own customised offers.

Best Collections @Home Page

select collection > create collection
Heading : Best Collections
description & SEO : These are Best Collections Of CMBD38 | Offers Ongoing
set featured image
Collection type: manual
after publish : come “Products” section to add products – MANUALLY
search products > add > write any “letter” > get all the products
manually add them – one by one > save

now search : “best collectio”- that created just now > add it > save

BLOG BOSTS

Column: 2 ta
Show post tags : tick
Show post author : tick
post excerpt: SMALL (this is blog description – and how much i want to show of a blog description)
Content > blog > select blogs > show “NEWS”- blogs
this will get – all the blogs at a time (but as column set – as : 2 // only latest 2 blogs will be shown here )

VISIT US

Headine : Contact us
Maps Link: go maps.google.com > search : codemandb > settings > Clik : “share & embedded” > share > take the link at put here
get Google Map API Key from below steps

Generate an API key for Google Maps
Steps Of Generating Valid Google Maps Api Key

1. Visit the API Console, at this link: https://console.developers.google.com
2. Log in with your gmail account.
3. Hit the project list button & hit “create new project”
4. Write a Project name, agree with the terms and then hit Create.
5. Hit the Enable API button.
6. Search for Maps Embed API or Google Maps Javascript API or Google Maps Geocoding API select it
7. Enable it for your current project.
8. After the API’s are enabled, click the Create credentials button.
9. Choose to create an API Key.

Restrict API access to only your store
Your API key is a unique identifier to your map section. To prevent YOUR API others from using it, must need to restrict API access.
Steps To restrict your API key Are:

10. Go to the Credentials page of the Google API Console.
    (Click Link: https://console.developers.google.com/projectselector/apis/credentials?pli=1)
11. Select your project from the menu > hit credentials
12. Click the Edit button on the API key you generated.
13. Click HTTP referrers(web sites)
14. add any domain where you will use map (Example: minhazulasif.me)
15. From “API Restrictions” Click “Restrict Key” & from dropdown – Choose”given map Api” & Save
16. Now just see your api is green & directly “embedded google map”or “street view google map”, “embedded Iframe”will work on your site – for generation this legal & valid API

thanks
minhazul asif,
web instructor, CodemanBD