Creating and editing theme files and images
ShopWired themes comprise a number of different types of files:
- Twig files (known as
templates) that control the HTML structure and content of website pages - Javascript files that control certain elements of functionality
- CSS files that control how website pages look
- JSON files that control the settings available within the theme editor
You can access all of the files that comprise your theme through your ShopWired account. By editing these files, you can make changes to the theme's underlying code to customise your website's design, layout, and functionality.
To edit the files for your theme:
- Navigate to Website > Themes
- When editing your live theme, select
code editorWhen editing an unpublished theme, selectactions > code editor - Use the left sidebar to locate and open the file you want to edit
- Refer to the theme structure help guide
Important information
Important information
Before making significant changes to your theme, ShopWired strongly recommends:
- and working on the copy instead (which can remain unpublished until you are ready for the new theme to go live)
- Using Theme Engine to make theme changes on your device and sync them automatically to your ShopWired account
- Reading the help guides in this section
Creating new files in your theme
Creating new files in your theme
To create a new file in your theme, select the create new file option in the code editor within the directory you want to create the file in.
Refer to the theme structure help guide for assistance on which directory to create the file within.
When creating a new file, you must specify the . Only the following types of files are permitted:
- Twig
.twig - Javascript
.js - CSS
.css - SCSS
.scss - JSON
.json
Code editor shortcuts
Code editor shortcuts
Whilst using the code editor, you can use the keyboard shortcuts listed below to enhance your productivity.
CTRL/CMD + Fto find a string of textCTRL/CMD + Gto move to the next stringCTRL/CMD + SHIFT + Gto move to the previous stringALT + Gto jump to a new lineCTRL/CMD + /to comment highlighted code (and the same to uncomment the code)CTRL/CMD + Sto save the fileF8will toggle the display of space/tab highlightingF11will toggle the display of full-screen mode (you can press escape to exit)
Uploading images to your theme
Uploading images to your theme
You can upload image files to your theme by selecting the upload image option within the assets/images directory. Only the following types of files are permitted:
- JPG
.jpgor.jpeg - PNG
.png - GIF
.gif - WebP
.webp
When using WebP images on your website, ShopWired strongly recommends providing a fallback image for browsers that do not support WebP or using the picture tag in HTML.
ShopWired strongly recommends not referencing image files using , instead use the asset_url function to render the image file on your theme.
For example, when uploading an image to the assets/images directory with a filename of image.png, the image can be referenced with:
{{ asset_url('assets/images/image.png') }}The asset_url function is not supported in CSS/SCSS files; you should therefore use a format such as background: url(../images/image.png).
