Speedy Theme Settings
Furthermore, this area serves as a control center for handling various theme-specific functionalities such as pop-ups, social media, animation, badges, and cart.
Within this guide, you'll be equipped with a general understanding of each setting category, aiding in the customization of your theme to match your brand's theme.
1. Logo
In the Logo section, you can upload your business's logo to your online store and customize it through the size, position, and styling to ensure it complements your overall store design. Your logo shows in areas:
Header across all pages
Password page
Logo images can reach up to 300 px of width.
How to customize your logo
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Logo.
In the Logo area, click Select image, and you have 03 options:
To use an image that you have already uploaded to your Shopify admin, click an image to select it and then click Select.
To use an image from your local computer, click Upload. Choose an image from your computer and click Open to start the upload. It will be automatically selected when the upload is finished. Click Select.
To select a free image, click Explore free images and search for or click an image to select.
Add alt text to your logo image:
1. Click Edit alt text.
2. In the Edit image window, enter a brief description of the image.
3. Click Save.
How to customize your logo width
Click Theme settings.
Click Logo.
In the Desktop logo width area, toggle the slider to the pixel width you want.
Favicon
You can add a favorite icon, or a favicon, which can help to brand your online store. Utilize the Favicon settings to upload your favicon, ideally selecting a square image. The theme will adjust it automatically to the recommended size of 48x48 pixels for optimal display. A favicon shows in the areas:
your web browser tab
your web browser's history
icons on your desktop
beside your online store name when it's bookmarked
How to customize your favicon
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Logo.
In the Favicon image area, click Select image, and you have 03 options:
To use an image that you have already uploaded to your Shopify admin, click an image to select it and then click Select.
To use an image from your local computer, click Upload. Choose an image from your computer and click Open to start the upload. It will be automatically selected when the upload is finished. Click Select.
To select a free image, click Explore free images and search for or click an image to select.
Add alt text to your favicon image:
Click Edit alt text.
In the Edit image window, enter a brief description of the image.
Click Save.
2. Colors
You can create up to 21 unique color schemes and apply them to different sections throughout your online store. Customize headers, footer, text, pop-ups, badges, cart drawer, buttons, color schemes, backgrounds, and more.
Whether opting for preferred colors, default settings, or specific hexadecimal codes, this ensures finding colors matching your brand is effortless!
In Speedy, you can choose 01 out of 08 color schemes that make changes to some elements such as General, Theme primary, Input, Button primary/ secondary, and Input button shadow.
How to customize your color settings
From your Shopify admin, go to Online Store > Themes.
Click Customize next to the theme that you want to customize.
Click Theme settings, and then click Colors.
In the Schemes section, click an existing scheme or click Add scheme to add a new color scheme.
Click the color swatch for the content type color that you want to change.
To set your color, enter a hex color code or choose the color from the color picker. To set the color to transparent, delete the hex code from the text field.
Click Save.
3. Typography
You can set the font style and size for the text on your online store.
Each section offers specific settings for editing elements as needed, including font style, size, capitalization, borders, and letter spacing for Headings and Body.
If the desired fonts are not included in the theme's library, custom fonts can be added.
How to customize your typography settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Typography.
For each type of text, click Change to use the font picker.
Explore available fonts with the search field or by clicking Load more.
Click the name of the font you want to use, and then click Select.
Click Save.
4. Layout
Layout allows you to set the maximum width that your online store will display in, and set the vertical and horizontal space between sections.
How to customize your layout settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings > Layout.
Use a range slider to choose between a Page width of 1000px or 1600px. The default setting is 1600px.
Optional: Add space between template sections with the range slider. You can add a maximum of 100px between sections.
Optional: If you have a Grid layout, then use the Horizontal space and Vertical space range slider to add space between grid content. Adding horizontal space will add a maximum of 100px of space to your rows, whereas adding vertical space will add a maximum of 1000px of space to your columns.
Click Save.
5. Animations
Within Animations, visual effects and movement can be applied to elements within your online store. You can select Reveal sections on scroll to activate a fade-in animation, and a hover effect for your cards and buttons.
How to customize your animation settings
From your Shopify admin, go to Online Store > Themes.
Click Customize next to the theme that you want to customize.
Click Theme settings, and then click Animations.
Optional: To activate an animation that reveals your online store's sections on scroll, select Reveal sections on scroll.
Optional: To add a hover effect animation to your cards and buttons, choose one of the following options from the Hover effect setting:
Vertical lift: When a customer hovers over a card or button, the element shifts upwards.
3D lift: When a customer hovers over a card or button, the element shifts forward, giving it a 3D effect. This also has a subtle shine that moves across the element, giving it another layer of dimension.
Click Save.
6. Buttons
You can customize the settings for call to action buttons on your online store by adding shadow and adjusting the border of your buttons.
How to customize your button settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Buttons.
Use the sliding scales to change the appearance of your button Border.
Use the sliding scales to change the button Shadow.
Click Save.
7. Variant pills
How to customize your variant pills
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Variant pills.
Use the sliding scales to change the appearance of your variant pill Border.
Use the sliding scales to change the variant pill Shadow.
Click Save.
8. Inputs
The Inputs section enables customers to key in input fields such as an email signup form, cart notes, and quantity. You can adjust the appearance, size, and styling of input elements in theme settings.
How to customize your inputs settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Inputs.
Use the sliding scales to change the appearance of your input Border.
Use the sliding scales to change the input Shadow.
Click Save.
9. Product, collection, and blog cards
Cards settings allow you to adjust styling, image padding, and color scheme to enhance visual appeal and showcase your products, collections, and blog cards effectively.
How to customize your cards settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Product Cards, Collection Cards, or Blog Cards.
Use the drop-down menu to choose a card Style.
Add Image padding with the sliding scale. This adds space around your card images.
Use the drop-down menu to set the Text alignment for your cards.
Use the drop-down menu to select a Color scheme for your cards.
Use the sliding scales to change the appearance of your card Border.
Use the sliding scales to change the card Shadow.
Click Save.
10. Content containers
Content containers are the text portion of content sections, for example, the text box on a slideshow, an image banner, or the columns in multicolumn sections. You can customize the appearance of content containers for your online store.
How to customize content containers settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Content containers.
Use the sliding scales to change the appearance of your content container Border.
Use the sliding scales to change the content container Shadow.
Click Save.
11. Media
Media is the visual component of sections, for example, product media (Product media can include images, 3D models, and videos) or the image in Image with Text sections. You can add borders and shadows to your media.
How to customize your media settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Media.
Use the sliding scales to change the appearance of your media Border.
Use the sliding scales to change the media Shadow.
Click Save.
12. Dropdowns and pop-ups
The Dropdowns and Pop-ups section affects areas like navigation dropdowns, pop-up modals, and cart pop-ups.
How to customize your dropdowns and pop-ups settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Dropdowns and pop-ups.
Use the sliding scales to change the appearance of your Border.
Use the sliding scales to change the Shadow.
Click Save.
13. Drawers
Drawers are hidden, interactive containers that appear and disappear when tapped or clicked, for example, a collapsible navigation menu or filter options.
How to customize your drawers settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Drawers.
Use the sliding scales to change the appearance of your Border.
Use the sliding scales to change the Shadow.
Click Save.
14. Badges
SALE and SOLD OUT badges are automatically added to your product images when the price drops, or when the inventory count reaches 0. You can adjust the position, shape, and color of your badges.
How to customize your badges settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Badges.
Use the drop-down menu to select the badge Position within product cards.
Add rounded corners with the Corner radius sliding scale.
Choose a Color scheme for your badges. You can set an alternate color scheme for sold out items.
Click Save.
15. Brand information
You can include information about your brand. You can add a brand description to your store's footer.
How to customize your brand information settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Brand information.
Enter a headline.
Enter a description.
Click Select image, and you have 03 options:
To use an image that you have already uploaded to your Shopify admin, click an image to select it and then click Select.
To use an image from your local computer, click Upload. Choose an image from your computer and click Open to start the upload. It will be automatically selected when the upload is finished. Click Select.
To select a free image, click Explore free images and search for or click an image to select it.
In the Image width area, toggle the slider to the pixel width you want.
Click Save.
16. Social media
In the Social media settings, you can link your theme to your social media profiles. This enables the display of social media icons in your Announcement bar and/or Footer sections.
How to customize your social media settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Social media
To add links to your social media accounts, enter the links to your accounts in the fields provided under Social accounts. Enter full links, such as https://facebook.com/shopify, or https://instagram.com/shopify.
Click Save.
17. Search behavior
The Search settings enable the activation of your store's predictive search feature, which shows suggestions when customers start typing into the search field. Search suggestions can help customers express their needs easily. Additionally, customers can see the vendor and price directly within the search results, without having to leave their current page.
You can customize the following settings for search:
Enable search suggestions.
Show product vendor - Visible when search suggestions enabled.
Show product price - Visible when search suggestions enabled.
How to change search behavior settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Search behavior
Use the settings to modify the search behavior for the store.
Click Save.
18. Currency format
You can choose to have cart and checkout prices always show currency codes. Example: $1.00 USD.
How to enable currency format settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings.
Click Currency format.
To display currency codes, click the Show currency codes checkbox.
Click Save.
19. Cart
You can change the style of the cart on your online store. When a customer adds a product from your store to their cart, the cart can be displayed as a drawer, a page, or a pop-up notification.
To keep the customer on the product page, use the drawer or pop-up notification option.
To take the customer to the cart page, use the page option.
When the customer's cart is empty, display a featured collection on the cart drawer.
How to customize cart settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings > Cart.
Use the drop-down menu to select a cart style: drawer, page, or pop-up notification.
Optional: To display the vendor of the items in a customer's cart, click Show vendor.
Optional: To provide customers with an area to make special requests or add extra order information, select the Enable cart note option.
If you have the cart type set to Drawer, then you can display a collection in the cart drawer. The selected collection is only visible when the cart drawer is empty.
To add a collection to the empty cart drawer:
Click Select collection.
You can remove the collection from the cart drawer or click Create collection to create a new collection. This button takes you out of theme settings and to the Collections page of your Shopify admin.
20. Newsletter popup
A Newsletter popup allows you to display a popup window on your website to prompt visitors to subscribe to your newsletter. This popup typically appears when a visitor lands on the website and can contain a form where visitors can enter their email addresses to subscribe.
How to customize your newsletter popup settings
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings > Newsletter popup.
Choose Enable newsletter popup
Use the drop-down menu to select a Color scheme for your newsletter popup.
Input your button text and customize it.
Click Select image, and you have 03 options:
To use an image that you have already uploaded to your Shopify admin, click an image to select it and then click Select.
To select a free image, click Explore free images and search for or click an image to select it.
To use an image from your website, you can paste a link to it or search directly from the field named Image link.
Type your newsletter title and description in the provided fields and freely customize.
You can choose to enable or disable social media by choosing the options.
Click Save.
21. Checkout
This section lets you customize your store's checkout. Utilizing imagery and brand colors assures customers they're on the correct platform and encourages them to finalize their purchases.
Although Shopify manages most of the checkout process, your theme's Checkout settings offer various customization options. These include adding background images to your banner, order summary, and main content area, integrating a logo, and adjusting typography and colors.
Upload a background image for the banner
At the top of each checkout page, a banner displays your store name. You can change the background image of that banner. Choose an image that matches your brand. Banner images look best with a resolution of 1000 x 400 pixels.
Steps:
From your Shopify admin, go to Settings > Checkout.
Find the theme that you want to edit, and then click Customize.
Click Theme settings > Checkout.
In the Banner section, click Select image.
Select images that you have already uploaded to your library or Explore free images.
Click Save.
Add a logo to the checkout page
You can add your store logo to the checkout pages. If you're using a banner image, then the logo appears on top of it. You can position your logo on the left, right, or center of the banner area on the checkout pages, and modify the logo size as small, medium, or large.
Steps:
From your Shopify admin, go to Settings > Checkout.
Find the theme that you want to edit, and then click Customize.
Click Theme settings > Checkout.
In the Logo section, click Select image.
Select images that you have already uploaded to your library or Explore free images.
Select a position for the logo.
Select a size for the logo.
Click Save.
Add a background image or color to the main content area
Checkout page is the area where your customers enter their shipping and payment information, so make sure that you can still clearly read the fields in the background. You can't add both a background image and color.
Steps:
From your Shopify admin, go to Settings > Checkout.
Find the theme that you want to edit, and then click Customize.
Click Theme settings > Checkout.
In the Main content area section, add a background color or image.
If you're adding an image, then click Select image > Add images to upload an image file, or select an image that you have already uploaded to your library. Smaller images repeat vertically and horizontally on the background, like tiles.
If you're adding a color, then click the box beside Background color to open a color picker, then choose a color or enter a hexadecimal code.
Click Save.
Change the color of the form fields
You can change the color of the fields to make them either white or transparent. Make sure that you can clearly read the text in the fields.
Steps:
From your Shopify admin, go to Settings > Checkout.
Find the theme that you want to edit, and then click Customize.
Click Theme settings > Checkout.
In the Main content area, click the Form fields options to select the color you want. .
Click Save.
Add a background image or color to the order summary
When a customer clicks Show order summary on a checkout page, a list of the products they're buying appears. You can add a background image or color to the order summary.
Steps:
From your Shopify admin, go to Settings > Checkout.
Find the theme that you want to edit, and then click Customize.
Click Theme settings > Checkout.
In the Order summary section, add a background image or color.
If you're adding an image, then click Select image > Add images to upload an image file, or select an image that you have already uploaded to your library. Smaller images repeat vertically and horizontally on the background, like tiles.
If you're adding a color, then click the box beside Background color to open a color picker, then choose a color or enter a hexadecimal code.
Click Save.
Typography
You can change the font of headings and body on your checkout pages.
Steps:
From your Shopify admin, go to Settings > Checkout.
Find the theme that you want to edit, and then click Customize.
Click Theme settings > Checkout.
In the Typography section, click the Headings drop-down or the Body drop-down, and then select a font.
Click Save.
Change colors of elements on the checkout page
You can change the color of accents, buttons, and error messages on the checkout pages. If you change the colors, then make sure that you can clearly read the text against the backgrounds of the main content area and the order summary.
Steps:
From your Shopify admin, go to Settings > Checkout.
Find the theme that you want to edit, and then click Customize.
Click Theme settings > Checkout.
In the Colors section, click the color box beside Accents, Buttons, or Errors to open a color picker, then choose a color or enter a hexadecimal code.
Click Save.
Checkout layout
You can choose one-page checkout or three-page checkout. One-page checkout ensures faster, shorter checkout on a single page, while three-page checkout presents stepped checkout across multiple pages.
Steps:
From your Shopify admin, go to Settings > Checkout.
Find the theme that you want to edit, and then click Customize.
Click Theme settings > Checkout.
In the Checkout layout section, click One-page drop-down to select.
Click Save.
22. Custom CSS
You can add your custom CSS code to customize the appearance and layout of your entire online store beyond the options provided by Speedys built-in settings.
Steps:
From your Shopify admin, go to Settings > Checkout.
Find the theme that you want to edit, and then click Customize.
Click Theme settings > Custom CSS.
Enter your desired CSS code to apply custom styling to your store.
Click Save.
23. Change theme styles
A theme style is a collection of settings chosen by a theme designer. All themes have a theme style applied by default. When you customize a theme, you replace the theme style settings with your own.
Changing your theme's style will affect both the settings and look and feel of your store. Some settings will be lost when you change your style, but you will not lose any content from your store.
Steps:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings > Theme style.
Using the drop-down menus, select your theme style options. The available options available depend on which theme you use.
Click Save.
Related Articles
Speedy Theme - Wishlist & Compare
You can notice the Wishlist section displayed on the header as the heart icon ?, and the Compare section displayed as an icon of two opposite arrows ? on the right side of the screen. When accessing Collection, Wishlist - Compare are displayed in ...Speedy Theme - Collections Config
I. Collections List Page Collections list page: Display all collections in the store in a list. How to create a Collection list page: Access the Collections List section. Customize the title in Heading. Choose how to display collections in Sort ...Speedy Theme Sections / Home Page
Themes use Sections to create your ideal layout, accessible from the left-side menu in the Theme Editor. Most sections are made up of blocks that serve a specific function, such as header, footer, single images, a collage of images, or links. Using ...Speedy Theme - Lookbook Config
To create Lookbook Page, you need to do as follows: 1. Go to Online Store in Shopify 2. Access Pages 3. Click Add Page and enter a title 4. In Theme template, select Lookbook template To configure Lookbook Page: Access Themes → Customize → Page → ...Speedy Theme - Store Locator Config
To display the store locations on the map To create a Locator Page, you need to do as follows: 1. Go to Online Store in Shopify 2. Access Pages 3. Click Add Page and enter a title 4. In Theme template, select store-locator template To configure ...