General settings
Each Design Pack allows for a variety of customization options. We've streamlined some settings to be standard across all packs. The options below apply to all or most packs.

​
πŸ“Έ
Image and mobile image

Many of the packs, specifically the banner packs have the option to add different images for desktop and mobile. This allows you to optimize the image for mobile, since mobile often works more nicely with portrait size image versus landscape on Desktop.
Some packs allows you to set the size and/or aspect ratio depending on what's appropriate for the design. You'll also be able to set the image focal point to ensure the important part of the image is properly displayed.
  • Aspect Ratio are available in landscape (4:3), portrait (2:3), square(1:1), or original.
  • Sizes available are extra small, small, medium, large, extra large, or original.
  • Focal point are available top right, top left, top, right, left, center, bottom left, bottom right, bottom.
​

​
✏
Text appearance

All of the packs provide some level of customization for text. The most common are:
  • Text size base is 100%, you can adjust the size by increasing or decreasing the percentage and will modify both the Header and Text pixel sizes relatively.
  • Text alignment refers to how the text is arranged. The options are left, right, center, and justify
    ​
    ​
  • Text position refers to how the text is placed relative to the page. The options are top right, top left, top, right, left, center, bottom left, bottom right, bottom.

​
🎨
Design

Good to know: Find fun colors and gradients here​
  • Text color
    • The text colors can be set as a hex value or you can use the color picker to adjust to the color you want.
  • Background colors
    • The background colors can be set to a straight hex value color or a gradient. There is a gradient picker available to choose a pre-designed gradient or you can adjust the gradient yourself.
    • ​
      ​
    • If you know the hex value you would like, select the dropdown and chose CSS. You'll then be able to add your hex value in the CSS Code box.
    • ​
      ​
  • Image overlay
    • On packs where there is text over an image, we provide the option to create an image overlay. We've updated all our packs to use the new gradient picker provided by Shopify. With this, you can also adjust the opacity of the background to optimize readability of the text, while also still seeing the image. If the opacity is at 100%, the image will not show at all.
    • ​
      ​
  • Animation
    • Many packs have animation options built in. Options include fade-in, fade-in up, fade-in down, fade-in right, fade-in left, or none

​
πŸ–Ό
Layout

  • Size can be set as a percentage of the total width of the page.
  • Maximum width will set a maximum of the size the pack can be. This works well with the size in that you can set the width to be 90%, but will be contained to the maximum width. This is very helpful when setting sizes for multiple screen size. On smaller screens the pack will be 90% but as the screen sizes go up, the pack will be contained by the maximum width.
  • Margin refers to the space outside of the pack, creating space between the pack and other sections on the page. This option only sets the margin for top and bottom. In some cases this option is set separately for top and bottom.
  • Padding refers to the space inside of the pack, creating space within the pack. Like margin this only affects the top and bottom.

​
🚨
Advanced

  • CSS
    • For advanced users, we've created a place to add your own CSS. This gives granular control over each pack. If you're not familiar with CSS and want some small tweaks, we may be able to provide a code snippet to help you achieve your goals - reach out to us at [email protected].
  • Mobile CSS
    • These styles will only be applied to screen sizes of 480px and smaller.

​
πŸ–Š
Fonts

  • Override default theme font
    • Design packs will use the fonts set in your theme, unless this option is checked. Checking this option allows you to set the font from the fonts available in the Shopify font picker.
    • Heading and text fonts can each be set separately