Shopify storefront customization

This article covers:

• Global branding & typography
• Media assets, logos & icons
• Sections, backgrounds & layout
• Header, footer, signup & social links
• Product pages & mobile content
• Buttons, CTAs & interactions
• Theme updates & testing

Your homepage heading color is controlled either by your theme’s built-in settings or by custom CSS, depending on how the section was built.

To change the font color of the home page's heading:

Change the heading color in your theme editor

1. In your Shopify account, go to Online Store, then open Themes.
2. Click Customize on your live theme.
3. In the preview, select the section that contains the heading.
4. In the sidebar, open Colors, Typography, or Heading.
5. Update the Heading color, then click Save.

Change the heading color with custom CSS

Use this if your theme does not provide a color setting for the homepage heading.

1. In your Shopify account, go to Online Store, then open Themes.
2. Click Edit code.

3. Add the following rule at the bottom of your stylesheet and replace #111111 with your preferred color:

4. Add homepage-heading to the heading’s CSS class in your section settings (if available).

5. Click Save, then refresh the page.

Theme typography settings don’t always apply to predictive search suggestions.

To change the font used in search suggestions, you need to apply custom CSS.

1. In your Shopify account, go to Online Store, then open Themes.
2. Click Edit code.
3. Open Assets, then select base.css.

4. Add the font (replace the URL and font name), then click Save:

5. On your storefront, open the search bar, type a few letters, then right-click a suggestion and click Inspect.

6. Copy the class used for the suggestion title (often .predictive-search__item-heading) and apply the font:

If your theme uses a different class name, replace .predictive-search__item-heading with the selector you see in Inspect.

Custom fonts let your storefront typography match your brand.

To use one in Shopify, you'll upload the font file, register it in your theme CSS, and then apply it to the text you want.

To add a custom font to your Shopify store:

1. In your Shopify account, go to Content, then open Files.
2. Upload your font file (.woff2, .woff, or .ttf) and copy the file URL.
3. Go to Online Store, then open Themes.
4. Click Edit code.
5. Open Assets, then select base.css (or your main CSS file).

6. At the top of the file, add the following block, replace the URL with the one you copied in step 2, and click Save:

If your file is a .woff or .ttf, change the format to format("woff") or format("truetype").

Choose where the font should apply:

1. In your Shopify account, go to Online Store, then open Themes.
2. Click Customize.
3. Open Theme settings, then select Custom CSS.

4. To apply the font to all text, add:

5. To apply the font only to headings, use:

Star ratings can have your theme’s colors, but many themes and review apps create stars with their own styling.

You can usually change the color either in the theme editor or by adding a CSS rule that targets the star icon directly.

Change the star color in the theme editor

If your theme is an Online Store 2.0 theme and the stars follow the product grid color scheme:

1. In your Shopify account, go to Online Store, then open Themes.
2. Click Customize.
3. Open Collections, then select Default collection.
4. Select the Product grid section.
5. In Color scheme, click Edit and update the Text color.

This may also change other text (like product titles), depending on your theme.

Change only the star color with CSS

Use this method if your theme doesn’t allow you to change the star color:

1. On your collection page, right-click a star and click Inspect.
2. Copy the class used for the stars (for example, .rating-star or .rating__star).
3. In your Shopify account, go to Online Store, then open Themes.
4. Click Edit code.
5. Open Assets, then select base.css (or theme.css).
6. Add a CSS rule at the bottom of the file and replace the selector and color with your own:

7. If the stars are SVG icons, use fill instead of color:

Replace #FFC107 with your desired color.

Modify the stars from the review apps

If the stars belong to a reviews app:

• Check the app settings first; many review apps include a built-in star color option.
• If there’s no setting, override the app’s star class with CSS using the same approach as above (Inspect → target the app class → set color or fill).

FAQ

How can I change the color for different parts of my text in one rich text block?

Shopify’s rich text sections use a single text color from your theme, so you cannot set multiple colors directly there.

To color specific words or phrases, use a Custom liquid or Custom HTML block and wrap the text in <span> tags with inline styles or a CSS class, then define the color in your CSS.

How can I adjust the color of specific text on my website?

To change the color of specific text, identify the element and apply custom CSS.

