Editing themes

You can edit a theme by clicking on the Edit icon at the top right corner of a theme card (visible on mouseover) on the Themes main page:

Editing vs. cloning
Keep in mind that any changes made to a theme will be visible on all SmartFrames using that theme. For that reason, cloning a theme and then changing it may sometimes be a preferred option.

Overview

On the Overview page you can see a fully functional preview of the theme, including all possible interactions. You can switch the preview mode to different sizes as well as load different images from your collection by clicking on the icon.

On the Overview page you can also edit the name and description of the theme as well as see the details of the theme’s usage and performance.

Layout

In this section, you can select a layout and mouseover behavior of the interactive elements. Depending on the option selected, some or all elements may remain hidden until the user hovers over the SmartFrame with their mouse (on desktop) or taps on it (on touch devices).

In order to preview your changes, you can click on the Preview button at the bottom of the page. It will open a full preview of the theme, including the changes you’ve just made, even before you save them. Once you’re happy with the results, you can save the changes by clicking on the Save button.

Design

In the Design section, you can manage the styling of the theme’s elements, namely buttons and caption.

Available design settings:

Affects:Available options:
Overlay style
  • Size of buttons and caption
  • Font size inside of buttons and caption
  • Spacing between buttons
  • Dense
  • Semi-dense
  • Regular
  • Spread
Border widthWidth of button borderValue between 0px and 8px
Border radiusRadius of button cornersValue between 0% (straight angles) to 100% (fully rounded corners)
Font familyFont family of all overlay elements
  • Roboto
  • Roboto Slab
  • Source Sans Pro
  • Barlow Semi
  • Condensed
  • Fira Sans Condensed
  • Lato
  • Montserrat
  • Open Sans
  • Quicksand
  • Raleway
Font weightBase font weight of all overlay elements
  • Light
  • Normal
  • Bold
Font colorFont color of all overlay elements
Border colorColor of the button border
Background colorColor of the button, caption and share overlay background
Icon styleButton icons and icons on the share overlay
  • Light
  • Regular
  • Solid

If you wish to create a custom theme and feel that the available settings are not sufficient, please contact us to discuss bespoke solutions.

In order to preview your changes on an actual SmartFrame, you can click on the Preview button at the bottom of the page. It will open a full preview of the theme, including the changes you’ve just made, even before you save them. Once you’re happy with the results, you can save the changes by clicking on the Save button.

Caption

Caption allows you to display any text to accompany your images, such as:

  • Copyright information
  • Image description
  • Product details
  • …and more

The exact design of the caption depends on the selected layout as well as the styling defined in the Design section.

Caption section is designed to handle both short and long texts. If your caption is longer than 1-2 lines of text (depending on the selected layout), it will not be visible directly, but only after clicking on a Caption button. This way caption will never cover too much of the image:

In order to preview how the Caption will look like in an actual SmartFrame, you can click on the Preview button at the bottom of the page. It will open a full preview of the theme, including the changes you’ve just made, even before you save them. Once you’re happy with the results, you can save the changes by clicking on the Save button.

Deep Zoom

Deep Zoom is SmartFrame’s unique approach to zooming images. When enabled, with each tap viewer will load the image in increasingly higher resolution. Thanks to SmartFrame technology, the quality of the zoomed image will be increased with each zoom level, so the viewer will always be able to see image details in the highest available quality.

In the Admin Panel, you can to adjust the zoom level (or switch Deep Zoom off completely). SmartFrame allows up to three levels of zooming: 200%, 300% and 400% of the SmartFrame size. What it means in practice is that if 400% zoom is enabled, with each click user will see the images zoomed:

  • 1st click: 200% zoom
  • 2nd click: 300% zoom
  • 3rd click: 400% zoom
  • 4th click: back to the original size

Note: In order for the Deep Zoom to work, the original image needs to be big enough. In order to preserve the quality of the image, Deep Zoom will never upscale it, so if the original image is only twice as big as the SmartFrame, only one level of Deep Zoom will be available.

Click on the image below to experience how Deep Zoom works on SmartFrames:

Deep Zoom is a desktop-only feature – you can read more about zooming SmartFrame on mobile here.

In order to preview the Deep Zoom functionality with an actual SmartFrame, you can click on the Preview button at the bottom of the page. It will open a full preview of the theme, including the changes you’ve just made, even before you save them. Once you’re happy with the results, you can save the changes by clicking on the Save button.

Full Screen

Enabling Full Screen allows users to view your SmartFrames in a full-screen mode. In the Admin Panel you can select whether you want to add a Full Screen button (recommended) or open the full screen mode upon clicking on the image. Keep in mind that if the latter option is selected, Deep Zoom will be switched off.

You can preview the Full Screen functionality here:

In order to preview how the Full Screen will work with an actual SmartFrame, you can click on the Preview button at the bottom of the page. It will open a full preview of the theme, including the changes you’ve just made, even before you save them. Once you’re happy with the results, you can save the changes by clicking on the Save button.

Call to Action Button

Enabling Call to Action Button gives you an option to add to the theme a button which is linked to a page of your choice, e.g. your homepage, product page, or social media profile.

In the Admin Panel, you can set up the redirect link as well as manage Call to Action Button’s label and icon. The exact design of the Call to Action Button depends on the design of the whole overlay, as defined in the Design section.

In order to preview how the Call to Action Button will look like in an actual SmartFrame, you can click on the Preview button at the bottom of the page. It will open a full preview of the theme, including the changes you’ve just made, even before you save them. Once you’re happy with the results, you can save the changes by clicking on the Save button.

Sharing settings

