VineSpring's out-of-the-box Hosted Storefront (HSF) solution allows you to customize things like font and color scheme while maintaining a clean and simple purchasing flow for your customers.

STYLING SECTION CHECKOUT

ACCOUNT AREA REGISTRATION

CLUB SIGNUP


STYLING

Navigate to the Storefront Page: Go to Settings > Storefront > Styling



PAGE HEADER SECTION

  1. FAVICON: This is the icon that displayed on browser tabs - usually a version of your logo. Your icon must be a PNG file, no bigger than 16x16 px, and less than 50KB in file size. For best results, use a transparent background.

  2. LOGO: Your logo must be a PNG file, no bigger than 350(W)x125(H) px, and less than 150KB in file size. For best results, use a transparent background. The logo will be used on receipts and transactional emails.

  3. LOGO URL: Enter the full web address for your main site (ie http://www.mywinery.com)

  4. FONT SETTINGS: Define Font, Font Size and Font Weight.

  5. SHOP LINK (Text): Your preferred 'shop' name - for example: 'Shop', 'Store' or 'Aquire'. This will populate in the upper left of your Storefront section.

  6. SHOP LINK: This is the link that appears in the URL and defaults to /purchase. But if you'd prefer it to be something else (like 'Aquire', for instance), you can enter that.


PAGE BODY SECTION

  1. PAGE BACKGROUND COLOR: Define color of body background. This is the color that your products will be displayed on, so keep that in mind. We recommend white or a complimentary light color to your logo.

  2. FONT: Font definitions for Body section.

  3. ACTIONS: Define color for all actions (like buttons and links).


PAGE FOOTER SECTION

  1. FONT/COLOR: Define font and link colors, plus background of the footer section itself.

  2. LINK COLOR: Define color of text links for Footer.

  3. BACKGROUND COLOR: Define BG color of the Footer section.

  4. SUPPORT EMAIL & PHONE: Where should customers contact you if they have questions?

  5. ABOUT US: Optional.


CHECKOUT SECTION

ALLOW DISCOUNT CODES: If you have discount codes, enable that field here.

ORDER CONFIRMATION: This is the message that appears on-screen once the order has been submitted by the Customer.

PICKUP INFO: These instructions will display if your Customer has chosen a Pickup Option.

SHIPPING POLICY: This will display if your Customer has chosen a Shipping Option.

PURCHASER DOB STATE LIST: List any states here where DOB is required for compliance reasons. The DOB field will only be required for the states defined.

SHIP DATE LABEL/SHIP DATE OPTIONS: Have multiple shipping or pickup dates that you'd like to offer to your Customer? Enter dates one row at a time. Example:


ACCOUNT AREA SECTION

HEADER: Default is 'My Account', but you can name this section whatever you'd like.

BODY: Explains to your Customer what this section is all about.

SHOW CLUB/ALLOCATION INFO: If you have Clubs and/or Allocations, check these boxes so that they'll be visible to your Customers.


REGISTRATION

This section defines what you want to collect on your Mailing List Signup/Registration page.

HEADER TEXT: Defaults to 'Register', but you can call it anything you want.

HEADER INTRO: Welcome/Invite people to register - briefly explain what they are signing up for.

BUTTON TEXT: Submission button name (ie 'Finish', 'Submit', etc)

SUCCESS HEADER/TEXT: Displays on-screen upon submission of the Registration form.

INFO TO COLLECT: Check the boxes of the pieces of information you'd like to collect.


CLUB SIGNUP

COLLECT PHONE/DOB: Check these boxes if you'd like to collect this information on your Club Signup form.

SUCCESS HEADER/TEXT: Displays on-screen upon submission of the Club signup form.


TEST IT OUT!

Go to any Customer record, and click on the 'Login As' link in the upper right. This will log you directly into that customer's 'My Account' area on the front-end.

Did this answer your question?