AquaBlue With Footer - xmpie-users/uStore-js GitHub Wiki

What is it?

The AquaBlue theme that is provided by XMPie by default with every uStore installation, is a great theme and works perfectly fine, but one large hole is that the footer area is not editable in the backoffice theme editor.

Virtually every store you create for your customers will need to have some company and contact information added to the footer, and because of this gap in the AquaBlue theme, you are forced to create your own custom theme, or resort to CSS and JavaScript hacks to add this basic information to the footer.

XMPie recognises this gap in the product, and intends to create a widget-like tool to enable entry of basic HTML code in various places of the storefront, including the footer. However, this will take time and in the meanwhile, customers without the skill, knowledge or capability to create a custom theme or use CSS and JavaScript to hack the AquaBlue theme are trapped.

The "AquaBlue With Footer" is a theme created by XMPie Training to help fill this gap until uStore offers a better solution out-of-the-box.

What's changed in the theme?

The "AquaBlue With Footer" theme is an exact copy of the standard AquaBlue theme, but with these additions:

  • The footer area includes a logo and three columns of text (or links) that can be customized in uStore Admin via the theme editor. Note that uStore v16.1 introduces a new "widget" feature which allows you to inject pieces of code into various places in the theme including the footer. This feature may be better suited for you than this custom theme.
  • The footer area is responsive and changes display for mobile devices. Alt
  • There is a custom About Us page that can be customized to add additional information. Again, the headings and text of the About Us page can be edited in the theme editor.
  • The "text" areas of the About Us page can include HTML code so you can add links, images and other basic HTML formatting to the About Us page.
  • From v15 uStore, the AquaBlue with Footer theme also offers a new feature: the ability to add up to 3 custom web links to the product category navbar.
  • Note that from v16.1, this theme also incldues "slots" for the new uStore Widgets. However because of the custom footer in this theme, the slot for the footer is not included.
  • Note that from v17.1, this theme also includes settings to change from the default home page banner to a carousel slider with up to five (5) images. Controls to swap between banner and slider, and to upload and configure images, text and buttons are provided in the Homepage Banner settings of the theme editor in the uStore admin backoffice.

How to use features of the theme

  • After installation, create a new test store, and on the Appearance tab of the store setup, select the "AquaBlue With Footer" theme.

  • Save the new store, and select "Customize theme" from the "Store setting" drop-down.

  • The theme editor will display 3 new sections:

    Alt

  • About Us Setup allows you to change all the text of the page in three different sections. The "Text" areas can contain HTML code allowing you to have much more freedom to control the content and the way it is displayed. Yes, it would be nice to have an HTML editor display here, but this is only a temporary workaround until XMPie provides a better solution.

    Alt

    • "Text 1", "Text 2" and "Text 3" areas can contain HTML code
    • To remove a heading or text area from the page, enter a space in the provided textbox.

  • Footer Setup allows changing of all the text and logo elements.

    Alt

    • Each text line can have a link to internal or external URL if desired. If you don't want a link, leave the corresponding URL field empty and the corresponding text field will be displayed as text instead of a link.
    • URL could also be "mailto:[email protected]" to setup a link on an email address text line.
    • If you don't want one of the provided text lines, enter a space in the provided textbox.

  • Add category links allows the addition of up to 3 custom web URLs to the product category navbar.

    Alt

    • URLs must start with http or https or they will be ignored.
    • The Position setting controls whether the custom items will be added to the start or end of the category list. If the value is "Start" the custom entries will be added to the start of the list. Any other value will put the custom items at the end of the list.
    • The custom web links are also added to the "All categories" menu.

  • From v17.1 onwards, the Homepage Banner section includes new settings. After clicking Homepage Banner to open the section, scroll down to see the new settings:

    Alt

    • Show Carousel Slider: For backward compatibility, the default setting is "false" which will show the default static banner. Changing this setting to "true" will change from the default static banner, to a carousel slider. Note that you will first have to add additional images in order to see slider behaviour.
    • Slide Duration: The length of time (in seconds) each slide will be displayed before moving to the next slide. Accepted values are numbers between 3 and 15. Any other value outside of this range will be ignored and the default of 6 seconds will be used.
    • Transition Speed: This is the speed of the change between slides. Accepted values are numbers between 1 and 5. Any other value outside of this range will be ignored and the default of 2 seconds will be used.
    • Scrolling down further will show settings for Slides 2-5 as shown below:

    Alt

    • Image #: Upload an image to activate that slide #. Slides without images will be ignored.
    • Title #/Subtitle #/Text color #: Text can be applied over the top of the image if desired, and the color changed by using the color picker. Font face and base size are controlled by other settings in the theme editor. For additional changes like padding, you can use the Custom CSS section to control the text appearance of each slide individually by using the class name which is unique for each slide.
    • Button text #/Button URL #: The button will not appear on the slide unless both text and URL are defined.

How do you get it?

Download the theme package for your uStore version here:

How do you install the Theme? (for the first time on a server)

  • Download the theme for your uStore version.
  • Login to your uStore admin and go to Presets -> Theme Management.
  • Click "New Theme" and upload the zip file.
  • Create or select a store and apply the theme by selecting it on the Appearance tab of the store setup.

How do you update/replace the Theme? (to update the theme after a uStore upgrade)

  • Download the theme for your new uStore version.
  • Login to your uStore admin and go to Presets -> Theme Management.
  • Select "AquaBlue With Footer", click "Replace" and upload the new zip file.

How do you get support for this theme?

The "AquaBlue With Footer" theme was not created by XMPie R&D / Products team, and so the official XMPie support channel may or may not help, depending on the problem you have. If you have questions or problems that support cannot help with, please try asking via the XMPie Users Google Group.