Romans Homepage
This is a guide on how to update the homepage for Romans. The current layout is as follows:
- Large top banner: spans the width of the page and has a separate mobile version.
- Promotional banner: contains a promotion and spans the width of the page
- Large image and Smaller Image: large image spans 2/3 of the page with a smaller image on the right
- Collection banner: spans the width of the page and links to a collection
- 3 rectangular category banners
- Product carousel
- Shop your fit links
The guide will run through each section and describe the image requirements for each section, how to alter an image, how to edit a link and the current settings in place with regards to margins and padding.
You are able to make multiple changes to the cms page, after changing each component you should click save on the component to see the change on the cms page, then click save revision, this saves the full page. After making changes you can save revision and publish. The following guide includes the steps to publish assuming you are only making that one change.
Large top banner
| Image | Dimensions |
|---|---|
| Desktop | 1920×800 px |
| Mobile | 1383x576 px |
To keep the site running smoothly, all file sizes should be under 2mb
Component
This section of the page is controlled by the custom banner component, this allows you to upload a mobile and desktop version of the image and a link. There is also the ability with this component to use live text and cta buttons if you decide to stop doing these on the image.
Adding a new image
- Go to the page in the admin, content managemenent module > Pages > Select page and click build
- Click on the custom banner component, so the section is highlighted in pink.
- On the right hand side are the setting for the component, scrolling down slightly there will be two image upload options.
- Click inside the box to open the file explorer to select an image to upload or drag an image into the box, the file name will appear below when this is successful.
- Click Save on the component.
- click Save revision (disk icon), then view on preview or publish as required.
Adding a link
Where the custom banner is used without live text and cta, a link can be added to the cta url box and this will link to from the whole banner.
To update this link:
- Go to the page in the admin, content managemenent module > Pages > Select page and click build
- Click on the custom banner component, so the section is highlighted in pink
- Find the relative link in the cta Url box and replace.
- Click Save on the component, click Save revision (disk icon), then view on preview or publish as required.
Settings
The large top banner has the selector (class) no-gutters applied, this means that the image goes all the way to the edge of the page.
The custom banner also sits within a column 12 this also has no-gutters applied using the cms and has boostrap margin applied to show a space under the banner, this is mb-2 which means margin bottom with a spacer of 2.
Promotional Banner
Desired Dimensions
Desktop: 1920px X 350px
All file sizes should be under 2mb
This has the same settings as the banner above and is updated in the same way.
Where there isn't a separate mobile image the same image should be uploaded in both upload sections.
Large image and Smaller Image
| Image | Dimensions |
|---|---|
| Large image | 1280x800 px |
| Small image | 640x800 px |
To keep the site running smoothly, all file sizes should be under 2mb
These images are contained in a 8/4 column, with mb-2 set as the margin and no gutters. The images are both custom banners and the images and links are updated in the same way as above.
Collection banner
| Image | Dimensions |
|---|---|
| Image | 1920x650 px |
To keep the site running smoothly, all file sizes should be under 2mb
This has the same setting at the top banner and is updated in the same way.
3 rectangular category banners
| Image | Dimensions |
|---|---|
| Image | 640x800 px |
To keep the site running smoothly, all file sizes should be under 2mb
These categoy banners are contained in a 4x3 layout that has no gutters and a bottom margin of 2 set.
The images are contained in 3 custom banners and the images and links are updated as above.
These custom banners all contain the bootstrap padding px-1, this is horizontal padding with a spacer of 1, so the gaps between are equal.
Product Carousel
The product carousel is currently powered by fredhopper and controlled externally, this component is contained with the merchandising section of components, the component is added and there is an option to set a url, this is currently set to homepage.
Shop by fit
This section is created by markdown component with some code added to show this section as per the design, if you are able to navigate this you can update the text and links or ask us and we can do this for you.
Page settings
In the page setting tab, fourth tab on the right when you are in the page, there are a number of options to view on the setup of the page.
Page settings
This section allows you to set the page as full width using a checkbox, there is also the option to set a background colour for the page, add tags and Meta title and description.
Structure
This shows you a tree like structure of the page, you can click on the individiual names to take you to that section of the page.
Revisions
Revisions are where previously saved versions of the page are, the cms panel will always show the published page, but if you have saved a revision and not published it, the saved revision can be loaded to continue working on it. The CMS also autosaves frequently so you load from an autosave too. To clear a revision back to the previous revision, click the dustbin icon on the top panel near save revision.
For further generic information on using the cms, see: