Vivify Version 6

If Vivify is your live theme, duplicate it and make changes to the draft theme. This prevents incomplete changes from being displayed to visitors.

1. Navigate to Website > Themes
2. Find the Vivify draft theme
3. Select actions and then customise this theme
4. Use the live preview or page navigator to open the page to edit
5. Select a section to configure it, or select add a new section to add another section
6. Drag and drop sections or blocks to change their order
7. Preview the page on desktop and mobile
8. Select save changes

The sections shown in the theme editor depend on the page you are viewing. For example, Product Content is available on product pages and Basket Items is available on the basket page. Other sections, such as Text Section or Gallery Of Images, can be added to different pages.

As you change Vivify's settings, many changes appear in the preview automatically. For settings that don't update straight away, select the refresh button in the theme editor to update the preview.

Refreshing the preview does not save your work. When you are happy with your changes, select save changes to save them to the theme. If you are editing your live theme, the saved changes are then applied to your website. Changes saved to a draft theme remain on that draft until you make it live.

If you leave the theme editor without saving, your changes can be lost.

You can use the Theme Width & Layout settings to control the maximum width of the website and the default space between sections.

Determines the widest size at which Vivify displays the page content. On browser windows wider than this value, empty space is added on either side of the page. Reducing the value creates a narrower layout. Increasing it allows content and cards to use more horizontal space on large screens.

Determines the default vertical space between sections. Each section also contains Remove the top margin and Remove the bottom margin settings. Use those settings when only one join between sections needs to be changed.

You can use the Typography settings to select the Google fonts used by Vivify and configure the size and weight of different text styles.

Selects the font used for page titles and headings. It also affects headings displayed inside sections, including product, category and promotional headings.

Selects the font used for paragraphs, product information, menus, forms and supporting text.

Vivify provides separate size settings for H1 to H6 headings, large body text, standard body text, small body text, large buttons and standard buttons. Font weights can be selected separately for headings, body text and buttons.

Some Google fonts do not include every font weight. Vivify uses the nearest available weight when the selected weight is unavailable.

A colour scheme is a reusable set of colours that can be assigned to a page, header, footer or individual section. Changing a scheme updates every part of the theme that uses it.

Vivify includes Primary, Dark scheme, Newsletter popup and Age verification popup schemes. The two popup schemes are used by their corresponding popups.

Each full colour scheme can define colours for backgrounds, shaded backgrounds, borders, buttons, button text, headings, body text, icons, links, warnings and notices.

1. Open the colour-scheme settings in the theme editor
2. Configure the required colours
3. Open a page or section that uses the scheme
4. Select the scheme from the Colour scheme setting
5. Check headings, body text, links, buttons, borders and notices
6. Select save changes

You can use the Effects settings to control styling shared by forms, buttons and images across Vivify.

Enable scroll-reveal effect animates supported content as it enters the visible page. Check long pages and lower-powered mobile devices after enabling it.

Border-radius settings control how rounded form settings, buttons and images appear. Form Field Border Thickness (px) changes the weight of the outline around form settings. Button Hover Animations controls the effect displayed when a visitor moves a pointer over a button.

These settings apply across several pages. Check the contact form, customer forms, product images and each button style after changing them.

card settings affect repeated product, category, brand and blog cards. They are used on listing pages and by relevant other sections.

Product Cards controls image behaviour, aspect ratio, brand name, variation pricing, text alignment, wishlist control, quick view and spacing. Quick View controls the product information and purchasing controls displayed in the quick-view modal.

Category Cards, Brand Cards and Blog Cards provide their own image, text, row-count and spacing settings. A section can override row counts for its own layout while retaining the corresponding card styling.

Check cards with short and long titles, missing images, sale prices and different product options before making changes live.

Vivify's header appears across the website. Select the required Header Style, then configure the logo, favicon, announcements, message, link lists and menu options.

The header supports category-menu links, an additional header menu, off-canvas menus and a responsive menu. Options can display links for home, brands and the blog, together with search, wishlist, account and basket controls.

Sticky settings keep the header, announcement bar or category menu at the top of the browser while the visitor scrolls. Enable only the elements that need to remain visible because several sticky rows can occupy a large part of a mobile screen.

Instant Search displays product suggestions while a visitor searches. Its row settings control the number of suggestion cards on desktop, tablet and mobile.

Vivify's footer appears across the website. Select the required Footer Style, then configure its copyright statement, link lists, contact information, newsletter setting, payment logos and optional custom HTML.

Three footer link lists are available. Use separate lists for groups such as customer information, policies and account links. The visible contact details come from the ShopWired account's contact information.

Only enable payment logos for methods customers can use. Three additional payment-gateway images are available when a required logo is not included in the standard list.

Custom HTML can be placed above or below the standard footer content. Test custom code on a draft theme.

The Welcome Popup (e.g. newsletter) can display a message, image and optional email setting after a configured delay. It uses the Newsletter popup colour scheme.

Configure the title, text, image, email instructions and delay. Disable the email setting when the popup is only being used for an announcement.

Check the popup on mobile and ensure visitors can dismiss it. Avoid displaying it immediately when another required notice already occupies the screen.

The Age Verification Popup asks visitors to confirm the required age before using the website. It uses the Age verification popup colour scheme.

Configure the title, explanatory text, image and Age verification fail URL. Visitors who do not pass the check are directed to that URL.

You can use Social Media to enter the complete address for each profile displayed by Vivify. Supported services include Facebook, X/Twitter, LinkedIn, Pinterest, YouTube, Instagram, TikTok, Snapchat, Tumblr, eBay, Etsy, Amazon and WhatsApp. WhatsApp can be limited to mobile devices.

You can use Icons to replace supported Vivify icons with Font Awesome icons. Icon settings cover navigation, account, basket, product and social-media controls.

You can use a consistent icon family and check that every icon remains understandable without relying only on its shape.

VAT Pricing Display controls whether prices include VAT, exclude VAT or show both, together with the prominent price and excluding-VAT label. Check product cards, product pages, quick view and the basket after changing it.

Hiding Pricing can hide product prices unless a visitor is logged into a trade customer account. This affects the shopping journey and should be tested as both a visitor and a trade customer.

The Customer Accounts setting can display the referred-friends page within the customer account area when the corresponding feature is available.

Vivify includes settings for the different pages on your website, including category, brand, product, basket, website, blog and customer-account pages. Open the page you want to change in the theme editor to see the sections and blocks available for that page.

You can use Categories to control the main page that lists the website's categories. Its blocks can display the page title, description, category cards, additional text, an image and custom HTML.

The Categories block displays the categories on this page. You can move the title, description and other blocks above or below it to arrange the page in the order you want. Category images and titles are controlled by the Category Cards settings.

You can add text, an image or custom HTML above or below the category list if you want to include more information on your website's main categories page.

You can use Parent Category to control pages for categories that contain subcategories. It can display the category title, two category-description positions, subcategory cards, text, an image and custom HTML.

The Categories block displays the subcategories assigned to the parent category being viewed. Read more about categories and category structures.

ShopWired accounts have one category description by default. If you want to use Category Description 2, contact the ShopWired support team and ask them to enable a second category description on your account. You can then position the two descriptions separately on the page.

You can use Category to control pages for categories that contain products. It supports the category title, two description positions, filters, product cards, pagination, text, an image and custom HTML.

The Products block displays the products assigned to the category. Pagination & Filters lets customers sort and filter those products, and Pagination lets them move between pages when there are more products than can be shown on one page. For information about changing the appearance of the products, see product card settings.

Filters only appear when suitable filters and products are configured. Pagination appears when the number of matching products exceeds the products-per-page setting.

ShopWired accounts have one category description by default. If you want to use Category Description 2, contact the ShopWired support team and ask them to enable a second category description on your account. You can then place one description above the products and the other below them.

You can use Brands to control the page that lists all active brands. It supports title, description, brand cards, text, image and custom HTML blocks.

The Brands block displays the brand-card list and uses the Brand Cards settings. Keep it enabled when this page is used as the main route for visitors to browse brands.

You can use Brand to control an individual brand page and display the products assigned to that brand. It supports brand title, description, filters, product cards, pagination, text, image and custom HTML blocks.

The Products block displays the products assigned to the brand. Pagination & Filters lets customers sort and filter those products, and Pagination lets them move between pages when necessary. If a brand has no active products, no products are displayed on its page.

The Brand Description block displays the description saved for the brand. You can also add separate text, image or custom HTML blocks above or below the products.

You can use Search to control the search-results page. It supports title, description, search box, filters, product cards and pagination blocks.

The Search Box block allows the visitor to submit another search without leaving the results page. Products displays matching product cards. Pagination is only displayed when the results exceed the configured products per page.

Keep an empty-results description available so visitors understand when no products match their search.

Place the Search Box above the products so customers can change their search easily. The available filters depend on the products that match each search. Test the page with a search that returns products and one that does not.

You can use Product Content to control the main purchasing area on every product page. It displays the product images and the product-information blocks you choose to include.

Image settings control the desktop image width, aspect ratio, cropping, rollover zoom, zoom strength, zoom window, lightbox, navigation controls and thumbnails. Check products with one image and products with several images after changing these settings.

Available blocks include the title, brand, SKU, prices, descriptions, stock, offers, variations, product choices, product extras, customisation fields, file uploads, subscription information, quantity, add-to-basket control, reward points, social sharing and supporting content.

Some blocks only appear when the relevant information has been added to the product. For example, the Brand block only appears when the product has been assigned to a brand. Keep purchasing blocks in a logical order: product identity and price first, required selections next, then quantity and add-to-basket controls.

Tabbed Descriptions displays product descriptions 1 to 5 in tabs or an accordion, according to Style. It can also contain an additional content block.

Only descriptions containing content are useful to visitors. Disable unused blocks and name each product-description setting consistently across the products in your account.

Use tabs when visitors benefit from switching quickly between short related topics. Use the accordion style when descriptions are longer or when a narrow-screen layout is the priority. Avoid repeating the same description in Product Content and this section.

On smaller screens, the layout may adapt to the available width. Check long tab titles and long content on mobile.

Product reviews displays reviews associated with the product being viewed and a form visitors can use to submit a review when the feature is available.

Configure the section heading, no-reviews message, form-toggle text, form heading and submit-button text. The no-reviews message is displayed before the product has published reviews.

Use clear form-toggle text so visitors understand that selecting it opens the review form.

The section depends on the product-review feature and reviews associated with the product being viewed. Test products with no reviews, one review and several reviews. Keep the message shown when the list is empty helpful without implying that the product is new unless that is known.

You can use Gift Card to control the page used to purchase a gift card. It displays the page title, explanatory text, gift-card form and submit button.

You can use Voucher form width to control the width of the form. Configure the text so visitors understand what information they need to enter and how the recipient receives the gift card.

Check long recipient names, personal messages and the available gift-card amounts. Keep unrelated promotional sections after the form rather than between its settings.

You can use Basket Title to control the beginning of the basket page. Its blocks display basket error messages, the page title and the current basket total.

Keep Error Messages enabled. Vivify uses this block for important platform messages, including the warning shown when customer-uploaded product files have been lost after the original session ends.

The Total block is a summary at the top of the page; the full calculation is displayed by the Basket Total section.

The title and top total remain visible when the basket is empty, allowing the page to retain the same overall structure before and after products are added.

Basket Items displays every product in the basket. Each row can include its image, title, options, product choices, comments, extras, uploaded files, delivery information, quantity, price, subtotal and remove control.

You can use the settings to show or hide the quantity, price and subtotal columns. Show move to wishlist button allows logged-in customers to move an eligible item from the basket to their wishlist.

The uploaded-file list is independent of product comments. When uploaded files are lost, the Basket Title error block displays the corresponding warning.

When the basket is empty, this section replaces the item table with the configured empty-basket text. The surrounding Basket Title and Basket Total sections remain present.

Basket Total displays controls and calculations used to complete an order. Its blocks are Voucher Code & Reward Points, Totals and Checkout.

The first block displays the voucher-code or reward-point controls available to the visitor. Totals displays the basket calculations. Checkout displays the controls used to continue from the basket.

Keep these blocks in a logical order and test the basket with delivery, discounts, VAT and reward points where applicable.

Vivify displays the totals and checkout area even when the basket is empty. Test the checkout control with both an empty and populated basket.

You can use Wishlist to control the customer's wishlist page. It supports title, description, filters, product cards and pagination blocks.

The page uses the product-card settings shared with category, brand and search pages. Wishlist content depends on the current visitor or logged-in customer. Check both an empty wishlist and a wishlist containing enough products to use pagination.

When no products have been saved, Vivify displays the page title and an message shown when the list is empty instead of the product grid. Configure the title and description so this state still gives the visitor a clear next step.

Content Page Title displays the title of the website page being viewed. Its content comes from the page configured in the ShopWired account.

Move this section to change the title's position relative to other sections. Remove it only when another section provides an appropriate visible page heading.

The title is taken from the website page being viewed and changes automatically between pages using this layout. Do not replace it with fixed text that would be repeated across every content page.

Content Page Contents displays the text, images and other information you have added to the website page. To change this information, edit the page in your ShopWired account.

other sections can be placed before or after this section. Removing it hides the page's standard content but does not delete that content from the account.

Use this section once in the normal page layout. Adding a separate Website Page Content section for the same selected page can duplicate the content.

The blog-home Title section displays the blog page title and optional description. Use it to introduce the blog before the navigation and post list.

The values configured here apply to the blog home page rather than individual blog posts.

Keep the title visible when the blog is linked from the main navigation. Add a short description when visitors need context about the subjects covered.

The blog-home Search section displays a search form for blog content. Configure Blog search text to tell visitors what the setting searches.

Place it near the blog category or archive navigation when visitors need several ways to find posts.

Category Menu displays the available blog categories. Visitors use it to limit the post list to a subject.

The menu content comes from the categories assigned to blog posts. Categories without relevant published content might not provide a useful destination.

This section works well when posts are consistently categorised. If categories are incomplete or rarely used, blog search and the archive menu can provide more reliable navigation.

Archive Menu displays links that allow visitors to browse blog posts by their archive period.

This works well when the blog contains enough older posts for date-based navigation to be useful. It does not replace the blog-category menu, which organises posts by subject.

Archive periods are generated from published post dates. The list grows as posts are published in new periods, so check that it does not dominate an established blog page.

The blog-home Blog Posts section displays the list of published blog posts. Its Blog Posts block determines where the list appears in the blog-home layout.

Cards use Vivify's Blog Cards settings. Keep the blog pagination section after the post list when the blog contains more posts than can be displayed on one page.

Each displayed post can include its title, publication date, excerpt and read button. Missing or very short excerpts create uneven cards, so review the post list after changing excerpt-length settings.

Blog Pagination displays navigation between pages of blog posts. It appears when the post list contains more pages.

Place it after the blog-home post list. The section can remain configured when there is only one page; it will not provide additional page links until they are required.

Avoid placing important explanatory content between the post list and pagination because visitors can mistake the navigation as belonging to that content.

You can use Blog Post Title to control the heading area on an individual blog post. Its blocks can display social sharing, the title and the publication date.

Blog Image Size controls the desktop display size of the blog image. Set it to 0 to hide the image on desktop. This setting does not control the mobile display in the same way.

Reorder the blocks to place the date or sharing controls around the title while retaining a clear main heading.

Blog Post Content displays the body of the current blog post. Its headings, paragraphs, images and links come from the post content configured in the ShopWired account.

Removing the section hides the article body without deleting it. Place other sections before or after it rather than interrupting the article with unrelated content.

The content changes for every blog post using the layout. Ensure headings within each post begin below the main post title and add descriptive alternative text to images in the blog-post editor.

The Disqus Comments section embeds a Disqus discussion beneath a blog post. Enter the website's Disqus shortname in Disqus.

Register the correct website with Disqus before enabling the section. An incorrect shortname can load the wrong discussion configuration or prevent comments from appearing.

Place comments after the blog-post content. Disqus is a third-party service and can introduce its own loading, moderation, privacy and consent requirements.

The galleries-page Title section displays the page title and description above the gallery list.

You can use the description to explain the purpose of the galleries. The individual galleries and their images are maintained separately in the ShopWired account.

Use this section once above the gallery list. Keep the description concise so visitors can reach the galleries without scrolling through a long introduction.

The galleries-page Galleries section displays galleries assigned to the current theme. Each item links to its gallery using the configured button text.

Only galleries associated with Vivify are included. Image galleries remain associated with their original theme even if another theme is made live. Read more about image gallery theme association.

The button text is shared by the gallery cards, so choose wording that works for every gallery. Test galleries with different image counts and confirm that every card has a useful cover image.

The videos-page Title section displays the page title and description above the video list.

You can use the description to explain the type of video content available rather than repeating the title.

Place this section directly before the video list unless another introductory section provides the page heading. Avoid embedding video players in the description because the Videos section manages the player grid.

The videos-page Videos section displays videos configured for the website in an embedded grid. Configure the number of videos per row separately for desktop, tablet and mobile.

Check that each provider permits embedding and that the selected row counts leave enough width for the video controls.

Use fewer videos per row on smaller screens so titles and playback controls remain usable. Check unavailable or private videos because the third-party player can display an error inside the grid.

Account Login displays the customer login form and can display a separate registration prompt. Configure the headings, supporting text, forgotten-password text and button labels.

You can use Display a signup section? to show or hide the registration area. Hiding it does not disable customer registration elsewhere on the website.

When enabled, Vivify renders the login form and new-customer prompt as separate visual panels. The login panel contains email address, password, forgotten-password and login controls. The registration panel provides the configured heading and account-creation button.

Account Forgotten Password displays the form customers use to request password-recovery instructions. Configure its title, description and button text.

The description should tell customers to enter the email address associated with their account. Do not promise immediate delivery because email delivery time can vary.

Keep the button text specific to requesting recovery instructions. The form should not ask customers to create a new password on this page; the recovery email provides the next step.

Account Registration displays the customer-account registration form. Configure the page text, address heading and submit-button text.

Optional settings can display company name, date of birth and marketing-consent settings. Only request information needed for the account or an enabled feature. Write marketing-consent text that accurately describes the messages the customer agrees to receive.

The standard registration form also contains name, email address, telephone, password, address and country settings. The optional theme settings add to this standard form rather than replacing it.

Trade Account Registration displays the trade-customer application form. Configure its title, application instructions, address heading and button text.

Optional settings can request date of birth, mobile number, company website, VAT number and marketing consent. Explain the information required to assess the application and what happens after submission.

The form creates an application for review; it does not by itself guarantee that the applicant receives trade-customer access.

Vivify's standard trade form contains company name, contact, password, address and country settings before any optional settings are enabled. Make the application instructions clear enough to distinguish this page from ordinary customer registration.

404 Heading displays the message shown when a requested website address cannot be found. Configure a clear title and supporting message.

Avoid technical language. Tell visitors that the page is unavailable and provide a way to continue browsing.

Search Box displays a product-search form on the 404 page. Configure Search Instructions to explain how visitors can use it.

Keep this section or provide another clear navigation route so visitors are not left on a dead-end page.

You can change the text displayed beside the search box and on its go button. Searches made here display results on your website's normal search-results page.

Contact Information displays the website's address, telephone number and email address. Add and reorder the corresponding blocks to control which details appear.

The values come from the contact information configured for the ShopWired account. Update the source details when they are incorrect rather than replacing them with custom text in the theme.

Remove any contact-information blocks that your business does not use.

Contact Form displays the website's standard contact form. Configure the instructions shown above the form and the submit-button text.

Test the form and confirm where messages are delivered before making the theme live. Use the instructions to set expectations about the type of enquiry accepted or the expected response time where appropriate.

The standard form contains name, telephone number, email address and enquiry settings. Do not state that every setting is required unless that requirement is confirmed by the form validation.

You can use Newsletter Subscription to control the dedicated newsletter subscription page. Configure the page title and supporting text displayed with the subscription setting.

Explain the type of marketing content subscribers will receive. The page is separate from the Newsletter Form section that can be added within other pages.

Vivify includes sections for adding images, text, products, categories, blog posts and other information to your website's pages.

A section's settings affect the whole section. Blocks are the individual items inside it, such as a slide, testimonial or FAQ. Most sections can be used on different pages, while sections containing product recommendations are available on product pages.

Every section also includes a few standard controls which aren't repeated in each settings list below:

• Colour scheme applies one of your theme's colour schemes to the section
• hide temporarily removes the section from your website without deleting its settings
• The drag handle lets you move the section to a different position on the page

Blocks have their own ordering and visibility controls, so you can move or hide one item without affecting the rest of the section.

You can use the Hero Image Slider section to display a full-width sequence of large image or video slides. One slide is shown at a time. Visitors can move between slides using the slider controls. The section can also move through slides automatically.

Add one of the following blocks for each slide:

• Image Slide With Text displays separate desktop and mobile images with overlaid rich text and an optional button
• Image Slide displays separate desktop and mobile images with an optional button but no rich-text overlay
• Video Slide displays video content as a slide

The recommended image size is 1440px by 600px for desktop images and 640px by 700px for mobile images. When a mobile image is not configured, check the fallback desktop image on a narrow screen to ensure its subject remains visible.

You can use Show progress indicator to display the visitor's position in the slider. Use Autoplay the slides and Autoplay time (in seconds) to control automatic movement.

Enter concise Image Alt Text that describes the useful content of each image. If text already appears over the image, do not repeat all of that text in the alt text.

This section works well for the most prominent campaign or introductory content on a page. Use Image With Text Overlay when all slides are image-led and do not need the hero slider's alternative slide types. Use Gallery Of Images when the images are the content and do not need promotional text or buttons.

Each block becomes one slide and blocks are displayed in their configured order. Place the most important slide first because visitors see it before autoplay or manual navigation changes the content. Avoid relying on later slides for information required to use the page.

Video and large image files can increase the amount of data needed to load the page. Compress images before uploading them and avoid adding more slides than the campaign needs.

Before a real block is added, Vivify displays a sample hero slide explaining that the example will disappear after content is configured. Adding the first block replaces that sample rather than adding another slide after it.

Vivify uses the mobile image when it is available. A portrait-oriented mobile image provides more control over cropping and the position of the subject. Overlay text and buttons occupy a larger proportion of a mobile slide, so check that they do not obscure important image content.

1. Add the Hero Image Slider to the required page
2. Add the block type required for the first slide
3. Upload separate desktop and mobile images where possible
4. Add the slide text and link settings required by that block
5. Add and order any further slide blocks
6. Configure autoplay and the progress indicator for the complete section
7. Test every slide using the desktop and mobile previews

Avoid adding an empty block to create spacing. An incomplete block can produce sample or missing content. Use Extra Margin when deliberate spacing is required.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

Displays a visual indicator showing the visitor’s position within the slider.

Moves through the section items automatically. Disable this when only one item is displayed.

Sets how long each item remains visible before the section advances automatically, from 1 to 15 seconds.

Add this block to include an image slide with text item in the section.

Recommended image size 1440px x 600px

Recommended image size 640px x 700px

Describes the image when it cannot be seen, including for visitors using screen-reading software.

ShopWired recommends setting the title text as an H2 tag.

You must add a button link below.

For example, enter /about-us to link to the About Us page. For external links, enter the full URL, including https://.

Selects one of Vivify’s configured button designs.

Select one of the available options: Left, Centre, Right.

Add this block to include an image slide item in the section.

Recommended image size 1440px x 600px

Recommended image size 640px x 700px

Describes the image when it cannot be seen, including for visitors using screen-reading software.

You must add a button link below.

For example, enter /about-us to link to the About Us page. For external links, enter the full URL, including https://.

Selects one of Vivify’s configured button designs.

Select one of the available options: Left, Centre, Right.

Add this block to include a video slide item in the section.

Enter the full embedding code for your video (not just the URL).

You can use the Image With Text Overlay section to display large image slides with content placed over each image. One slide is shown at a time, making this section suitable for promotions that need a strong image and a short message.

Add an Image Slide block for each item. Configure its desktop and mobile images, alt text, overlaid text, optional button and content alignment. The button only displays when both the required button content and link are configured.

You can use Autoplay the slides to move through the blocks automatically. Autoplay time (in seconds) determines how long each block remains visible.

Check that the overlaid text remains readable across the lightest and darkest parts of every image. If one colour scheme does not work for all slides, edit the images to provide a consistent area behind the text.

This section works well for a sequence of image-led messages where the text must remain on top of the image. Use Hero Image Slider when video slides or image slides without rich text are required. Use Image With Text when text readability is more important than placing text over photography.

Each image block becomes one slide. The first block is displayed first. A slide with no usable image can show the theme's sample or fallback presentation in the editor and should not be left incomplete on the live theme.

Configure a mobile image with a crop designed for a narrow screen. Check the alignment and text length for every slide, not only the first. If the image contains text as part of the image itself, it can become too small to read on mobile and should be replaced with editable overlay text.

