Tip:
Highlight text to annotate it
X
In ShopSite version 11 service pack 1,
they've added a mobile capability to both
Manager and Pro.
With this option, customers can come to your website using their mobile device
and they'll be given a smaller version of
your website that's simplified for a mobile
screen.
To turn on this mobile option, go in your backoffice to ShopSite
and click on "Preferences", then click on
"Mobile".
The first thing you want to do is switch this option to "On"
and then upload your new logo. The logo for
a mobile screen
should be no more than 60 pixels high.
Any higher than that, and it'll look a little bit off or take up more of
the screen than you want. So you want to create
a new logo that's smaller to be
used only for your mobile pages.
So I've already uploaded a logo "tinastoys-logo_mobile"
and I'm going to check the checkbox to use that logo.
Now, in the mobile to PC section,
check this checkbox and what it does is when
a customer comes to the website on their mobile
device, they'll be given the
option
to view the full website (the PC version). So they could
click to view the full HTML site. Then,
when they go to the full site, they'll have
the option to return to the mobile site.
So this link is convenient if you have additional information on your PC site
that's not on the mobile site.
This can include product reviews, or related
items,
or even just some advanced details that aren't included on the mobile site.
Next, you have the option for a "Page Header"
and a "Page Footer"
but you don't want to clutter up your mobile pages too much so if you don't have
to put in a header or footer,
I suggest don't. Next are the mobile colors.
The "Text Color" is the text color. The "Background
Color" is the background color.
The "Link Color" and the "Active Link Color" are going to be used for
links in your store and navigation menus.
The "Visited Link Color"
is mostly going to be used for buttons in your store
like the Add to Cart button or the checkout
button.
Back colors you're going to want to make a little bit more bold.
So the blue and orange colors here are going
to go great with Tina's toys look and
feel already so I'm gonna leave those colors plain.
Next, you're going to want to set up your
navigation menu.
Across the top of all of your mobile pages will be a navigation bar.
They can hold 3 to 4 links in it. So you have
four different navigation fields here.
The links that you add you want to have generic enough
that anybody that comes to your website can
get around your store using those links
but specific enough that they had your top pages. So my first I want to put as
"Category"
so that anyone that comes to a page that's
not my homepage
can still go back and view all my store categories.
So I'm going select the page and I want it just to link to my home page.
So, I'm going to add that, choose the ShopSite
page,
and leave it there. My second link I want to be a top page in my store,
so I'm going to do the Specials page. So check
to use a ShopSite page
and then I'm going to select my Specials page. My third link
is going to be my store policies. So I'm going
to select my Policies page,
add it, and then click on "OK".
And my last link I want it to be a "View Cart" link.
So, instead of selecting a ShopSite page,
I'm going to enter a URL.
So to grab my "View Cart" link I'm going go to my store,
right click on View Cart, and click on "Copy
Link Location".
Go back to my backoffice and then paste
that URL in there. The Secondary Navigation menu
is only for your mobile home page.
This is if you already have a navigation menu
setup
under preferences navigation you can use
that navigation menu on just your home page of your mobile site.
So, in Tina's Toys, I have both my top navigation
menu and a left navigation
menu
but the links are kinda repetitive, so I'm not going to display either on my home page
I'm going to leave that just as it is. Down
here
I do want to use the mobile product template for my mobile pages
check that checkbox and I do want to use the
product template
for mobile for the search result pages. So I'm going to check that checkbox.
Save Changes at the bottom, Publish store,
and now you're done. That's all you have to
do. Here
I have my mobile device and I've gone to my Tina's Toys web page
and this is what a home page looks like.
This completes the video tutorial for mobile
devices.