Updating Your Homepage Banners

As a TCGplayer Pro Seller, you have access to your very own TCGplayer Online Store. After you add your logo and pick a theme (see Customizing Your Online Store), you can further customize your Online Store's design by updating the hero banners. This will help you personalize the look so your Online Store is unique and represents your brand. 

 

 

To manage the promotional graphics and banners, go to the Slideshow tab within the Home section. Each slide will be listed with its title as shown below. Click the title to open the slide properties.

 

 


You can set the following properties for each slide:

  • Headline

  • Description

  • Background Image - The banner display size is 1920 x 300. You'll also have edit and delete options.

  • Button - Choose what the button links to and how.

    - URL - link to a specific web address

    - Content - link to other pages within the CMS (a menu will appear on the right side of the page allowing you to make your content selection) 

    - Media - link to a media file (a menu will appear on the right side of the page to allow you to make your content selection)

    For each button, you'll also have the choice to have the linked content "Open in a new window" by selecting the checkbox.



     

Each slide will also have five options next to it.

 

  1.  Add a New Slide - Click this button to create a new slide below the slide you're currently on.

  2.  Move the Slide - Click and hold the up/down arrow to drag the slide to the desired position.

  3.  Clone a Slide - Click this button to create a duplicate copy of the desired slide.

  4.  Unpublish a Slide - This option works like a power button, turning the slide on or off. When the slide is turned off, it will be grayed out.

  5.  Delete the Slide

 

 

You can also update the message boxes on your banners to further customize your TCGplayer Pro Online Store. You have the ability to adjust both the message box alignment (where the box appears on the banner, left/center/right) and the justification of the text within the message box (left/center/right).

 

To customize a message box:

1. Within the Umbraco Backoffice, click on Home, then click on the Slideshow tab.

2. Expand the slide that you want to update by clicking the arrow next to the slide name.

3. The Slides area will appear with the following sections:

    • Headline

    • Message Box Position - Choose how your message box will be positioned on this slide.

    • Text Alignment - Choose how your text and buttons will be aligned within the message box.

    • Description - Write out your slide message here. You can adjust the size, styling and alignment of your message with the options in the description toolbar.

    • Button

    • Background Image

4. In the Message Box Position dropdown, there will be three options for left/center/right. Select a position type to set the message box position within the selected banner.

MessageBoxPosition.jpg

5. In the Text Alignment dropdown, there will be three options for left/center/right. Select a position type to set the alignment of the text within the message box.

TextAlignment.jpg

Below are a few examples of possible message/text alignment options:

  1. Left-aligned message box with right-aligned text

    BannerSlide1.jpg
  2. Center-aligned message box with left-aligned text

    BannerSlide2.jpg
  3. Right-aligned message box with center-aligned text

    BannerSlide3.jpg

Please Note:

  • The alignment of the box and the justification of the text within the box will act independently of each other.
  • Message boxes on the mobile slideshow will not have the alignment function since they always fall below the slide images.
  • The Shop Now button within the message box will align with however the text is justified.
  • By default, the slider will have a left-aligned box with flush left text.

To find out how to add your own custom hero banners, refer to Best Practices for Managing Graphics.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request