Add one Image Slide block for each message. Upload both image sizes, add the overlaid text and configure both button settings when a button is required. Order the blocks in the sequence visitors should see them, then configure autoplay for the complete section.

The button text can be left blank while a link is present to make the image itself a link. If neither the image nor a visible button makes the destination clear, visitors might not realise that the slide is selectable.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

Moves through the section items automatically. Disable this when only one item is displayed.

Sets how long each item remains visible before the section advances automatically, from 1 to 15 seconds.

Add this block to include an image slide item in the section.

Recommended image size 1286px x 520px

Recommended image size 640px x 880px

Describes the image when it cannot be seen, including for visitors using screen-reading software.

ShopWired recommends setting the title text as an H2 tag.

You must add a button link below. You can leave this field blank and enter a link below to make the entire image a link.

For example, enter /about-us to link to the About Us page. For external links, enter the full URL, including https://.

Selects one of Vivify’s configured button designs.

You can use the Image With Text section to display an image beside a panel of text. The layout uses a square-style image area and is suitable for introducing a category, service or piece of editorial content.

The recommended image size is 540px by 540px. Fill the image container determines whether the image crops to fill its available area or remains fully visible inside it.

Add the heading and supporting copy using Text. Configure Slide Button Text and Slide Button Link to display a button beneath the text. The button is not displayed when its link is missing.

You can use Button style to select one of Vivify's configured button designs. Enter a website path such as /about-us for an internal link, or a complete address beginning with https:// for an external website.

This section works well for a concise image-and-copy feature where the square visual treatment suits the source image. Use Image & Text when the image position or aspect ratio must be controlled. Use a text-only section when the image does not add useful information.

Enable Fill the image container when a consistent filled image area is more important than showing the whole source image. Parts of the image can be removed at the edges. Disable it for diagrams, packaging or other images that must remain completely visible.

The side-by-side layout stacks when less horizontal space is available. Check the transition from image to text and ensure the section still reads as one item. Avoid placing directional language such as "the text on the right" in the content because that position changes on smaller screens.

Upload the image and enter its alt text, then add the formatted heading and description through Text. To add a button, complete both Slide Button Text and Slide Button Link. Choose the button style and check whether image fill crops any important content.

This section represents one image-and-text item. Add another complete section when a second item needs the same layout.

Recommended image size 540px x 540px

Describes the image when it cannot be seen, including for visitors using screen-reading software.

Crops the image when necessary so it fills the complete image container.

Sets the supporting text displayed in this part of the section.

You must add a button link below to display the button.

Sets the destination opened by the button. Use a website path for an internal page or a complete URL for an external website.

Selects one of Vivify’s configured button designs.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Image & Text section to display an image and text side by side. This is an alternative layout to Image With Text and provides additional control over the image's aspect ratio and position.

The recommended source-image size is 1440px by 1440px. You can use Aspect Ratio to determine the shape of the displayed image and Fill the image container to control cropping. You can use Image Position to place the image before or after the text on larger screens.

The section stacks its content on smaller screens. Preview the mobile layout to confirm that the image and text appear in the required order.

Configure Slide Button Text, Slide Button Link and Button style to add an optional call-to-action button.

This section works well when the image shape and its position relative to the text are important. It is suitable for alternating image-and-copy rows because separate sections can place their images on opposite sides.

Select an aspect ratio that matches the type of image used throughout the section. A landscape ratio suits wide scenes, while a square or portrait ratio gives products or people more vertical space. Enabling image fill can crop the source to achieve that ratio.

The columns stack on smaller screens. Preview consecutive Image & Text sections because alternating desktop positions can produce an unexpected image and text order when every section stacks.

Upload the image, add its alt text and choose an aspect ratio before deciding whether to enable image fill. Enter the formatted heading and description through Text. Complete both button settings when a button is required, then use Image Position to choose the desktop order.

When creating alternating rows, add separate Image & Text sections and alternate Image Position. Check the mobile order because the side-by-side desktop layout stacks on narrow screens.

Recommended image size 1440 x 1440

Describes the image when it cannot be seen, including for visitors using screen-reading software.

Selects the displayed shape of the image container. Images can be cropped when image fill is enabled.

Crops the image when necessary so it fills the complete image container.

ShopWired recommends setting the title as an H2 tag

You must add a button link below to display the button.

For example, enter /about-us to link to the About Us page. For external links, enter the full URL, including https://.

Selects one of Vivify’s configured button designs.

Select one of the available options: Left, Right.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Text & Icon section to display up to three short pieces of information, each with an optional icon. It is suitable for delivery messages, payment information, service benefits or other concise statements.

Add a Text & Icon block for each item. Configure the icon and text within the block. The items display together as a row when enough horizontal space is available and adapt for smaller screens.

Keep each item similar in length so the section remains balanced. Use the same icon style across all blocks.

Use either a Font Awesome icon or an uploaded image for each block. To use Font Awesome, find the required icon on Font Awesome and enter the icon identifier expected by the theme. To use a custom graphic, upload it using Icon Image and add Icon Image ALT text when the image communicates information. The uploaded image takes priority when both icon settings contain a value.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

Add this block to include a text & icon item in the section.

e.g. 'fa-solid fa-envelope'

Recommended image size 54px x 54px

Describes the image when it cannot be seen, including for visitors using screen-reading software.

Sets the heading displayed in this part of the section.

Sets the supporting text displayed in this part of the section.

You can use the Embedded Products section to display a selection of product cards on a page. The section can use the account's featured products or products assigned to one selected category.

Select the source using Show Featured Products?. When category products are selected, use Select Category to choose the category. A category is an organisational group used to place similar products together. Read more about categories, brands, filters and products.

Products To Show sets the maximum number of products displayed in the section. Products Per Row controls the number of visible cards at each device size.

Enable Display container as a slider to place the product cards in a horizontal slider instead of a wrapping grid. The number of products per row determines how many cards are visible before the visitor moves the slider.

If the selected source has fewer products than Products To Show, only the available products are displayed. Products must be active and available to the visitor before they can appear.

Use featured products for a selection managed across the account. Use a category when the section should update as products are assigned to or removed from that category. Do not create a category solely for presentation without considering whether visitors can also reach its category page.

A grid allows visitors to scan all visible products and wraps onto additional rows. A slider keeps the section shorter and requires visitors to move horizontally to see later products. Place priority products first when their order can be controlled at the source.

Prices, sale prices, brand names, images, wishlist controls and quick view use the product-card settings. Test the section while logged out and logged into any customer type that receives different pricing or product access.

Before you configure this section, decide whether it should use products marked as featured or products assigned to one category. Mark the required products as featured in the ShopWired account when using Show Featured Products?. Otherwise, assign the products to the required category and choose it using Select Category.

Preview the section while logged out as well as in the theme editor. Inactive products and products unavailable to the visitor are not displayed. If fewer eligible products exist than Products To Show, the section displays only those available products.

Sets the heading displayed in this part of the section.

Sets the supporting text displayed in this part of the section.

Select to show your ShopWired account's featured products, alternatively select a category of products below.

Selects the category whose products are displayed. This setting is ignored when Show Featured Products? is enabled.

Choose the maximum number of products to display, from 1 to 30. If fewer suitable products are available, only those products are shown.

Displays the products in a horizontally moving slider instead of a fixed grid. Visitors can use the slider controls to reach additional products.

Sets the number of items visible in each row for the named device size, from 1 to 5.

Sets the number of items visible in each row for the named device size, from 1 to 4.

Sets the number of items visible in each row for the named device size, from 1 to 3.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Featured Product section to place one selected product and its purchasing controls within another page. This allows visitors to review and add the product to their basket without first opening its product page.

You can use Select Product to choose the product. The section uses the selected product's images, title, price, options and availability. The precise controls displayed depend on how the product is configured and which ShopWired features are enabled.

Check products with variations, choices, extras or required customisation settings before making the page live. The section must provide every required selection needed to add that product to the basket.

This section works well when one product is the primary focus of a campaign or landing page. Use Embedded Products when visitors need to compare several products. Avoid placing several featured-product sections close together because each one includes a full product-purchasing interface.

The content updates from the product record. Replacing the selected product can introduce different variations, required settings, image proportions or availability messages. Retest the complete section whenever the selected product changes.

Create and activate the product before selecting it in this section. Complete its images, price, description, variations and other purchasing settings first because the section obtains that information from the product.

