Shopify కోసం మ్యాప్ విడ్జెట్
ఒక ఫైల్ను డౌన్లోడ్ చేసి, మీ థీమ్లోని సెక్షన్ల ఫోల్డర్లో పేస్ట్ చేయండి. అప్పుడు మీ థీమ్ ఎడిటర్లో “WhatIsMyLocation Map” కనిపిస్తుంది — దానితో పాటు స్థానిక సెట్టింగ్ల ప్యానెల్ కూడా వస్తుంది: బ్రాంచ్లు బ్లాక్లుగా, థీమ్ మరియు మార్కర్ ఎంపికలు, స్విచ్ యానిమేషన్లతో లొకేషన్ల ప్యానెల్, ఐచ్ఛికంగా మ్యాప్లో తెరిచే ఐకాన్లు. ఇన్స్టాల్ చేయాల్సిన యాప్ లేదు, API కీ లేదు, బిల్లింగ్ ఖాతా లేదు, కుకీలు లేవు, Google నుంచి ఏదీ లోడ్ కాదు. ఈ zipలో నా స్థానం కనుక్కునే విడ్జెట్ కోసం రెండో సెక్షన్ కూడా ఉంది.
అనుమతి ఆధారిత · వ్యక్తిగతం · Chrome, Safari, Firefox, Edge లో పనిచేస్తుంది
Shopify యాప్ కంటే థీమ్ సెక్షన్ ఎందుకు మెరుగు
చాలా “మ్యాప్ యాప్” లిస్టింగ్లకు ఇన్స్టాల్ చేయడం, మీ స్టోర్ డేటాకు అనుమతులు, నెలవారీ ఫీజు కావాలి — చివరికి అదంతా ఒకే ఒక iframe కోసం. ఇది నిజాయితీగల ప్రత్యామ్నాయం: మీ సొంత థీమ్లోనే ఉండే ఒకే ఒక Liquid ఫైల్. ఇది స్టోర్ అనుమతులు అడగదు, మీ పేజీలకు స్క్రిప్ట్లు జోడించదు, ఎక్కడికీ సమాచారం పంపదు, ఖర్చు కూడా ఉండదు. మీ సందర్శకులు చేసే ఏకైక బాహ్య అభ్యర్థనలు — whatismylocation.ai నుంచి వచ్చే శాండ్బాక్స్ మ్యాప్ iframe మరియు దాని OpenStreetMap టైల్స్ మాత్రమే. Google కుకీలు లేవు, కన్సెంట్ బ్యానర్ల భారం లేదు. ఒకవేళ సేవ అందుబాటులో లేకపోయినా iframe నిశ్శబ్దంగా ఆగిపోతుంది, మీ పేజీ చెడిపోదు. సెక్షన్ ఫైల్ను తొలగిస్తే దాని ఆనవాలు కూడా మిగలదు.
whatismylocation-shopify-sections.zip డౌన్లోడ్ చేయండి — రెండు సెక్షన్లు, ఒక README, కొన్ని కిలోబైట్లు మాత్రమే. తర్వాత కింది ఇన్స్టాల్ దశలను అనుసరించండి.
సుమారు రెండు నిమిషాల్లో ఇన్స్టాల్
ఇది రెండు భాగాలు: ఒకసారి ఫైల్ను పేస్ట్ చేయండి, తర్వాత దానిని ఏ అంతర్నిర్మిత సెక్షన్లాగే వాడండి.
ఫైల్ను పేస్ట్ చేయండి: Shopify అడ్మిన్ ▸ ఆన్లైన్ స్టోర్ ▸ థీమ్లు ▸ ⋯ ▸ కోడ్ను ఎడిట్ చేయండి. ఎడమ సైడ్బార్లో సెక్షన్లు కింద కొత్త సెక్షన్ను జోడించండి నొక్కి, దానికి whatismylocation-map అని పేరు పెట్టండి. లోపల ఉన్న ప్లేస్హోల్డర్ కంటెంట్ను తొలగించి, whatismylocation-map.liquid ఫైల్ మొత్తం కంటెంట్ను పేస్ట్ చేయండి. చివర ఉన్న {% schema %} బ్లాకే మీ సెట్టింగ్ల ప్యానెల్ను తయారుచేస్తుంది, కాబట్టి అది తప్పకుండా కలిసి రావాలి. సేవ్ చేయండి.
దీన్ని వాడండి: థీమ్ ఎడిటర్ (కస్టమైజ్) తెరిచి, మీ సంప్రదింపు పేజీకి (లేదా ఏదైనా పేజీకి) వెళ్లి, సెక్షన్ను జోడించండి నొక్కి, WhatIsMyLocation Map ఎంచుకోండి. సెట్టింగ్ల ప్యానెల్ ఎడమవైపు కనిపిస్తుంది. మీరు నిర్దేశాంకాలు ఇచ్చే వరకు ఆ సెక్షన్ ఒక స్నేహపూర్వక ప్లేస్హోల్డర్ను చూపిస్తూ, దానికి ఏమి కావాలో స్పష్టంగా చెబుతుంది.
నిర్దేశాంకాలను మ్యాప్-ఎంబెడ్ బిల్డర్ నుంచి తీసుకోండి — మీ చిరునామా టైప్ చేసి, కాపీ చేసేముందు పిన్ను మీ ప్రవేశ ద్వారంపైకి లాగండి. సెక్షన్ మీ తుది నిర్దేశాంకాలనే వాడుతుంది, కాబట్టి పిన్ తర్వాత జరిగిపోయే అవకాశమే లేదు.
బ్రాంచ్లు బ్లాక్లే
అనేక లొకేషన్లు ఉన్న స్టోర్లకు ఇదే అత్యుత్తమ భాగం: థీమ్ ఎడిటర్లో ప్రతి బ్రాంచ్ ఒక బ్లాక్ — బ్రాంచ్ను జోడించండి నొక్కి, అక్షాంశం, రేఖాంశం, ఒక లేబుల్, ఒక చిరునామా నింపండి, లాగడం ద్వారా వాటి క్రమాన్ని మార్చండి (10 వరకు). మ్యాప్ అన్ని బ్రాంచ్లనూ ఆటోమేటిక్గా సరిపోయేలా సర్దుతుంది, పిన్లకు జాబితాకు సరిపోయే నంబర్లు వస్తాయి, సందర్శకులకు లొకేషన్ల ప్యానెల్ కనిపిస్తుంది — డెస్క్టాప్లో మ్యాప్ పక్కన అకార్డియన్గా, ఫోన్లలో స్వైప్ చేయగల కార్డ్ స్ట్రిప్గా, ప్రతి బ్రాంచ్కు దారులతో పాటు ఐచ్ఛికంగా “Google Maps / Apple Mapsలో తెరవండి” ఐకాన్లతో. ప్యానెల్ లేఅవుట్ (auto, పక్కన, కింద, ఏదీ వద్దు) మరియు స్విచ్ యానిమేషన్ (స్మూత్, ఫేడ్, లైవ్లీ, ఏదీ వద్దు — తక్కువ కదలిక కావాలనుకునే సందర్శకులకు ఎప్పుడూ తక్షణ వెర్షనే వస్తుంది) అదే ప్యానెల్లో డ్రాప్డౌన్లుగా ఉంటాయి.
ప్రతి సెట్టింగ్, వివరంగా
| సెట్టింగ్ | సందర్శకులకు ఏమి కనిపిస్తుంది |
|---|---|
| వ్యాపార పేరు + శీర్షిక శైలి | కార్డ్/ప్యానెల్ శీర్షిక — డిఫాల్ట్గా బోల్డ్; ఇటాలిక్ మరియు నార్మల్ కూడా ఉన్నాయి. |
| చిరునామా పంక్తులు 1–3 + ప్రతి పంక్తికి శైలి | ఓవర్లే కార్డ్పై మూడు పంక్తుల వరకు, ప్రతి ఒక్కటీ ఐచ్ఛికంగా బోల్డ్ లేదా ఇటాలిక్. |
| అక్షాంశం / రేఖాంశం | మీ పిన్. బిల్డర్ నుంచి పేస్ట్ చేయండి; మళ్లీ జియోకోడ్ చేయబడదు. |
| బ్రాంచ్ బ్లాక్లు | నంబర్లు వేసిన పిన్లు + లొకేషన్ల ప్యానెల్ (2 బ్రాంచ్ల నుంచి). |
| థీమ్ | లైట్, డార్క్ లేదా గోల్డెన్ విడ్జెట్ రూపం. |
| మార్కర్ రంగు | క్లాసిక్ నీలం, ఎమరాల్డ్, ఎరుపు, అంబర్, ఇండిగో లేదా స్లేట్ పిన్లు. |
| ప్యానెల్ + కదలిక | లొకేషన్ల ప్యానెల్ లేఅవుట్ మరియు బ్రాంచ్ మారే యానిమేషన్. |
| దారి పొందండి / మ్యాప్ ఐకాన్లు | దారుల బటన్తో పాటు ఐచ్ఛిక Google/Apple Maps ఐకాన్ లింక్లు, టూల్టిప్లతో. |
| ఎత్తు | iframe ఎత్తు, 220–800 px. |
| “Powered by” శీర్షిక | డిఫాల్ట్గా ఆఫ్ — మ్యాప్ కింద సేవకు క్రెడిట్ ఇవ్వాలంటే టిక్ చేయండి. |
అదే zipలో whatismylocation-widget.liquid కూడా ఉంది — నా స్థానం కనుక్కునే విడ్జెట్ రెండో సెక్షన్గా (థీమ్, కాంపాక్ట్/పూర్తి మోడ్, ఎత్తు), డెలివరీ పేజీలకు మరియు స్టోర్ ఫైండర్లకు ఉపయోగపడుతుంది.
సమస్యల పరిష్కారం
సెక్షన్ను జోడించండి కింద ఆ సెక్షన్ కనిపించడం లేదు. ఫైల్ తప్పకుండా సెక్షన్లు లోనే ఉండాలి (స్నిప్పెట్స్ లేదా అసెట్స్లో కాదు), పేస్ట్లో ఫైల్ మొత్తం ఉండాలి — {% schema %} బ్లాక్ కట్ అయితే Shopify ఆ సెక్షన్ను తిరస్కరిస్తుంది లేదా దాచేస్తుంది. ఫైల్ మొత్తాన్ని మళ్లీ పేస్ట్ చేసి సేవ్ చేయండి.
సేవ్ చేసేటప్పుడు “Invalid schema” ఎర్రర్. ఇది అసంపూర్ణ పేస్ట్ — చాలావరకు చివరి వరకు సెలెక్ట్ చేయకపోవడం వల్ల ఒక ముగింపు బ్రేస్ మిస్ అవుతుంది. పూర్తి ఫైల్ను మళ్లీ పేస్ట్ చేయండి; Liquid తెలియకపోతే స్కీమాను చేతితో సవరించవద్దు.
మ్యాప్ బూడిదరంగులో ఉంది. మ్యాప్ టైల్స్ tile.openstreetmap.org నుంచి వస్తాయి; దూకుడైన యాడ్-బ్లాకర్ లేదా కార్పొరేట్ నెట్వర్క్ వాటిని బ్లాక్ చేయవచ్చు. మొబైల్ డేటాతో ఫోన్లో చూడండి — మీ కస్టమర్లకు దాదాపు ఖచ్చితంగా సరిగ్గానే కనిపిస్తుంది.
పిన్ నా తలుపు మీద లేదు. బిల్డర్లో నిర్దేశాంకాలను మళ్లీ తయారుచేసి, పిన్ను మీ ప్రవేశ ద్వారంపైకి లాగి, కొత్త విలువలను సెక్షన్ సెట్టింగ్లలో పేస్ట్ చేయండి.
మార్పులు లైవ్ స్టోర్లో కనిపించడం లేదు. మీరు డ్రాఫ్ట్ లేదా ప్రచురించని థీమ్ను ఎడిట్ చేశారు — ప్రచురించిన థీమ్లో మార్పు చేయండి (లేదా మీరు ఎడిట్ చేసిన థీమ్ను ప్రచురించండి). విడ్జెట్లో కాష్ అయ్యేది ఏమీ ఉండదు.
దశలవారీగా
- whatismylocation-shopify-sections.zip (కింద లింక్) డౌన్లోడ్ చేసి అన్జిప్ చేయండి.
- Shopify అడ్మిన్లో Online Store ▸ Themes ▸ ⋯ ▸ Edit code తెరవండి. Sections కింద “Add a new section” నొక్కి, దానికి whatismylocation-map అని పేరు పెట్టి, whatismylocation-map.liquid లోని మొత్తం కంటెంట్ను — దిగువన ఉన్న schema బ్లాక్తో సహా — పేస్ట్ చేయండి. Save చేయండి.
- థీమ్ ఎడిటర్ (Customize) తెరిచి, మ్యాప్ అవసరమైన పేజీకి వెళ్లి, Add section నొక్కి, “WhatIsMyLocation Map” ఎంచుకోండి.
- map-embed బిల్డర్ నుంచి మీ ఖచ్చితమైన నిర్దేశాంకాలను పేస్ట్ చేయండి (మీ చిరునామా టైప్ చేసి, కాపీ చేయడానికి ముందు పిన్ను మీ ప్రవేశద్వారం మీదకు లాగండి) — బహుళ-బ్రాంచ్ మ్యాప్ కోసం ప్రతి లొకేషన్కు ఒకసారి “Add branch” నొక్కండి.
- సెట్టింగ్స్ ప్యానెల్లో థీమ్, మార్కర్ రంగు, ప్యానెల్ లేఅవుట్, మోషన్ ఎంచుకుని Save చేయండి. యాప్ అవసరం లేదు, API కీ అవసరం లేదు, సర్వర్-సైడ్లో కాన్ఫిగర్ చేయాల్సింది ఏమీ లేదు.
తరచుగా అడిగే ప్రశ్నలు
Shopifyలో మ్యాప్ పెట్టడానికి యాప్ లేదా API కీ అవసరమా?
ఒకటి కంటే ఎక్కువ బ్రాంచ్లను చూపించవచ్చా?
ఆంగ్లంలో చూడండి: Map Widget for Shopify · తెలుగు