1. On your storefront, right-click the text and click Inspect.
2. Copy the selector for the element (for example, a class or ID).
3. In your Shopify account, go to Online Store, then open Themes.
4. Click Edit code.
5. Open Assets, then select base.css or theme.css.
6. Add a CSS rule for the selector and set the color, for example:

This changes the color of the selected text without affecting other parts of the theme.

A transparent PNG can still look like it has a white box on the password page. In most cases, the PNG is fine; the white area comes from the password section background.

To check why your password logo is not transparent:

1. Confirm that the PNG is actually transparent

Open the file in an editor/viewer that shows a checkerboard background. If you see solid white around the logo, export it again with transparency and re-upload it to Content → Files.

2. Update the background on the password page

1. In your Shopify account, go to Online Store, then open Themes.
2. Click Customize.
3. Open the Password template.
4. Select the section that contains the logo (often Main password).
5. Update the Color scheme or Background, then click Save.

3. Remove the white background with CSS

Use this if the theme editor doesn't remove the white area.

1. Open the password page, right-click the logo, and click Inspect.
2. Copy the class that wraps the logo (for example, .password__logo).
3. Go to Online Store → Themes → Customize, open Theme settings → Custom CSS, and paste this, replacing .password__logo with your class:

FAQ

How can I remove the background from my logo file?

Open the logo in a graphics tool, delete the solid background, and export it as a PNG with transparency. Then upload the new file in Content → Files and update the logo in your theme.

Favicons often update on desktop first because mobile browsers (especially iOS Safari) cache site icons more aggressively.

In most cases, your favicon is updated in Shopify, but your phone is still showing a cached version.

To fix it, update the favicon in your published theme:

1. In your Shopify account, go to Online Store, then open Themes.
2. Click Customize.
3. Open Theme settings, then select Favicon (or Logo & Favicon).
4. Upload the new icon and click Save.

If you uploaded a new image with the same filename, rename it (for example, favicon-v2.png) before uploading so browsers treat it as a new file.

If your phone still shows the old icon, clear your mobile browser cache and then reload your store.

If the new favicon shows up in a private tab or another browser, it’s confirmed as caching.

If it doesn’t show anywhere, double-check you updated the published theme, then contact Shopify Support to review your favicon setup.

In Shopify, footer payment icons are controlled by your theme. Some themes show them automatically, and others need a small Liquid snippet.

To add more payment icons to your website:

Show payment icons from your theme settings

1. In your Shopify account, go to Settings, then open Payments.
2. Enable the payment methods you want to display.
3. Go to Online Store, then open Themes.
4. Click Customize.
5. Open the Footer section.
6. Turn on Show payment icons (the wording may vary by theme), then click Save.

If your theme supports this option, Shopify displays icons for your active payment methods in the footer.

Add specific payment icons with a Custom liquid block

Use this if your theme doesn’t have a toggle or you want to choose exactly which icons appear.

1. In your Shopify account, go to Online Store, then open Themes.
2. Click Customize.
3. Open the Footer section.
4. Click Add block, then select Custom liquid.
5. Paste the following snippet and update the list of payment types as needed:

6. Click Save and preview your store.

If you need to adjust spacing or size, style the wrapper class (.footer-payment-icons) in your theme CSS.

FAQ

How can I add more payment icons to my website footer?

Enable your payment methods in Settings → Payments, then turn on Show payment icons in your theme's Footer section. If your theme doesn't include that setting, add icons with a Custom Liquid block in the footer.

How to add payment icons to a footer in the Shopify Reformation theme?

1. In your Shopify account, go to Online Store, then open Themes.
2. Click Customize.
3. Open the Footer section.
4. Look for Show payment icons and enable it if available.
5. If the option is not available, add a Custom liquid block and paste the payment icon snippet.

In Shopify themes, footer layouts vary by theme. If your footer supports image blocks, you can add the image visually from the theme editor.

If not, you can anchor an image to the bottom-right corner of the footer using a lightweight CSS snippet.

To add an image to the bottom right of your footer:

Add the image from your theme editor

Use this method if your footer supports an Image block.

1. In your Shopify account, go to Online Store, then open Themes.
2. Click Customize.
3. Open a page that displays your footer (for example, the Home page).
4. Select the Footer section.
5. Click Add block and choose Image, Logo, or Custom content.
6. Upload your image and set the alignment to the right.
7. Click Save.