Enabling SmartFrame sharing adds a Share Button to the theme. After clicking on the button, a user will see the available sharing options and will be able to share the SmartFrame on social media, via email or text message.

In the Admin Panel, you can:

  • Manage the icon and label of the Share Button
  • Select which sharing options to allow
  • Edit a copyright message which will be displayed next to the sharing options

The exact design of the Custom Button depends on the design of the whole theme, as defined in the Design section.

Using SmartFrame sharing option does not compromise your images’ security in any way. When sharing a SmartFrame, it is never your original image that is being shared. What is being share is only a very small .jpg thumbnail of your image along with a link to the SF Image Page or other page defined in the social media, email and direct link settings in Control section of the Admin Panel.

Currently, SmartFrame supports the following sharing options:

  • Social media sharing – exact appearance and behavior of social media posts depends on the Social Media settings in Control.
    • Facebook
    • Twitter
    • LinkedIn
    • Pinterest
  • Direct link – generates a unique sharing link. Depending on the Direct Link settings in Control, the link will open either the page where the image is embedded or a standalone Image Page
  • WhatsApp – this option will only be visible on mobile devices and it enables sharing a link to the URL where the image is embedded via WhatsApp
  • Text message – this option will only be visible on mobile devices and it enables sharing a link to the URL where the image is embedded via text message
  • Embedding – this option is only available on desktop devices. When the viewer selects it, they will receive an embed code which they can add to their own website. You will still be able to see this SmartFrame in Insights and change its theme or block it as well as display campaigns on it.
  • Email – this option is only be visible on desktop devices. You can add a newsletter opt-in checkbox to this option, which means that users who will share your embed via email will also be able to instantly agree to receive your newsletter. Depending on the Email settings in Control, the link shared via email will open either the page where image is embedded or a standalone Image Page.

In order to preview how the Share Button and sharing options will look like on an actual SmartFrame, you can click on the Preview button at the bottom of the page. It will open a full preview of the theme, including the changes you’ve just made, even before you save them. The preview is fully interactive, so you can click on the Share Button to see how the sharing options will be displayed. Once you’re happy with the results, you can save the changes by clicking on the Save button.

Watermark

You can add one of two types of a watermark to your themes:

  • Text watermark in a format of a custom text message
  • Image watermark in a format of a custom image

Watermark will be visible on all embeds using the theme. Since watermark is part of the SmartFrame, it is not possible for the third parties to remove it in any way and your images are well protected from illicit uses.

Responsive watermark
Keep in mind that the size of the watermark is usually not responsive and will remain the same for very small and very big images. If you’re planning to use the same theme for small and big pictures, we recommend you use an image watermark and select one of the scaling or repeat options, which will ensure that the watermark is responsive.

The preview which you can see on the watermark page allows you to only see the watermark. In order to preview how it looks like on an actual SmartFrame, you can click on the Preview button at the bottom of the page. It will open a full preview of the theme, including the changes you’ve just made, even before you save them. Once you’re happy with the results, you can save the changes by clicking on the Save button.

Text Watermark

Text Watermark consists of a string of text which will be displayed in your SmartFrame.

You can adjust how it looks like using the following options:

  • Font family
  • Font size
  • Font color
  • Stroke color – we recommend using a stroke color opposite to the font color to ensure that the watermark will be well visible both on dark and light backgrounds
  • Bold
  • Italic
  • Opacity level
  • Position of the watermark inside of the embed

Image Watermark

You can upload an image file to be used as a watermark. It is possible to upload either .jpg or .png file, not bigger than 1MB.

You can further adjust how the watermark looks like using the following options:

  • Opacity level
  • Scaling
  • Original size of the uploaded image – no responsiveness
  • Fit the image – watermark will keep the original proportions but it will be enlarged to fit the image size
  • Fill the image – watermark will be stretched to cover the whole image, original proportions of the watermark will not be preserved
  • Position of the watermark in the embed
  • Repetition
  • Don’t repeat
  • Repeat x – watermark will be repeated on the horizontal axis
  • Repeat y – watermark will be repeated on the vertical axis
  • Repeat both – watermark will be repeated both on horizontal and vertical axis, covering the whole embed

Right-Click and Screenshot Deterrent

While copying or saving an image from SmartFrame is never possible, you can add a message which will further inform viewers about the image copyright if they try to right-click on it or attempt to take a screenshot using a keyboard shortcut. Under Advanced Settings → Right-Click and Screenshot Deterrent Message you can edit a message which will be displayed in these cases.

In order to preview how the Right-Click and Screenshot Deterrent will work in an actual SmartFrame, you can click on the Preview button at the bottom of the page. It will open a full preview of the theme, including the changes you’ve just made, even before you save them. Once you’re happy with the results, you can save the changes by clicking on the Save button.

Out of Focus

Out of Focus is a feature which ensures the highest level of protection against screenshots, including screenshot taken with an external software. With this function enabled, SmartFrame will display a semi-transparent overlay on top of the image whenever it is out of focus, e.g. when a viewer tries to launch another application such as a screen capture software. Since when SmartFrame is in focus, your image is fully viewable and interactive, turning this feature on does not harm your viewers’ experience or distort the image in any way.

In order to preview how Out of Focus will work with an actual SmartFrame, you can click on the Preview button at the bottom of the page. It will open a full preview of the theme, including the changes you’ve just made, even before you save them. Once you’re happy with the results, you can save the changes by clicking on the Save button.

< Previous article: Creating a new theme
Next article: Default theme >

Get in touch

Any questions, need help or just want to say hi? Start a conversation with us at SmartFrame via the form below.

Thanks for completing this support request!
There has been a problem with the form submission, please try again later.