After selecting the product, test every required variation, choice and extra from the section. If the selected product is deactivated or deleted, select another active product or remove the section.

Selects the single product displayed by the section.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Recently Viewed Products section to display product cards for products the current visitor previously opened. The content is personalised and can differ for each visitor.

Configure the heading, description, maximum number of products and the number of cards displayed per row on desktop, tablet and mobile.

The section has no content for a visitor who has not viewed any products. Check the surrounding layout with an empty recently-viewed list so that the page does not depend on the section always being present.

Use it near the end of a product-discovery page to help visitors return to products they considered earlier. It is not a replacement for related products because it reflects the individual visitor's browsing rather than a relationship between products.

Open several product pages in the preview session before returning to the page containing the section. Also test a new session with no product history. Browser or session changes can clear the recently viewed information.

Because the content varies per visitor, the theme editor preview might not show the same products as a new visitor sees on the live website.

Visitors generate this list by viewing product pages. Products are not selected in the theme editor, and the editor can show sample content when no browsing history is available.

Test the section by opening several active products and then returning to the page containing it in the same browser. A new visitor or a visitor whose browser data has been cleared can see no products. Avoid relying on this section as the only route to important products.

Sets the heading displayed in this part of the section.

Sets the supporting text displayed in this part of the section.

Choose the maximum number of products to display, from 1 to 30. If fewer suitable products are available, only those products are shown.

Sets the number of items visible in each row for the named device size, from 1 to 5.

Sets the number of items visible in each row for the named device size, from 1 to 4.

Sets the number of items visible in each row for the named device size, from 1 to 3.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Embedded Categories section to display several category cards in a grid. This differs from Featured Categories, which displays one large category at a time in a slider.

The section can display the account's featured categories or the subcategories assigned to a selected parent category. A parent category is a category that contains other categories. Read more about categories and category structures.

You can use Categories To Show to limit the number of cards. Configure Categories Per Row separately for desktop, tablet and mobile.

The appearance of each card also uses Vivify's Category Cards settings, including its image aspect ratio, image fill, title overlay and from-price display.

You can use the grid when visitors should compare several categories at once. Use Featured Categories for a more visual, one-at-a-time presentation. A grid is normally more suitable for primary navigation because more destinations are visible without interaction.

Each card depends on the category's active status, title and image. The optional from price depends on products available through that category. Check categories with missing images and long names before making the section live.

Before you configure this section, decide whether it should use categories marked as featured or subcategories belonging to one parent category. Configure the required category images and names first because those details form the category cards.

When using a parent category, choose a category that contains subcategories. Selecting a category that contains products rather than subcategories does not provide the intended list.

Select to show your ShopWired account's featured categories, alternatively select a parent category below.

Selects the parent category whose immediate subcategories are displayed. This setting is used only when the section is configured to use a parent category.

Choose the maximum number of categories to display, from 1 to 30.

Sets the number of items visible in each row for the named device size, from 1 to 5.

Sets the number of items visible in each row for the named device size, from 1 to 3.

Sets the number of items visible in each row for the named device size, from 1 to 3.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Featured Categories section to display one category at a time in a large carousel layout. Each category displays a large image, its title, its description on desktop and a browse button that opens the category page. Visitors can use the previous and next arrows to move between categories.

You can use Show Featured Categories? to select the source:

• Select featured categories to use categories marked as featured in the ShopWired account
• Select embedded from parent category and configure Select Parent Category to use the subcategories assigned to one parent category

Read how to assign a category as featured and learn about parent categories and subcategories.

Categories To Show determines the maximum number of categories included in the carousel. Set it to 1 to display one category without a sequence of additional category slides.

The image, title and description come from each category's configuration. Add suitable images and descriptions to the categories before using this section. Category descriptions are hidden by Vivify on smaller screens, so do not place essential instructions only in the description.

When using featured categories, mark each required category as featured in the ShopWired account. When using a parent category, assign the required categories as its subcategories and select that parent using Select Parent Category.

The carousel uses each category's image, name and description. Complete those category settings before checking the section, and ensure each category leads to active products or useful subcategories.

Select to show your ShopWired account's featured categories, alternatively select a parent category below.

Selects the parent category whose immediate subcategories are displayed. This setting is used only when the section is configured to use a parent category.

Choose the maximum number of categories to display, from 1 to 30.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Embedded Brands section to display brand cards in a grid. It uses active brands configured in the ShopWired account.

Brands To Show limits the number of brands in the section. Configure Brands Per Row separately for desktop, tablet and mobile.

The card appearance also uses the Brand Cards settings, including brand-name display, image aspect ratio, image fill and spacing.

A brand is used to group products, normally by their manufacturer. A product can be assigned to one brand. Read more about categories, brands, filters and products.

This works well when visitors recognise or browse products by brand. If brand names are unfamiliar to the intended audience, a product or category section might provide a clearer route to the available products.

Use consistent brand-logo dimensions and surrounding whitespace. A logo can be cropped when image fill is enabled in Brand Cards. Check that every displayed brand has active products so its destination page is useful.

Create the brands, upload consistent brand images and assign active products to them before using this section. The section can only display brands available from the ShopWired account; blocks are not added manually.

If a brand is missing, check that it is active and associated with products that visitors can view.

Choose the maximum number of brands to display, from 1 to 30.

Sets the number of items visible in each row for the named device size, from 1 to 5.

Sets the number of items visible in each row for the named device size, from 1 to 5.

Sets the number of items visible in each row for the named device size, from 1 to 3.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Customers Also Bought section on product pages to display automatic product suggestions based on products customers have bought together with the product being viewed. The section remains empty when ShopWired has no applicable purchase data.

Use it as an automatic recommendation section. Use Related Products when the recommendations must be selected manually.

ShopWired generates these recommendations from purchasing data; products are not selected inside the section. A new product or a store without enough applicable order history can therefore produce no recommendations. Use Related Products when particular products must always be suggested.

Sets the heading displayed in this part of the section.

Sets the supporting text displayed in this part of the section.

Choose the maximum number of products to display, from 1 to 30. If fewer suitable products are available, only those products are shown.

Sets the number of items visible in each row for the named device size, from 1 to 5.

Sets the number of items visible in each row for the named device size, from 1 to 4.

Sets the number of items visible in each row for the named device size, from 1 to 3.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

Related Products displays product cards manually related to the product being viewed. Configure its heading, maximum number of products, grid or slider display and products per row.

Nothing is displayed when the product being viewed has no active related products. Related products differ from Customers Also Bought, which uses purchase-based recommendations rather than manually assigned relationships.

Assign related products to each source product in the ShopWired account. The section reads the relationships for the product page currently being viewed, so its contents can differ between products.

Test a product with configured relationships and one without them. Inactive or unavailable related products are not displayed.

Sets the heading displayed above the related products. The default wording is You may also like.

Choose the maximum number of products to display, from 1 to 40. If fewer suitable products are available, only those products are shown.

Displays the products in a horizontally moving slider instead of a fixed grid. Visitors can use the slider controls to reach additional products.

Sets the number of items visible in each row for the named device size, from 1 to 5.

Sets the number of items visible in each row for the named device size, from 1 to 4.

Sets the number of items visible in each row for the named device size, from 1 to 3.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

Product Bundles displays bundle products associated with the product being viewed. Configure the heading, grid or slider presentation and products per row.

A product bundle combines constituent products into one product offering. The section only displays relevant active bundles. Check bundle pricing and availability on the product page after configuring the source products.

This section works well when the product being viewed forms part of one or more bundles that provide a meaningful alternative purchase. Avoid using it as a general product recommendation section; use Related Products for that purpose.

Create the bundle and associate it with the applicable products before expecting it to appear here. This section does not create bundles; it only displays bundles relevant to the product being viewed.

Test the bundle's price, constituent-product availability and purchasing controls on the live product page.

Sets the heading displayed above the product bundles. The default wording is Bundles.

Displays the products in a horizontally moving slider instead of a fixed grid. Visitors can use the slider controls to reach additional products.

Sets the number of items visible in each row for the named device size, from 1 to 5.

Sets the number of items visible in each row for the named device size, from 1 to 4.

Sets the number of items visible in each row for the named device size, from 1 to 3.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Text Section to add a standalone block of rich text to a page. It is suitable for headings, paragraphs, lists and links that do not require an accompanying image.

