A Portal is a specially designed website that serves as the point of access for online retail sales. Depending on your company and customer needs, multiple portals can be created. In this section we will be duplicating a portal, and making the necessary adjustments to create a B2B online storefront.


PORTAL SETUP

Online Ordering > Portals/Themes > Portals

  • Select the Charcoal Studio Portal by clicking the checkbox.
  • Click the Duplicate Button.
  • Click the name of the duplicated portal {Charcoal Studio - copy}.


This will open up the portal view:


Click the URL at the top of the General Section to view the portal in a new tab.

Then click on {Customize this Portal} at the bottom of the Customization section.


Homepage HTML

The Charcoal Studio portal utilizes an image carousel at the top of the page. The code for these images can be found in the Homepage HTML section in lines 15, 21, and 27. In order to update these images, you will need to upload your images to DocketManager. Download a sample imageslider-bc.png at the bottom of this article, then follow the W2P Image hosting instructions below.


W2P Image Hosting

CRM > Customers > Sample Customer

  • Click on the {+} next to Files
  • Upload the downloaded file imageslider-bc.png
  • For File Group choose W2P Image
  • Click on Save
  • Refresh the page*
  • Right click on the name of the file and click Copy Link Address*
  • The link will be copied to the clipboard
  • Navigate to Settings > Online Ordering > Portals/Themes > Portals > Charcoal Studio - copy > {Customize This Portal} > Homepage HTML
  • Scroll down to Code Line 27
  • Highlight the following text:
  • https://support.docketmanager.net/portals/paper-studio/slider1.jpg
  • Press Control + V to paste the copied W2P Image link
  • Click Save


View Your Work

Click the URL at the top of the General Section to view the portal in a new tab.


Featured Products

Below the Image Carousel are the Featured Product Images and links. These links can point directly to a Product or to a Product Catalog:

 


Product #1

Code Line 56 - Image

  • The image link is displayed in blue after <img src="
  • Upload the image named drinkware.jpg from the files attached below at the Customer level utilizing the W2P Image Hosting strategy, copy the link, and update the URL in the Homepage HTML


Code Line 59 - Link

  • The link is displayed in blue after <a href=" and the text "Apparel" is in black.
  • Once you have Products associated to your Portal you can navigate to the Product that you want to link to, then copy and paste the link from the address bar.
  • For now let's just update the word "Apparel" to "Drinkware".


Code Line 61 - Button

  • The link is displayed in blue after <a href=" and the text "View Now" is in black.
  • Once you have Products associated to your Portal you can navigate to the Product that you want to link to, then copy and paste the link from the address bar.
  • For now this line can be left as is.


Product #2

The same adjustments that were made for Product #1 can be made to Product #2 on lines 70, 73, and 75.

Upload the image named business-card1.jpg at the Customer level, copy the link, and update the html.

In line 73 change the text Stamps & Seals to Business Cards.


Product #3

Code Lines 84, 87, and 89 are connected to Product #3. These lines can be left alone at this time.

These lines act just like Product 1 and 2 and can be updated at anytime in the same way.



Back to W2P Training Menu