Sections

Hero image slider

Use a hero image slider section to display a full-sized banner of images and/or videos. Content added to hero slider sections fills the width of the website:

Use the settings to configure the content that is contained within the section:

Autoplay: Select the tickbox beside 'Autoplay the slides' to have the images automatically move to the next one at the set interval. Use the slider under ‘Autoplay time’ to determine at what speed (in seconds) the slides should change.

Remove the top margin: Enable this setting if you want to remove the empty space above the slides.

Show progress indicator: Enable this setting if you want to display progress circles at the bottom of the section to show how many slides there are and which one is currently displaying.

---

Select Set & re-order content to add images/videos to the section. Each image/video will be contained within a block, so to add a new image select Add a new block. Then you can choose between adding an ‘Image Slide With Text’, ‘Image Slide’ or a ‘Video Slide’.

Image Slides

Within the block you can add an image for desktop and an image for mobile. The recommended image size for each device is displayed above the box. When you select the image from your computer’s files, you can then crop the image if you want to. You can then configure further settings for that slide:

Image Alt Text
Enter the text you would want to be displayed if the image failed to load. This text is also used by screen reader software for users who are listening to a website rather than viewing it.

Slide Text
This field will be available if you have chosen to add an image slide with text. Enter the text that you want to display on the slide, customising it to your requirements.

Slide Button Text and Slide Button Link
If you would like the slide to display a clickable button, you can configure it using these settings. Enter the text that you want to display on the button in the text box. In the link box enter the path for where you want the button to link to. This button can only link to pages on your website. You don't need to enter the full URL, only the path that comes after the first /. For example, if you wanted the button to link to your about us page, you would enter /about-us.

Video Slides

For a video slide, enter the full embedding code for the video into the field.

---

To manage each block, select to view all of the blocks you have created. You can use the compass icon to arrange in what order your images/videos should display in the section. If you don’t want a block to display, but you also don’t want to delete it, use the eye icon to hide that block. When the icon has a slash through it, that block won’t display. Click the icon again if you want to display the block.

Image with text overlay

Use an ‘Image With Text Overlay’ section to add an image with a text box overlay to a page:

You can add multiple images in this section, and users can then scroll between them.

To add images to the section select Set & re-order content. Each image will be contained within a block. Select Add a new block to configure settings for each image.

Slide Image (Desktop & Mobile) - For both desktop and mobile, select the image from your computer’s files. The recommended size for each image is listed above the box. Once you have selected the file, you can use the image cropper to crop the image or you can upload it without cropping.

Image Alt Text - Enter the text you would want to be displayed if the image failed to load. This text is also used by screen reader software for users who are listening to a website rather than viewing it.

Slide Text - Enter the text that you want to display in the text overlay box on the slide, customising it to your requirements.

Slide Button Text and Slide Button Link - If you would like the slide to display a clickable button, you can configure it using these settings. Enter the text that you want to display on the button in the text box. In the link box enter the path for where you want the button to link to. This button can only link to pages on your website. You don't need to enter the full URL, only the path that comes after the first /. For example, if you wanted the button to link to your about us page, you would enter /about-us.

To manage each block, select to view all of the blocks you have created. You can use the compass icon to arrange in what order your images/videos should display in the section. If you don’t want a block to display, but you also don’t want to delete it, use the eye icon to hide that block. When the icon has a slash through it, that block won’t display. Click the icon again if you want to display the block.

Image with text

Use an ‘Image With Text’ section to add an image that has a text box displaying next to it:

You can only add one image per section. Configure the following settings for the section:

Image - Add your image to the section by selecting it from your computer’s files. The recommended size for the image is listed above the box. Once you have selected the file, you can use the image cropper to crop the image or you can upload it without cropping.

Image Alt Text - Enter the text you would want to be displayed if the image failed to load. This text is also used by screen reader software for users who are listening to a website rather than viewing it.

Fill the image container - Place a tick in the box if you want the image to fill the box in the page where the image is displayed. Use the live preview editor to see how each option looks. Which option is best will depend on the images you are using.

Text - Enter the text that you want to display in the text box that appears beside the image, customising it to your requirements.

Slide Button Text and Slide Button Link - If you would like the slide to display a clickable button, you can configure it using these settings. Enter the text that you want to display on the button in the text box. In the link box enter the path for where you want the button to link to. This button can only link to pages on your website. You don't need to enter the full URL, only the path that comes after the first /. For example, if you wanted the button to link to your about us page, you would enter /about-us.