Add the content using Text Content. Use the rich-text heading controls to give long content a clear structure. Avoid using this section for content already maintained on a website page when the Website Page Content section could embed that content instead.

You can use one text section for one related subject. Split long content into separate sections only when each part needs its own colour scheme or position. Check that the first heading fits the page's heading hierarchy rather than selecting a heading level for its visual size alone.

Enter the complete content in Text Content, using headings to divide longer subjects and links to direct visitors to supporting pages. Preview the result at a narrow width and check that long headings, lists and links wrap correctly.

This section does not have repeatable blocks. Use a columns section when several separate items must appear alongside one another.

Sets the supporting text displayed in this part of the section.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Text Columns (Images Optional) section to display repeatable columns of text. Each block can contain text only or text with an image.

Add a Text Column With Image block when the item needs an image. Add a Text Column block for text-only content. Blocks display as columns when space is available and stack on smaller screens.

This section works well for related items of similar importance, such as services or business values. Keep images at consistent dimensions and keep headings and descriptions similar in length.

On smaller screens the columns stack in block order. Put the most important item first and avoid phrases such as "the column on the right". If one block contains much more text than the others, a standard Text Section or Image & Text section may provide a clearer layout.

Add one block for each column. Choose Text Column With Image when the item needs an image, or Text Column when it does not. Enter each item’s complete content inside its own block and order the blocks in the reading sequence.

The number of blocks determines the number of items, but the available screen width determines whether they appear alongside one another or stack. Do not describe an item only by its desktop position.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

Add this block to include a text column with image item in the section.

Recommended image size 400px x 400px

Describes the image when it cannot be seen, including for visitors using screen-reading software.

Crops the image when necessary so it fills the complete image container.

Sets the supporting text displayed in this part of the section.

Add this block to include a text column item in the section.

Sets the supporting text displayed in this part of the section.

You can use the Multi-Columns (Images Optional) section to create a flexible row of content columns. Add Text Column With Image and Text Column blocks in the required order.

This section is suitable for content that should read as a related set. Its layout differs from Text Columns (Images Optional), so preview both section types when deciding which presentation suits the page.

Keep block content balanced and check how the final incomplete row displays when the number of blocks does not divide evenly across the desktop layout.

Blocks stack in their configured order on narrow screens. Use this section instead of several separate sections when the items share one purpose and colour scheme. Use separate sections when each item needs independent spacing or a different background.

Add one block for each item and choose whether that item needs an image. For linked items, complete both Slide Button Text and Slide Link/Button. Keep the destination clear from the visible button text.

Preview the final number of blocks on desktop, tablet and mobile. A final row containing fewer blocks can have a different visual balance from the rows above it.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

Add this block to include a text column with image item in the section.

Recommended image size 660px x 660px

Describes the image when it cannot be seen, including for visitors using screen-reading software.

Crops the image when necessary so it fills the complete image container.

ShopWired recommends setting the title as an H2 tag.

You must add a button link below.

For example, enter /about-us to link to the About Us page. For external links, enter the full URL, including https://.

Add this block to include a text column item in the section.

ShopWired recommends setting the title as an H2 tag.

You can use the Text Boxes With Images section to display repeatable image-and-text boxes. Add a Text Box With Image block for each item.

The design gives each item a stronger visual boundary than the standard column sections. It is suitable for linked services, collections or campaign content.

Use consistent image dimensions and content lengths. If the blocks contain links or buttons, ensure their purpose is clear from the visible text.

Check image cropping and box heights with the actual content. Very long text in one block can make the visual boxes uneven. This section works well for concise promotional summaries and link to a full page for detailed information.

Add a Text Box With Image block for every box. Upload the image, enter its alt text and add the formatted heading and description through Text. Complete both Link Text and Link when the box should lead to another page.

Use blocks with similar amounts of content to keep the boxes visually balanced.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

Add this block to include a text box with image item in the section.

Recommended image size 760px x 760px

Describes the image when it cannot be seen, including for visitors using screen-reading software.

Crops the image when necessary so it fills the complete image container.

ShopWired recommends setting the title as an H2 tag.

You must add a button link below.

For example, enter /about-us to link to the About Us page. For external links, enter the full URL, including https://.

You can use the Blog Posts section to display recent blog-post cards on another page. The cards appear in a slider.

Configure Title Text, Posts To Show and Excerpt length (characters). Use Autoplay the blog posts and Autoplay time (in seconds) to move through the posts automatically.

The section uses the title, image, date and excerpt available for each blog post together with the Blog Cards settings. If a post has no suitable image or excerpt, its card can appear inconsistent with the other posts.

Use this section to introduce recent editorial content on the home page or a related content page. It is not a replacement for the blog home page because it only displays the configured number of posts and does not provide the full archive navigation.

Publish the required posts and complete their titles, images, dates and excerpts before adding this section. The section automatically returns the available posts up to Posts To Show; individual posts are not chosen with blocks.

If fewer posts appear than expected, check their publication status and dates.

Sets the heading displayed in this part of the section.

Choose the maximum number of blog posts to display, from 1 to 12.

Moves through the section items automatically. Disable this when only one item is displayed.

Sets how long each item remains visible before the section advances automatically, from 1 to 15 seconds.

Sets a value from 0 to 250characters. The default is 50characters.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Testimonials section to display customer quotations in a slider. Add a Testimonial block for each quotation.

Configure the section heading, the number of testimonials to show, autoplay, autoplay time, scrolling arrows and progress indicator. Testimonials To Show limits the testimonial blocks displayed in the slider.

Keep each quotation concise and use a consistent format for customer names or supporting information. If only one testimonial is displayed, disable autoplay and slider navigation controls.

Vivify applies a single-item presentation when one testimonial is shown. A very short quotation can still leave a large amount of unused space within the section.

Add one Testimonial block for each quotation. Enter the quotation in Testimonial/Review Content, identify its source using Customer Name, choose the star rating and add an image only when it is appropriate to publish it.

Set Testimonials To Show high enough to include the intended blocks. A block beyond that limit remains configured but is not displayed. Obtain permission to publish customer names, images and quotations where required.

Sets the heading displayed in this part of the section.

Choose the maximum number of testimonial blocks to include, from 1 to 4.

Moves through the section items automatically. Disable this when only one item is displayed.

Sets how long each item remains visible before the section advances automatically, from 1 to 15 seconds.

Displays previous and next arrow controls so visitors can move through items in a slider.

Displays a visual indicator showing the visitor’s position within the slider.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

Add this block to include a testimonial item in the section.

Sets the customer name or attribution displayed with the testimonial.

Sets the customer quotation displayed by this testimonial block.

Sets the number of filled rating stars displayed with this testimonial, from 1 to 5.

Recommended image size 250px x 250px

You can use the FAQs section to display questions and answers in an accordion. Visitors select a question to show or hide its answer.

Add an Answer & Question block for each item. The section can display a title and descriptions above and below the questions.

Enable Multi-Expand to allow more than one answer to remain open. Enable All Closed to allow the visitor to close the final open answer. When All Closed is disabled, one answer remains open.

Write questions using the language visitors are likely to use. Keep each answer focused on one subject and link to a full help page when the answer requires detailed instructions.

Put the most common questions first. Do not use the accordion to hide information visitors must read before purchasing. Check answers containing lists, links and long paragraphs on mobile.

Add one Answer & Question block for each question. Write the complete question in Question and its response in Answer, then order blocks from the most common or important subject to the least common.

Use Multi-Expand and All Closed to choose how visitors can operate the accordion. Test links, lists and formatted content inside every answer.

Sets the heading displayed in this part of the section.

Shows above the FAQs.

Shows below the FAQs.

Allow multiple FAQs to be open at the same time.

Allow all FAQs to be closed at the same time.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

Add this block to include an answer & question item in the section.

Sets the question shown as the clickable accordion heading.

Sets the content revealed when the visitor opens the question.

You can use the Website Page Content section to embed the content of a selected website page inside the current layout. This allows one piece of content to be maintained in the website page editor and displayed through a theme section.

You can use Select Website Page To Embed to select the selected page. The content's text alignment, headings, links and other rich-text styling come from that page's content.

Avoid embedding the current page inside itself. Check that the embedded page does not contain content or links that only make sense when viewed at its original URL.

This section works well when the same managed content must be displayed in more than one place. Changes made to the selected website page then update every section that embeds it. Use a normal Text Section for content that belongs only to the current layout.

