How to Customise your Shopify Store - Styles

How to Customise your Shopify Store - Styles

Customising the styles on your Shopify store allows you to create a unique look that reflects your brand’s identity and enhances the overall shopping experience for your customers. Here’s a step-by-step guide on how to do it:

How to Customise Your Shopify Store's Styles

Step 1: Access Your Shopify Admin

  1. Log in to your Shopify account.
  2. Once logged in, you’ll be directed to your Shopify admin dashboard.

Step 2: Navigate to the Theme Customiser

  1. From the Shopify admin dashboard, go to "Online Store" and click on "Themes."
  2. Locate your current theme and click the "Customise" button to open the theme customiser.

Step 3: Explore Style Settings

  1. In the theme customiser, you will find various sections that allow you to customise different aspects of your store’s appearance. These sections may include:

    • Colours
    • Typography
    • Buttons
    • Backgrounds
    • Product pages
    • Collection pages
    • Header and footer

  2. Click on each section to explore the available style settings.

Step 4: Customise Colours

  1. Primary Colours: Set the primary colours for your store, which typically affect links, buttons, and other interactive elements.
    • Choose colours that match your brand’s palette.
  2. Background Colours: Adjust the background colours for different sections of your store.
    • Ensure the background colours provide sufficient contrast with text to maintain readability.
  3. Text Colours: Customise the colours for headings, body text, and other textual elements.
    • Ensure text colours are legible and complement your brand’s style.

Step 5: Customise Typography

  1. Click on the "Typography" section in the theme customiser.
  2. Select fonts for headings, body text, and other text elements.
  3. Adjust font sizes, weights, and styles to ensure readability and a cohesive look across your store.

Step 6: Customise Buttons

  1. Navigate to the "Buttons" section (if available) in the theme customiser.
  2. Set the colours for button backgrounds, text, and borders.
  3. Adjust the shape and size of buttons to match your store’s design aesthetic.
  4. Ensure buttons are easily distinguishable and encourage action.

Step 7: Customise Backgrounds

  1. Some themes allow you to set background images or patterns for various sections of your store.
  2. Upload background images that enhance your brand’s visual identity.
  3. Adjust the positioning and repetition of background images to achieve the desired look.

Step 8: Customise Product and Collection Pages

  1. Navigate to the "Product pages" and "Collection pages" sections in the theme customiser.
  2. Adjust the layout and style of product listings, images, and descriptions.
  3. Ensure product information is presented clearly and attractively.

Step 9: Customise Header and Footer

  1. Click on the "Header" and "Footer" sections in the theme customiser.
  2. Customise the layout, colours, and content of these sections to align with your brand.
  3. Ensure navigation links are easily accessible and the footer contains essential information (e.g., contact details, social media links).

Step 10: Add Custom CSS (Optional)

  1. If you need to make further style adjustments beyond the theme customiser options, you can add custom CSS.
  2. In the theme editor (accessible through "Online Store" > "Themes" > "Actions" > "Edit code"), open the theme’s CSS file (often named theme.scss.liquid or similar).
  3. Add your custom CSS at the bottom of the file. For example:
    css
    .custom-button { background-colour: #ff6600; border-radius: 10px; colour: #ffffff; }
  4. Save your changes.

Step 11: Preview and Save

  1. After making your customisations, click the "Save" button in the theme customiser to apply the changes to your store.
  2. Preview your store to ensure all styles appear as expected across different devices (desktop, tablet, and mobile).

Conclusion

Customising the styles of your Shopify store allows you to create a unique and professional appearance that aligns with your brand identity. By following these steps, you can ensure that your store’s design is visually appealing, cohesive, and enhances the overall user experience.

Back to blog