How do I add custom textures to my color schemes?

In our newest Gem theme, you can add your own custom textures into the theme's color schemes! This level of customization really allows you to be creative with your sections.

To access the color schemes, visit the Theme Settings in the editor sidebar and click into Colors. From there you'll want to scroll down until you see Color Scheme 1. We provide options for three Color Schemes.

As you can see, Gem comes packaged with some great default custom textures that are completely new!

For custom textures, head over to the theme code by selecting the 'Edit Code' option in the Shopify Customizer.

Locate the custom-texture SVG files in the theme's assets folder.

If you have a local environment that you work from when making theme customizations, you will want to copy your SVG code into one of the three custom texture SVG files found in the theme's assets folder. Once you have updated the files you can deploy your changes and you're ready to use the Custom 1, Custom 2, and Custom 3 color scheme options.

If you are using Shopify's code editor for customizations, you'll have to first delete the custom-texture-1, custom-texture-2, custom-texture-3 SVG files and upload your own assets using the same naming. For example, maybe you have a pattern you want to use in the theme that is currently named tiles.svg on your computer. You will want to delete the custom-texture-1.svg file from the assets list using the trash can icon. Then you will want to upload a new asset file and make sure it is named custom-texture-1.svg instead of tiles.svg. The editor will allow you to rename your file after you've uploaded it.

Lo and behold, you have a new custom texture added to the theme and it looks fabulous!

A note on styling custom textures:

Currently, the custom texture SVGs are not set up to have any opacity styles applied to them from the theme. If you would like to apply additional styles to your custom textures for better readability, you can always target them using these classes: .scheme-custom-texture-1, .scheme-custom-texture-2, .scheme-custom-texture-3. You can use these classes to modify existing styles as well. In some cases, you may want to change the default background-size property for these textures from cover to auto.