Create and save the website page before selecting it in Select Website Page To Embed. Add and format its headings, text, images and links in the website page editor, because this section does not provide separate controls for that content.

Avoid selecting the page you are currently editing. When you change the selected website page later, the updated information is shown everywhere you have added it.

Sets the heading displayed in this part of the section.

Any styling for the content (e.g. text alignment, font size) will need to be customised within the website page editor.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Gallery Of Images section to display images in a slider or gallery layout. Add individual Single Image blocks or an Image Gallery block that uses a gallery configured in the ShopWired account.

Configure the image aspect ratio, image fill and the number of images shown on desktop, tablet and mobile. Gallery display selects the available layout. Autoplay, autoplay time, arrows and progress dots control slider behaviour where supported by the selected layout.

When Fill the image container is enabled, images can be cropped to fit the selected aspect ratio. Keep important subjects away from the image edges.

Read more about creating and managing image galleries.

Use individual image blocks for images maintained only in this page layout. Use an image-gallery block when the same managed gallery or its dedicated gallery page is also required elsewhere. Use Hero Image Slider instead when every image needs prominent promotional text and a button.

The desktop, tablet and mobile item settings determine how many images are visible at the same time, not the total number stored in the section. When the section contains more images than are visible, visitors use the configured slider controls to reach the remaining items.

If every configured image fits in the visible row, autoplay and navigation controls might not provide a meaningful change. Test the section with its actual number of images.

You can use the mobile item count to keep images large enough to understand. A high count can reduce each image to a narrow thumbnail. Check cropped images at every configured aspect ratio.

Use Single Image blocks when the images belong only to this section. Upload one image, add useful alt text and add a link only when selecting the image should open another page.

You can use an Image Gallery block when the images are already maintained as a ShopWired image gallery. Create and populate the gallery in the ShopWired account first, then choose it using Select Gallery. Avoid adding the same image through both block types unless it should deliberately appear twice.

Selects the displayed shape of the image container. Images can be cropped when image fill is enabled.

Crops the image when necessary so it fills the complete image container.

Choose how many images are visible at the same time on the named device size, from 1 to 6. Visitors can move through any remaining images when the slider layout is selected.

Choose how many images are visible at the same time on the named device size, from 1 to 4. Visitors can move through any remaining images when the slider layout is selected.

Choose how many images are visible at the same time on the named device size, from 1 to 4. Visitors can move through any remaining images when the slider layout is selected.

Selects whether images appear in a slider or in fixed rows. Autoplay and slider controls apply only to the slider layout.

Moves through the section items automatically. Disable this when only one item is displayed.

Sets how long each item remains visible before the section advances automatically, from 1 to 15 seconds.

Displays previous and next arrow controls so visitors can move through items in a slider.

Displays a visual indicator showing the visitor’s position within the slider.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

Add this block to include a single image item in the section.

Recommended image size 400px x 400px

Describes the image when it cannot be seen, including for visitors using screen-reading software.

Sets the destination opened when the visitor selects the image. Leave it blank when the image should not act as a link.

Add this block to include an image gallery item in the section.

Selects an image gallery configured in the ShopWired account. All applicable images from that gallery are supplied to this block.

You can use the Embedded Video section to add video content to a page. Add a Video block to display the video directly, or a Video With Image Overlay block to display a preview image before playback.

Configure the video source and any preview-image settings within the block. Use an image that represents the video accurately and provide supporting text elsewhere on the page when the video's purpose is not clear from its preview.

Check playback on desktop and mobile and confirm that the video provider permits embedding.

You can use a direct video block when the video should be immediately visible as a player. Use a video-with-image-overlay block when a designed preview image should introduce the content before playback.

You can use a descriptive preview image and add visible surrounding text when the topic is not clear from the image. Avoid placing essential instructions only in the video; visitors might be unable or unwilling to play it.

The player adapts to the available width. Check that provider controls, captions and full-screen playback remain available on a narrow screen. Videos hosted by third parties can also display their own branding, related content or consent requirements.

For Video With Image Overlay, copy the video's public URL from the video provider and enter it in Video URL. Upload a thumbnail that tells visitors what will play.

For Video, use the provider's share or embed controls to obtain the complete iframe or embedding code and enter it in Video Embedding Code. A normal watch-page URL is not sufficient for this block. Confirm that embedding is permitted in the video's privacy settings.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

Add this block to include a video with image overlay item in the section.

Enter the URL of your video, e.g. https://www.youtube.com/watch?v=ScMzIvxBSi4

Sets the text displayed on the button. Configure the corresponding link when the button should open another page.

Recommended image size 1800px x 625px

Describes the image when it cannot be seen, including for visitors using screen-reading software.

Add this block to include a video item in the section.

Enter the full embedding code for your video (not just the URL).

You can use the Custom Form section to collect information from visitors. Add a Form Field block for each setting the visitor must complete.

Configure the layout, form width, title and button text. Use Recipient Email Address and Email Subject to determine where completed forms are sent and how they are identified.

After submission, the form can redirect the visitor to Redirect Page or display Success Message on the current page. Configure the behaviour required for the page instead of relying on both outcomes.

When both settings contain content, Vivify uses Success Message instead of the redirect. Leave Success Message blank when the visitor must be sent to Redirect Page.

Test every required setting, the validation messages, the recipient email and the completion behaviour before making the form live. Do not use a general website form to collect payment information or other sensitive data.

You can use the stacked layout when labels and settings need the full form width. A wider side-by-side presentation can suit short settings but should be checked with long labels and validation messages. Add only the settings needed for the form's purpose.

Decide what information is required and where submissions should be sent before adding fields. Add one Form Field block for each answer. Use the email field type for email addresses so browsers can validate the format.

For a select list or radio buttons, enter the available choices in Values, separated by commas. Mark only information that is genuinely necessary as required. Submit a completed test form and confirm that it reaches Recipient Email Address with the expected subject and field values. Also test every validation error and the configured success message or redirect.

Select one of the available options: Text & Form Side-by-side, Text Above Form.

