Builder design and settings
17 articles
- What are the builder Settings tabs and how do I use them? An overview of every builder Settings tab: Branding, Colors, Fonts, Layout, Animations, Automations, Inputs, Icons, Prohibitions, Checkout, Checkout form, Maintenance page, Custom CSS, and Custom Javascript, set per market.
- How do I add a favicon, a background image, and my logo to my store? The builder Branding tab: set your favicon (the browser tab icon) and a body background image with Size (Cover, Contain) and Repeat. Where to set your logo in the header and footer, and where colors and fonts are.
- How do color schemes work and how do I change my store colors? Create and edit color schemes in the builder Colors tab: background, text, links, badges, borders, shadow, primary and secondary buttons, and form inputs. Learn how sections pick a scheme, Use parent color scheme, the 9 scheme limit, and why reordering changes colors.
- How do I change the fonts and text weight of my store? Change your store fonts in the builder Fonts tab: Body, Heading, Subheading, and Accent fonts, system fonts versus non-system fonts, the font search, Arabic text, and Text weight (Normal, Medium, Bold).
- How do I change the page width of my store? Set the maximum page width of your store in the builder Layout tab (900 to 1400 px), how it works on phones and large screens, and how full width sections go edge to edge.
- How do I add or turn off scroll animations and image zoom on my store? Use the builder Animations tab: Scroll reveal (None, Fade, Slide up, Slide in, Zoom) to animate sections as shoppers scroll, and Images zoom effect to zoom product images under the mouse. Why animations do not show in the builder.
- How do I make videos play automatically on my store? Turn on Autoplay Videos in the builder Automations tab so videos start when shoppers scroll to them. Covers uploaded videos and YouTube, Vimeo, TikTok, and Dailymotion embeds, why videos are muted, and pause when out of view.
- How do I change the style of form fields on my store? Use the builder Inputs tab to style every form field on your store (checkout, contact, newsletter, review form): label Type (Collapse or Expand), field icons (None, Default, Label), and icon Position (Start or End).
- How do I make the icons on my store bolder? Use the builder Icons tab to set the Stroke of every icon on your store, Default or Heavy: header cart and search icons, menu arrows, form field icons, and section icons.
- How do I stop visitors from copying my text and images or right-clicking on my store? Use the builder Prohibitions tab: prevent copying, selecting text and images, the right-click context menu, inspecting the page with developer tools, and stop the header logo from linking to the home page. What these protections can and cannot do.
- How do I choose between Add to cart and Fast checkout? Use the builder Checkout tab to set the Checkout method (Add to cart with a cart, or Fast checkout straight from the product page) and the Secondary method that adds the other button. What changes on product pages, product cards, the cart, and the cart page.
- How do I add, hide, require, rename, or reorder fields in my checkout form? Edit your checkout form in the builder Checkout form tab: every field (name, phone, email, address, city, state, ZIP, note, shipping, payment, discount code), Disabled, Enabled, or Required, labels, placeholders, Select dropdowns for city and state, delivery areas, and field order.
- How do I put my store in maintenance mode or show a coming soon page? Turn on maintenance mode in the builder Maintenance page tab to hide your store behind a message while you prepare it. Set the heading, message, and color scheme, and learn how it works per market and how to open your store again.
- How do I create navigation menus and add them to my header and footer? Create navigation menus with up to three levels of links (dropdowns and mega menus), link to products, collections, pages, and policies, then connect a menu to your store header or footer in the builder.
- Can I add custom code, scripts, or meta tags to my store (HTML, CSS, JavaScript, head section)? Where you can add your own HTML, CSS, and JavaScript in the builder (Custom code section, Custom CSS, Custom Javascript), why you cannot paste code into the head section, and which app to use instead for Google Search Console verification, Google Tag Manager, and pixels.
- How do I add custom CSS to my whole store or to one section? Add your own CSS in the builder: the Custom CSS settings tab for the whole store, and the Custom CSS tab of a section that only styles that section. How section CSS is scoped, the & selector, media queries, and tips when your CSS does not work.
- How do I add custom JavaScript to my whole store? Add your own JavaScript to every page of your store with the builder Custom Javascript tab. When the code runs, why it does not run again on each page, errors, and why tracking tags and verification codes belong in apps instead.