Add the image with CSS

Use this method if your theme does not allow you to place an image block in the footer or if you need precise positioning.

1. In your Shopify account, go to Content, then open Files.
2. Upload your image.
3. Click the file and copy its URL.
4. Go to Online Store, then open Themes.
5. Click Edit code.
6. Open Assets, then select base.css (or your main CSS file).
7. Paste your CSS at the bottom of the file and replace the URL with your own.

If your theme uses a different footer selector (e.g., .footer or .footer-wrapper), replace footer.site-footer with the selector you see when you Inspect the footer in your browser.

In Online Store 2.0 themes, most sections can be reordered directly from the theme editor—no code required.

To move a section:

1. In your Shopify account, go to Online Store, then open Themes.
2. Click Customize.
3. Open the template you want to edit (for example, Home page, Product, or Collection).
4. In the sidebar, find the section you want to move.
5. Drag the section up or down to change its position.
6. Click Save.

If a section cannot be moved from the editor, you will need to edit the template in Edit code. In Online Store 2.0 themes, reorder the section IDs in the order list of the template's JSON file (for example, product.json). In older themes, reorder the {% section %} tags in the template file.

Always duplicate your theme first and make code changes on the copy.

FAQ

How do I move the customer review section to another position?

1. In your Shopify account, go to Online Store, then open Themes.
2. Click Customize.
3. Open your Product template.
4. In the sidebar, find the Reviews section or the reviews app block.
5. Drag the block to the desired position.
6. Click Save.

If the reviews are not available as a block, you need to edit the product template and move the related snippet or {% render %} tag in Edit code.

How can I move the comment section under the product description?

1. In your Shopify account, go to Online Store, then open Themes.
2. Click Customize.
3. Open your Product template.
4. In the sidebar, find the Comments section or comment app block.
5. Drag it so it appears below the Product description section.
6. Click Save.

If comments are built into the template and not available as a block, edit the product template and move the related Liquid code below the description section in Edit code.

If your background pattern looks “cut” between sections, it’s usually caused by section spacing (padding/margins) or a section background color covering the page background.

To have a repeating pattern without breaks between sections:

Remove breaks in the theme editor

1. Go to Online Store → Themes → Customize.
2. Open the page where you see the breaks.
3. Click a section that creates a visible gap.
4. In the sidebar, reduce top/bottom padding (and Margin, if available).
5. If the section has a background color, set it to transparent or remove it.
6. Click Save and reload the page.

Make the background pattern uniform with CSS

Use this if your theme doesn’t let you fully remove spacing or section backgrounds.

1. Upload your pattern to Content → Files and copy the file URL.
2. Go to Online Store → Themes→ Edit code and open your main CSS file (e.g., base.css, theme.css, or styles.css).
3. Paste this at the bottom and replace the URL:

4. Then reduce the default gaps between sections by pasting:

If you only want to fix one area, target the section’s own wrapper class (the one you see when you right-click the section and choose Inspect) instead of .shopify-section.

Replace .shopify-section with that class name so the change only applies to that section.

FAQ

How can I blend webpage sections together?

In the theme editor, reduce top/bottom padding and remove any solid section background so your page background shows through.

If your theme limits these settings, use CSS to reduce spacing on the specific sections that show the break.

How can I fix breaks in my seamless background in the Craft theme?

In Online Store → Themes → Customize, first reduce section padding and remove any solid background colors where the breaks appear.

If gaps remain, apply your pattern as a repeating body background in your CSS and lower the margins on .shopify-section or the Craft-specific section classes in Edit code, then save and preview until the background looks continuous.

To set a different background image without changing your header, you need to apply the image only to the main content or a specific section and not to the header itself.

Change the background in the theme editor

1. Go to Online Store → Themes → Customize.
2. Open the page where you see the background (e.g., Home page).
3. Click the section that controls that area (e.g., Image banner).
4. Under the image setting, click Select image, choose your new image, and then click Save.

This updates the background image only for that section. Your header remains unchanged, and the text inside the banner stays the same.

Set the background with CSS

Use this if your theme doesn’t offer a background setting for the area you want.

1. Upload the image in Content → Files and copy the file URL.
2. Go to Online Store → Themes → Customize → Theme settings → Custom CSS and paste this rule (replace the URL):

This applies the image to the main content area only, so your header keeps its background and styling.

On mobile, slideshow images can look cropped or zoomed.

Start with the theme editor settings, then use CSS if you need more control adjusting how the slideshow displays on mobile.

Adjust the slideshow from the theme editor

1. Go to Online Store → Themes → Customize.
2. Open the page that has the slideshow (e.g., the Home page).
3. Click Slideshow in the left sidebar.
4. Look for mobile-related settings such as Image height, Adapt to image, or Show text on mobile, then Save.

Adjust the slideshow on mobile with CSS

Use this if the theme editor doesn’t give you layout control.

1. Go to Online Store → Themes → Edit code → Assets → base.css.
2. Paste the snippet you need at the bottom, then change the values to match what you want.

Set a fixed mobile height

Change the 400px value to make the slideshow taller or shorter on mobile.

If the height rule doesn’t apply, try targeting .slideshow__media instead.

Show the full image (less cropping)

Use this if the image is being cut off. It keeps the entire image visible on mobile.

Adjust text size or spacing on mobile

Change font-size to make the text larger/smaller and padding to add more/less space around it.

If a snippet doesn’t change anything, your Dawn version may use different class names.

Right-click the slideshow, choose Inspect, and replace the selector with the class you see in your theme.

FAQ

How to make the location of text in my slideshow match what I have for desktop

Apply the same alignment and positioning rules you use on desktop to the mobile breakpoint with CSS.

Use a mobile media query and set the slideshow text wrapper to the same text-align and justify-content values so the text matches your desktop layout on smaller screens.

By default, the email sign-up and social icons may not be stacked or centered as desired.

You can fix this layout by reordering and centering the blocks in the theme editor, or using a small CSS snippet if your theme doesn’t provide alignment controls.

To stack and center both blocks:

Reorder and center blocks in the theme editor

1. Go to Online Store → Themes → Customize.
2. Open a page that shows the footer (e.g., Home page), then click the Footer section.
3. Drag the Social icons block above the Email sign-up block.
4. For each block, set the alignment to Center (if available).
5. Click Save.

Center the blocks with CSS

Use this if your theme doesn’t include alignment settings for these blocks.

1. Go to Online Store → Themes→ Edit code.
2. Open your main CSS file under Assets (e.g., base.css or theme.css).
3. Paste this at the bottom:

Update the selectors (.footer-block--newsletter, .footer-block--social) to match your theme if needed.

The easiest way is to right-click the footer, choose Inspect, and copy the class names you see for the newsletter and social blocks.

Some themes center product description text on mobile by default, which can make longer content harder to read.

If you want a more scannable layout, you can adjust the alignment using the theme editor or a mobile-only CSS override.

To align the product description on mobile:

Left-align the description in the theme editor

1. Go to Online Store → Themes → Customize.
2. Use the page selector to open a product page.
3. Click the section that contains the product description (often Product information).
4. Look for a setting like Mobile content alignment or Text alignment.
5. Set it to Left, then click Save.

Left-align the description with CSS (mobile only)

Use this if your theme doesn’t have a mobile alignment setting.

1. Open a product page, right-click the description, and choose Inspect. Copy the class name that wraps the description (for example, .product__description).
2. Go to Online Store → Themes → Customize → Theme settings → Custom CSS.
3. Paste this snippet and replace .product__description with the class you copied:

FAQ

How can I fix layout issues with my main product on mobile view

Start in the theme editor: check mobile settings like stack images on mobile, spacing, and alignment.

If one element still looks wrong, inspect it on the storefront and override it with a targeted mobile CSS rule (e.g., text alignment or padding) in Theme settings → Custom CSS.

If your product or FAQ sections use collapsible tabs, the “+” icon might appear on the left or right by default. You can move it to the side you prefer using a small CSS change.

To move the ‘+’ sign:

1. Go to Online Store → Themes → Edit code.
2. Open your main CSS file (base.css, theme.css, or styles.css).
3. Add one of these snippets at the bottom and click Save.

Move the icon to the left:

If you want to move the icon to the right:

If your theme uses a small image or SVG for the “+” instead of CSS, inspect the tab in your browser and replace .accordion-title with the class wrapping the icon.

FAQ