Only used when 'stacked' option is selected (it's recommended to centrally align any text when using this setting)

Sets the heading displayed in this part of the section.

Sets the text displayed on the button. Configure the corresponding link when the button should open another page.

the page to redirect to after the form is completed e.g. '/thanks'

can be set instead of a redirect_url in order to keep the user on their current page

The subject line of the email that you will receive when the form is completed.

The email address that should receive the email when the form is completed.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

Add this block to include a form field item in the section.

Select one of the available options: 1 Line Text, Email Address, Multi-line Text, Password, Select List, Radio Button, Checkbox, File Upload.

Sets the text that identifies the form field to the visitor.

use only for select and radio field types, separate values with a comma

Requires the visitor to complete this field before the form can be submitted.

You can use the Newsletter Form section to display a newsletter subscription form within a page.

Configure the title, supporting text, email-setting text and optional background image. The background image should be at least 1800px wide for a large full-width presentation.

Check that the text and email setting remain readable over the background image. The form adds the submitted address to the website's newsletter subscribers.

Use this section within a page when newsletter signup supports the surrounding content. Use the dedicated Newsletter Subscription page when signup needs its own destination. Test success and duplicate-address messages as well as the initial form.

Confirm that newsletter signup is appropriate for the page and that the website's privacy information explains how submitted addresses are used. The section sends the address to ShopWired's newsletter-subscriber data; it does not configure campaigns or messages sent by an external email provider.

Submit a test address and check both the success response and the response for an address that has already subscribed.

Sets the heading displayed in this part of the section.

Sets the supporting text displayed in this part of the section.

Sets the placeholder or prompt displayed in the newsletter email-address field.

Recommended image size: large image at least 1800px width

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Announcement bar section to add one or more short messages within a page layout. This is separate from the announcement settings in Vivify's header.

Add a Message block for each announcement. Multiple messages are presented by the section using its message behaviour. Enable Enable a close option on the announcement bar message to allow visitors to dismiss the announcement.

When more than one message is configured, Vivify changes the active message every three seconds. The section does not provide previous or next controls, so each message must remain understandable without requiring the visitor to read them in sequence.

You can use the header announcement when a message should appear with the website header across pages. This section works well when a message belongs at a particular point in one page's layout.

Keep messages short enough to read without pausing on the page. A close option hides the announcement for the visitor but does not remove it from the theme. Do not use a dismissible message for information that must remain available throughout checkout.

After a visitor closes the announcement, Vivify stores the dismissal for 14 days in that browser. Editing the message does not necessarily make it reappear immediately for a visitor who already dismissed that section.

Add one Message block for each announcement and place the messages in the order they should be shown. Use short, self-contained messages because visitors might not see every message in the sequence.

You can use the close option only when it is acceptable for the message to remain hidden in that browser for 14 days. For a changed urgent message, create a new announcement section rather than assuming a previously dismissed section will reappear.

Adds a close control that allows the visitor to dismiss this announcement section. Vivify remembers the dismissal in that browser for 14 days.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

Add this block to include a message item in the section.

Sets the supporting text displayed in this part of the section.

You can use the Custom Button section to add a standalone call-to-action button. Configure its text, link, alignment and Vivify button style.

The button requires a link. Enter a website path such as /contact-us for a page on the same website, or a complete address beginning with https:// for an external website.

Use button text that describes the result, such as view delivery information rather than a generic phrase such as learn more.

Enter an action-led label in Button Text and its destination in Button Link. Use a path beginning with / for a page on the same ShopWired website, or a complete URL beginning with https:// for an external website. Then choose the alignment and button style.

Test the button after saving. A label without a link creates no useful destination, while an unexplained URL without visible button text gives visitors no clear action.

You must add a button link below.

For example, enter /about-us to link to the About Us page. For external links, enter the full URL, including https://.

Select one of the available options: Left, Centre, Right.

Selects one of Vivify’s configured button designs.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Google Maps section to embed a Google map. Enter a Google Maps embed address in Enter Google Maps URL and configure its displayed height and width.

You can use the embed address supplied by Google Maps rather than the address displayed in the browser while viewing the map. An ordinary map-page address might not render inside the section.

Check the marker, zoom level and surrounding area before making the page live. The map is provided by Google, so it might not appear when a customer has blocked third-party content in their browser.

You can use the map to support a physical address already provided as text. Do not use the map as the only source of an address because visitors using assistive technology or blocking third-party content might not be able to access it.

You can use a width that fits the content area and a height that provides enough context around the marker. An unnecessarily tall map can make visitors scroll through a large interactive area, particularly on mobile.

The iframe loads content from Google when the section is displayed. Check that the website's privacy and consent configuration covers the embedded service where required.

Complete these steps using Google Maps on a computer:

1. Open Google Maps
2. Search for the business, address or location to display
3. Adjust the map so the correct marker and surrounding area are visible
4. Select share and then select embed a map
5. Select a map size and then select copy HTML
6. Paste the copied code into a plain-text editor
7. Find the address between src=" and the next "; it begins with https://www.google.com/maps/embed?
8. Copy only that address into Enter Google Maps URL
9. Save the theme and test the map on the website

Google supplies complete iframe code, but Vivify's setting requires only the URL contained in the iframe's src attribute. Do not use the address from the browser address bar or the URL supplied by Google's send a link option.

Google's instructions for sharing or embedding a map describe where to find the embed option.

Confirm that the marker identifies the intended entrance or location. Test the map on mobile and check that visitors can scroll past it without becoming trapped in the interactive map. Provide the address as normal page text as well, because the map might not load when third-party content is blocked.

Enter only the Google Maps embed URL copied from the src attribute of Google’s iframe code. The URL must begin with https://www.google.com/maps/embed?pb=.

Sets the displayed element's height, from 200 to 1000 pixels. The default is 500 pixels.

Sets the displayed map width, from 400 to 2000 pixels. The map cannot exceed the space available on the visitor’s screen. The default is 1200 pixels.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Custom HTML section to add HTML or Twig that is not available through another section.

Code entered here becomes part of the website page and can affect its appearance or functionality. Use a draft theme and test the page at different screen sizes.

Prepare and test the HTML or Twig in a draft copy of the theme. Paste it into Enter custom HTML below and test every page size on which the section appears.

Third-party widgets can require their own account, consent settings, scripts or styles. Obtain those instructions from the provider and confirm that the code is intended for embedding in a website. ShopWired support cannot infer the intended behaviour of arbitrary third-party code.

You can use Twig code here.

You can use the Separator section to place a horizontal visual divider between sections. Configure the line style, height and colour.

The height controls the space occupied by the separator as well as its visual presentation. Use separators consistently and avoid using them where section backgrounds already provide a clear division.

This section is decorative and does not create a heading or navigational landmark. Avoid using it as the only indication that the subject has changed; add an appropriate heading when the following content begins a new topic.

Choose a solid or dashed line, then set its thickness and colour. Check the separator against the colour schemes used by the sections above and below it.

The separator is only visual. Add a heading to the following content when visitors need to understand that a new subject has begun.

Selects a solid or dashed separator line.

Sets a value from 1 to 10px. The default is 4px.

Sets the separator colour.

Use this setting to remove the empty space above the section.

Use this setting to remove the empty space below the section.

You can use the Extra Margin section to add a controlled amount of empty vertical space. Configure Height/Space to set the amount.

This section works well when the required space cannot be achieved with the neighbouring sections' margin settings. Check the result on mobile because a large desktop gap can occupy most of a smaller screen.

Prefer the neighbouring Remove the top margin and Remove the bottom margin settings for small adjustments. Use Extra Margin when a deliberate larger break is needed or when the adjacent section has no suitable spacing control.

Set Height/Space to the required number of pixels and check the result on desktop and mobile. Reduce the value when it creates an unnecessarily large gap on a narrow screen.

This section adds empty space only. It does not contain content and should not be used to compensate for an incorrectly cropped image or an empty content block.

Sets a value from 1 to 100px. The default is 20px.

The Developer Section provides generic text, textarea, rich-text, image, checkbox and gallery settings that a theme developer can use when creating a bespoke section layout. Its default output depends on the code implemented for the section and its developer blocks.

This section is not intended as a general content section. Use another Vivify section when it already provides the required layout.

The supplied fields are inputs for bespoke Twig code. Adding text, images or blocks does not define where or how they appear unless a developer has implemented code that reads those values.

Record what each generic field is intended to contain before handing the theme to an administrator. If no bespoke implementation exists, remove this section and use a standard Vivify section instead.

Displays guidance for the developer. It does not define the section’s public layout.

Adds a non-editable label that a developer can use to organise the bespoke section settings.

Provides a single-line text value for use by the bespoke section code.

Provides a multi-line plain-text value for use by the bespoke section code.

Provides formatted text for use by the bespoke section code.

Provides formatted text for use by the bespoke section code.

Provides an uploaded image for use by the bespoke section code.

Provides an enabled or disabled value for use by the bespoke section code.

Provides a ShopWired image gallery for use by the bespoke section code.

Adds a non-editable label that a developer can use to organise the bespoke section settings.

Provides a single-line text value for use by the bespoke section code.

Provides a multi-line plain-text value for use by the bespoke section code.

Provides formatted text for use by the bespoke section code.

Provides formatted text for use by the bespoke section code.

Provides an uploaded image for use by the bespoke section code.

Provides an enabled or disabled value for use by the bespoke section code.

Adds a non-editable label that a developer can use to organise the bespoke section settings.

Provides a single-line text value for use by the bespoke section code.

Provides a multi-line plain-text value for use by the bespoke section code.

Provides formatted text for use by the bespoke section code.

Provides formatted text for use by the bespoke section code.

Provides an uploaded image for use by the bespoke section code.

Provides an enabled or disabled value for use by the bespoke section code.

Add this block to include a developer item in the section.

Displays guidance for the developer. It does not define the section’s public layout.

Adds a non-editable label that a developer can use to organise the bespoke section settings.

Provides a single-line text value for use by the bespoke section code.

Provides a multi-line plain-text value for use by the bespoke section code.

Provides formatted text for use by the bespoke section code.

Provides formatted text for use by the bespoke section code.

Provides an uploaded image for use by the bespoke section code.

Provides an enabled or disabled value for use by the bespoke section code.

Test the draft theme before making it live.

1. Check every configured section on desktop and mobile
2. Check sections when they contain no items and when they contain the largest number of items you expect to display
3. Check product pages containing variations, product choices, extras, customisation fields and file uploads
4. Check category, brand and search pages with filters and multiple pages of results
5. Add products to the basket and check uploaded files, voucher codes, reward points, delivery and checkout controls where applicable
6. Submit customer account, trade, contact, newsletter and custom forms using test information
7. Check colour contrast, image cropping, slider controls, video playback and external content
8. Check the header, footer and menus at different screen widths
9. Select save changes