Embedded products

Use an ‘Embedded products’ section to display specific products on the page.

Heading text and description text - Use these fields to determine what text you want to appear to introduce the section.

Show featured products? - Choose whether you want to show your featured products or products from a specified category. If you want to embed products from a category, under ‘Select Products’, enter and select which category of products should be shown.

Products to show - Use the slider to choose how many products should display in the section in total.

Products per row - Use the products per row settings to determine how many products you want to display on a single row for different devices. We recommend checking your site on each device size to see what works best for your website.

Recently viewed products

Add a ‘Recently Viewed Products’ section, so visitors to your website can see what products they have most recently looked at. This is useful for users if they want to quickly return to a product they were interested in.

Embedded categories

Add an embedded categories section to display selected categories in a row where multiple categories can display at once:

Choose whether you want to show your featured categories or categories located within a specific parent category. If you want to embed categories from a parent category, under ‘Select Parent Category’, enter and select one of your parent categories.

Categories To Show - Use the slider to choose how many categories should display in the section in total.

Categories Per Row - Use the categories per row settings to determine how many categories you want to display on a single row for different devices. We recommend checking your site on each device size to see what works best for your website.

Featured categories

Add a featured categories section to display selected categories in a full-sized section that displays one category at a time and with a ‘Browse’ button:

Choose whether you want to show your featured categories or categories located within a specific parent category. If you want to embed categories from a parent category, under ‘Select Parent Category’, enter and select one of your parent categories.

Categories To Show - Use the slider to choose how many categories should display in the section in total.

Embedded brands

Use an embedded brands section to show a selection of the brands you sell.

Brands To Show - Use the slider to select how many brands you want to display in the section.

Brands Per Row - Use these settings to select how many brands should display on each row for each device type.

Text section

Use this section to add a simple text area to the page, customising the text to your requirements.

Text columns (images optional)

Use a text columns section to have text sections on the page that display in columns. Two columns can display in a row, and if you add more than two columns new rows will be created.

To add text columns to the section, select Set & re-order content. Each text column will be contained within a block. Select Add a new block to add content for each text column. You can choose between adding just a regular ‘Text Column’ or a ‘Text Column With Image’:

Text Column

Text - Enter the text you want to display in the column, customising it to your requirements.

Text Column With Image

Image - Add an image to the column by selecting it from your computer’s files. The recommended size for the image is listed above the box. Once you have selected the file, you can use the image cropper to crop the image or you can upload it without cropping.

Image Alt Text - Enter the text you would want to be displayed if the image failed to load. This text is also used by screen reader software for users who are listening to a website rather than viewing it.

Fill the image container - Place a tick in the box if you want the image to fill the box in the page where the image is displayed. Use the live preview editor to see how each option looks. Which option is best will depend on the images you are using.

Text - Enter the text you want to display in the column, customising it to your requirements.

Blog posts

Use a blog posts section to display cards of your blog posts on the page. Configure the following settings for how the section should display:

Title Text - use this text snippet to change the title displayed at the top of the section

Posts To Show - use the slider to determine how many blog posts should display in the section. How many posts display at one time in the slider will depend on what size device the visitor is using.

Autoplay the blog posts - enable this setting to have the display automatically move to the next post at the set interval.

Autoplay time - use the slider to determine at what speed the slides should change.

Excerpt length - select how many characters from the excerpt should display in the section for each post.

---

To find the recommended size for your theme's blog post thumbnails, please consult the theme help guide for your theme.

Testimonials

Use this section to configure and add testimonials from your customers to your website.

To add a testimonial select Set & re-order content. Each testimonial will be added as a block, so to add one select Add a new block and configure the following settings:

Customer Name - Enter your customer’s name in this field.

Testimonial/Review Content - Enter the content from your customer’s review here, customising the text as you need.

To manage each testimonial block select to view all of the blocks you have created. You can use the compass icon to arrange in what order the testimonials should display in the section. If you don’t want a block to display, but you also don’t want to delete it, use the eye icon to hide that block. When the icon has a slash through it, that block won’t display. Click the icon again if you want to display the block.

Then configure further settings for how your testimonials should display:

Heading Text - Enter what text you want to appear at the top of the section.

