|
Note: Theme modification involves any change to the default values in the HTML or CSS of any theme or widget. Support can direct you to the correct page to make changes or to reset the widget, page HTML or CSS to its default value. This will undo any customization that may be in place. Before you create or modify a theme using HTML and CSS it is suggested to have a backup handy.
While theme modification is outside what support is allowed to assist with, if you need assistance with making modification to the theme, our implementation department is available to make these modification at an hour rate. If the service is ever needed please let us know and we will get that process started for you. Or check out our new Theme Store to find a theme that suits your needs.
|
The Image/Logo widget gives you an easy way to load images onto your theme. Once created they're added to the site and are able to be drag/dropped on the backend.
To get started go to the Widgets page for whichever page you want to add the image to.
You can add this widget to just about any page you'd like the have an image or a logo.
In this example, we navigated to Themes > Edit Theme > Header > Widgets
Then from the Available Widgets section scroll down find the Image/Logo widget. Click "Add Widget" and drag it to the destination of your choice.
After adding the widget click the Edit icon:
Use the next page to edit settings for this widget. Certain widget expose settings that are specific to that widget. You can customize the identifier and name for easy identification. You can also hide the widget from displaying on your store front, and enable merge code placement. This is useful if you want to place the widget on the page outside of a widget area.
When the settings page loads you will have all the settings related to the Image/Logo:
- Image Path - Click the File Browser icon to select an image from the server, or drag and drop an image from your computer.
Alt Text - This will render out the alt="" attribute on your image.
CSS Class - If used, this will add any CSS class to your image. This is not required, only if you want to add styling to the image.
Navigate URL - If used, this will wrap your image in a link pointing to this url. This is not required, no link will render if this is blank.
Target Window - If used, this will put a target="" attribute on your link. For example, to open in a new window put "_blank" in the field (without quotes).
The bottom section of settings is optional if you want to resize the image. These settings should be familiar from other areas of the theme such as product page, category page.
Image Width - sets the width of the rendered image
Image Height - sets the height of the rendered image
Use Resizer - whether or not to actually apply the above 2 settings, if turned off the image will render with its normal dimensions
Size Proportionally - if turned off, this will force the dimensions that you set above to apply regardless of whether it skews the image or not.
Make sure you select Save to capture your changes.
The Image/Logo widget gives you an easy way to load images onto your theme. Once created they're added to the site and are able to be drag/dropped on the backend or in live design - widget mode.
To get started go to the Widgets page for whichever page or Layout Region (Header, Left/Right Column, Footer) you want to add the image to.
Then from the Available Widgets section find the Image/Logo widget (widgets are in alphabetical order) and drag the widget to one of your Widget Areas on the right.
After adding the widget click the Settings icon:
When the settings page loads you will have all the settings related to the Image/Logo:
Image Path - Click the browse icon File Browser to select an image from the server.
Alt Text - This will render out the alt="" attribute on your image.
CSS Class - If used, this will add any CSS class to your image. This is not required, only if you want to add styling to the image.
Navigate URL - If used, this will wrap your image in a link pointing to this url. This is not required, no link will render if this is blank.
Target Window - If used, this will put a target="" attribute on your link. For example, to open in a new window put "_blank" in the field (without quotes).
The bottom section of settings is optional if you want to resize the image. These settings should be familiar from other areas of the theme such as product page, category page.Image Width - sets the width of the rendered imageImage Height - sets the height of the rendered imageUse Resizer - whether or not to actually apply the above 2 settings, if turned off the image will render with its normal dimensionsSize Proportionally - if turned off, this will force the dimensions that you set above to apply regardless of whether it skews the image or not. Other Theme Articles:
Other Articles On Images: