More Help
Submit TicketPakk.io

Custom CSS

How to access deep site customisation in Pakk with custom CSS

There's no need to use custom CSS at all in Pakk - everything you need to customise in order to maintain a clean, branded and functional experience is included out of the box. However, for those scenarios where you need to a custom tweak here and there, Pakk gives you access to customise the underlying CSS of your site.

Remember our built-theme and default layouts reflect up-to-date best practices for e-commerce websites. We do the research and all the hard work for you to make sure your website is the best it can be. We also conduct thorough testing on a wide range of devices. There are lots of different browsers both on desktop and mobile, and lots of different screen sizes. If you go down the custom CSS route, make sure that any CSS changes are thoroughly tested so all your customers have a great experience using your website.

Pros and Cons of Using Custom CSS

Pros

  1. Complete Control: Custom CSS allows you to have complete control over the look and feel of your website. You can style elements exactly how you want them.

  2. Unique Design: Stand out from other Pakk stores by implementing unique styles that reflect your brand's personality.

  3. Advanced Styling: Achieve advanced styling techniques that might not be possible with the default options provided by Pakk.

Cons

  1. Maintenance: Custom CSS requires ongoing maintenance, especially when updates are made to the Pakk platform. You need to ensure your custom styles don't conflict with new features or changes.

  2. Cross-Browser Compatibility: Custom styles need to be tested across different browsers and devices to ensure they work correctly for all users. This is really important: changes that make your webpage look great on a big desktop screen might not work that well on a small phone screen

  3. Complexity: Adding custom CSS can increase the complexity of your site’s codebase, making it harder to troubleshoot issues or onboard new team members.

  4. Potential for Errors: Incorrect or poorly written CSS can break the layout or functionality of your site, leading to a poor user experience.

The Pakk Custom CSS editor

Use Pakk’s Custom CSS editor to apply styles across the entire website or to specific elements like product titles, categories, buttons, and navigation menus. Find the CSS editor at Websites > Template > Custom CSS.

Next to the editor, you'll find a tick box that can enable or disable all custom CSS with just one click, so if something goes wrong you can go back to the uncustomed webpage with just one click - this is very useful for trying to identify layout and styling bugs that might have been introduced through your custom CSS

Using the editor is straightforward, add lines of CSS code and press the Save button to apply them. As with any other changes made to the website setup, you can quickly view the effects of your custom CSS by using the preview feature, where you can see both a desktop and a mobile version of your site.

How to Identify CSS Targets for Customisation

To modify elements using custom CSS, you first need to find the elements on your website. Here’s how to open Developer Tools and inspect elements in a web browser:

  1. Right-click anywhere on the page (or on a specific element you want to change, such as a title or button).

  2. Select "Inspect" (on Google Chrome) or "Inspect Element" (on Firefox).

This will open the Developer Tools window, where you’ll see the HTML code for the element you clicked on. You can then view the class, ID, or tag that is associated with the element.

For example, if you right-click a product title, you might see something like this:

<h1 class="product-title">Product Name</h1>

Now that you've identified the class (product-title), you can use it to write custom CSS for the element.

Custom CSS Examples in Pakk:

Example 1: Global Font Change for the Entire Website

To change the font for the entire website, you can target the <body> tag.

Add the following CSS to apply a global font change:

/* This will change the font for all the (standard) text on the website*/
body { 
    font-family: 'Open Sans', sans-serif;
    color: #333;
}

Example 2: Customizing Product Names Across the Website

Find and inspect a product name, you might find a tag like this:

<div class="product-name">MyProductName</div>

Add the following CSS to style all product titles across the website:

/* This will change the font type and size for all product titles the color to green*/
body {
    .product-page {
        .product-name {
                font-family: 'Lora', serif;
                font-size: 38px;
                color: green;
        }
    }
}

Example 3: Customizing fonts on the USP bar

Change the default font size, make it bold, and change the background colour of the USP bar

/* This will change the font and background of the USP bar*/
ul.usp-bar {
    font-weight: bold; 
    font-size: 24px;  }
    backbround-color: rgba(0, 0, 255, 1); /* blue */ 
}

Example 4: Customizing the size of your Hero image

Make the minimum height of your hero image bigger 

/* make hero shot a bit larger vertically */
.main-content-area.home .blocks-container .block-row:first-child .block {
    min-height: 70vh;
}
PreviousHeaderNextImagery

Last updated