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.
Last updated
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.
Last updated
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.
Update* We are removing the Focal Point setting since Shopify has released a new option to set a focal point on uploaded images.
From the theme editor, click on a section or block that has an image.
Click Edit on the image.
Click Add focal point.
Click and drag the blue circle, or click the most important part of the image to set your focal point.
Click Done.
Note
You can move a focal point by opening the image again, and clicking a different area of the image to set a new focal point.
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.
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
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.
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 info@design-packs.com.
Mobile CSS
These styles will only be applied to screen sizes of 480px and smaller.
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