Testimonials To Show - Use the slider to determine how many testimonials should display in total in the section.

Autoplay the testimonials - enable this setting to have the display automatically move to the next testimonial at the set interval.

Autoplay time - use the slider to determine at what speed the testimonials should change.

Show scrolling arrows - Enable this option to show arrows which visitors can use to scroll between your testimonials.

Show progress indicator - Enable this setting if you want to display progress circles at the bottom of the section to show how many testimonials there are and which one is currently displaying.

Website page content

Use this section to embed content from one of your configured website pages onto the page.

Title Text - Enter the title that you want to display for the section.

Select Website Page To Embed - Use the drop-down to search for and select one of your website pages. Any changes you want to make to the content of the section will need to be made within the website page editor.

Gallery of images

Select Set & re-order content to add images to the section. Each image will be contained within a block, so to add a new image select Add a new block. You can then choose between adding a ‘Single Image’ or adding an ‘Image Gallery’:

---

Single Image

If you choose to add a single image, select select image file, then choose the image from your computer’s files.

Gallery Image Alt Text - Enter the text you would want to be displayed if the image failed to load. This text is also used by screen reader software for users who are listening to a website rather than viewing it.

Gallery Image Link - If you want the image to link somewhere, enter the path for where you want the image to link to. This image can only link to pages on your website. You shouldn't enter the full URL, only the path that comes after the first /. For example, if you wanted the image to link to your about us page, you would enter /about-us.
Note: If you enter the full URL, you may see errors when navigating through the website using the theme editor.

---

Image Gallery

If you choose to add an image gallery, select Select Gallery. A new sidebar will then appear, where you can select one of your configured theme galleries.

---

You can also configure the following settings for how the gallery should display:

Aspect Ratio: The aspect ratio of the image determines the proportional ratio between the height and width of the image. Adjusting the slider to change the ratio, you can determine using the live preview editor how your images look best.

Fill the image container: Place a tick in the box if you want the image to fill the box in the page where the image is displayed. Use the live preview editor to see how each option looks. Which option is best will depend on the images you are using.

Images To Show: Use this setting to determine how many images you want to display in a row at one time.

Gallery display: Use this setting to determine in which way you want the gallery to display:
Slider: Select this option if you want users to have to scroll through to see all the images.
Stack images in rows: Select this option if you want multiple rows of images to display so users can see all images without scrolling through them.

Autoplay the slides: Enable this setting if you want images to automatically scroll to the next one. Use the slider under 'Autoplay time' to determine at what speed (in seconds) the slides should change.

Show scrolling arrows: Enable this option to show arrows which visitors can use to scroll between your images.

Show scrolling dots: Enable this option to show dots at the bottom of the section which allow visitors to move between your images.

Embedded video

Use the embedded video section to add a video to the page. Select Set & re-order content and choose either 'Video With Image Overlay' or 'Video' depending on which option you want:

---

Video With Image Overlay

Select this option if you want users to have to select to open the video on the page:

Then configure the following settings:

Video URL: Enter the URL where the video is located
Button text: Enter what text you want to display beneath the video icon
Video thumbnail image: Use this setting to add an image to the display of the section. The above example displays the section when an image as been added. If you don't add an image, a grey background will display.
Image alt text: Enter the text you would want to be displayed if the image failed to load. This text is also used by screen reader software for users who are listening to a website rather than viewing it. You don't need to enter anything here if you haven't added a thumbnail image.

---

Video

Select this option if you want to display the video directly on the page:

To add the video, simply enter the full embedding code for the video. You will then be able to see the video in the live preview editor.

Newsletter form

Use a newsletter form section to add a section where users can sign up to your newsletter:

You can use the settings to customise the text you want to display in the form.

Custom HTML

Add a custom HTML section to create a section entirely through HTML. You cannot use twig in this field.

Separator

Use a separator section to add a line to separate other sections of the page. You can configure how you want the line to look:

Line style - choose if you want the line to be solid or dashed.
Height - use the slider to choose what you want the height of the slider to be.
Colour - use the colour picker to select the colour of the line. You will need to select to refresh the preview to see how the colour change looks.

Extra margin

If you want to add some extra space between sections of the page, use the extra margin section. Use the slider to configure how big you want the extra margin to be.

Developer section

The developer section can be used by ShopWired developers to create custom sections should you need them. If there is a section that you would like adding to your theme, please contact us.