How can I add animation to collapsible tabs?

Add a CSS transition to the collapsible content wrapper. Paste this in your main CSS file and replace .accordion__content with the class you see in Inspect:

Increase 500px if your content is taller.

In Crave, the small images under the main product image are the thumbnail row. Crave is based on Dawn and includes built-in settings to remove them, so you don't need any code.

To hide thumbnails on desktop:

1. Go to Online Store → Themes → Customize.
2. Open a product page from the page selector.
3. Click the Product information section.
4. Under Media, find Desktop layout and select Stacked.
5. Click Save.

Your product images now display one below the other on desktop, without a thumbnail row.

FAQ

How can I hide thumbnails on the Crave theme for mobile view only?

Crave includes a built-in setting for this, so you don't need any code.

1. Go to Online Store → Themes → Customize.
2. Open a product page from the page selector.
3. Click the Product information section.
4. Under Media, find Mobile layout and select Hide thumbnails.
5. Click Save.

Thumbnails are now hidden on mobile, while your desktop layout stays unchanged. Customers can still swipe through all product images.

Most tracking pages are either a custom page you created or a page generated by a tracking app. The right way to customize the CSS depends on which one you’re using.

Customize a tracking page you created

If you added a tracking form via Online Store → Pages or a Custom Liquid block:

1. Wrap the tracking embed so your CSS only applies to this page:

2. Add your CSS in one place:

3. Online Store → Themes → Customize → Theme settings → Custom CSS, or
4. Online Store → Themes → Edit code → Assets → your main CSS file

Important: Creating a new file like custom.css won’t change anything unless your theme loads it (usually in theme.liquid).

Customize a tracking page from an app

Check the app settings first. Many tracking apps include design options or a custom CSS field.

If the tracking page is loaded inside an iframe, your theme CSS won’t apply to it. In that case, use the app’s styling settings instead.

FAQ

How can I remove the order tracking heading in the Dawn Theme?

If your tracking page shows a large page title (the <h1>), hide it with a page-specific CSS rule.

1. Open the tracking page, right-click the heading, and choose Inspect.
2. Copy the wrapper class around the title (it often looks like section-template--…__main-padding).
3. Go to Online Store → Themes → Edit code → Assets → base.css (or your theme’s main CSS file) and add:

This removes the heading only on that tracking page (instead of hiding titles across your whole store).

In most Shopify themes, the button briefly looks “blurred” because it becomes disabled while the product form updates the selected variant.

To remove that styling, override the button’s disabled state in CSS.

1. Open a product page, right-click Add to cart, and select Inspect.
2. Copy the button class (in Dawn it’s often .product-form__submit).
3. Go to Online Store → Themes → Edit code → Assets → base.css (or your main CSS file).

4. Paste this at the bottom and Save:

If your theme also applies the effect during loading, add:

If your theme adds a button shadow globally, you can also remove it in Theme settings → Buttons.

The fade during variant changes is usually the disabled state, so the CSS override above is the most reliable fix.

FAQ

How do I remove the hover/box-shadow effect from the Add to Cart button in Dawn?

In Dawn, the shadow usually comes from the button’s hover and focus styles.

1. Go to Online Store → Themes → Edit code → Assets → base.css.
2. Add this at the bottom:

How to remove the black border or box around the Add to Cart button?

That “box” is usually either a border, an outline (focus ring), or a box-shadow.

Add this to Assets → base.css:

If the “black box” only appears after clicking (focus state), use a custom focus style instead of removing focus entirely:

Replace #4a90e2 with a color that matches your brand. Keeping a visible focus style helps customers who navigate with a keyboard.

Before changing your live Shopify store, it’s recommended to test new features to avoid breaking your storefront. Some practical ways to test a new feature safely:

1. Work in a duplicate theme: Duplicate your live theme and test changes on the copy.
2. Check affected templates: Review every page type the feature touches (product, cart, collection, etc.).
3. Run a full flow: Add to cart, change variants, apply a discount code, and place a test order if checkout is involved.
4. Preview across devices: Verify mobile and desktop layouts.
5. Validate app behavior: Re-test any apps that add code or modify the same pages.

FAQ

How can I test a new theme without altering my current one?

Duplicate your live theme (or keep the new theme unpublished), preview it, and publish it only when you’re ready.