Search results for image size

153 articles found

  • Image size for products

    Product image size: We recommend square dimensions like 2048 x 2048. Shopify has increased the size recommendation to meet the needs for 4k displays. To support higher resolution monitors try to use

  • Products: Smaller product image size

    To reduce the size of your main product image, you can make this code customization. Result after: Before: How to: Option 1: Product pages and homepage featured product This version will change the si

  • Larger images when using Shopify's Rich Text Editor

    Tip - When adding images in Shopify's Rich Text editor for Pages, Blog posts, Product description, Collection description - The image size Shopify defaults to is very small: Once you choose your

  • How to add HTML or a Page to your homepage

    Pipeline has a feature where you can pull-in any Shopify Page that you've created into your homepage as a section. This can be handy if you have some HTML that needs to be added to the homepage or any

  • Cart: Add an image to the cart

    To add an image at the bottom of your cart page, you can add some HTML code and CSS style to your cart.liquid file from the templates folder. Sample result for Modal cart: For this customization, the

  • Banner images that work well with multiple device sizes

    1 Recommended image size for banners Homepage banners and slideshow images We recommend using a horizontal ratio like 16:9 and experiment with how the images are displaying on your browser with differ

  • Products: Large vertical image display with sticky column

    With this modification, you can display all your product images in full size down the main product image column. Example with sticky right column: Important notes: The first image will still have the

  • How to show an image in a pop-up window

    If you need to add a modal window (pop-up) to show an image in on a Page or Blog post, try this very simple method: Result: How to 1 Add Javascript code Starting on a new line, add the following code

  • Make my mobile navigation expand and close controls larger

    With some fonts and colours, the mobile expand and close icons can be difficult to see. Here's some code you can add that will make them bolder to help users especially when soft colours or fonts are

  • Size down zoomed product images to fit browser height

    This customization will make the image fit on shorter screens when the zoom pop-up is used. Example before: Example after: Allowing the customer to see the whole product without scrolling.  Code: /* -

  • Headings: Change font size on homepage sections

    This article includes many of the homepage heading elements. If you need to modify the font sizes or other font properties on the homepage, you can use this guide to make your changes. The article

  • Collection List: Adjust height for larger square-like size

    If you'd like to change the height of the homepage Collection list images to be longer, you can try this modification. Result: Before: Option 1: Change size for tablet and desktop only /* -- code to m

  • Align image to top for Image with text overlay

    Example before: Tall height setting with no parallax - Image is 3/4 height of screen and positioned to the center (top of image is cropped). Example after: Same 3/4 height with the image positioned to

  • Header Logo: Improve the size of your logo

    When setting up your logo in the header space, you'll want to use a logo with almost no whitespace in the image file. If you upload a logo with whitespace/padding around the logo, you may experience a

  • How to add a promo image image at the bottom of all product pages

    Example: How to: 1 Upload your image to Shopify Files Open your Shopify Files in the Settings: Upload your image here. After you've uploaded the image, you'll need to copy this complete URL address, w

  • Size Charts: Example of custom size charts based on product type

    This example covers how to create custom size chart pop-ups on your product pages based on product type. A custom size chart link will be shown: Based on the type of product: Products that don't match

  • Image and text: Alternate image or text position

    Image and text can be stacked with alternating image and text content. Here's an example how:  Add Image and text section multiple times. In this example, we'll use three Image and text sections: Add

  • Image and a text box side-by-side using tables

    When using the Shopify Page or Blog editor, you can use a single row table to display an image and text side-by-side. Result: Use the table option in the toolbar: Choose Insert table: Then, use the to

  • Products: Move thumbnails to left or right of featured product image

    Result left: Result right side: CSS Code to use Pipeline 5.0 and higher: Click to view code CSS Code to use Earlier versions of Pipeline: Click to view code Where do I add the code? Use this link to

  • Logo: Increase logo size for mobile navigation

    /* -- code for larger logo with mobile navigation -- */ .nav--mobile .logo-wrapper--image img { max-height:100px; } /* - end - */ Where do I add the code? Use this link to learn where exactly to add t

  • Navigation: Larger font size

    1 Larger top-level menu items Example: Before: Pipeline 5.0 Code: /* -- code make top level menu items larger -- */ .navlink--toplevel .navtext { font-size:18px !important; } /* - end - */ Earlier

  • Image gallery example

    Example: How to: Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support

  • Collections: Change product title size

    Example: After: Code: /* -- code to change collection product title size -- */ .template-collection .name_wrapper { font-size : 1.2em; } /* - end - */ Customize: Modify the value of 1.2em Smaller - Us

  • Footer: Smaller font size for credits

    Example: After: Code: /* -- code to change footer credit font size -- */ .footer-secondary li a { font-size : 0.7em; } /* - end - */ You can adjust the value of 0.7em; Smaller, try: 0.6em; or 0.5em; L

  • Change the image overlay color

    Example before: Example after using red overlay: Code: /* -- code start -- */ .homepage--white .image-overlay,.homepage--light .image-overlay { background-color: #cc0000 } /* - end - */ The example he

  • Blogs: Move title below image

    In this tutorial, we will move the title from inside the image to below the image on a blog index page with grid view. Since the text will be removed, the dark image overlay will not be required. We

  • Blogs: Remove blog banner image

    In this tutorial we will create a custom section and template which will remove the banner image on your blog posts while still maintaining the featured image for the homepage blog section and the

  • Social: increase the size of social icons

    Example: Code: /* -- code to increase the size of social icons in footer -- */ .social-icons li .icon { font-size: 60px; } /* - end - */ We've used 60px; for the icon size in this example. You can adj

  • Blank alt tag on featured image

    File to correct: (1) In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for: alt="{{ image.alt | escape }}" (2) Only the first instance needs to be corrected, u

  • Text columns with Images: Image links

    When using Text columns with images - If you'd like the image to be your link, then simply keep your Button label blank and still include a Button link: (1) Add your image (2) Leave the Button label b

  • Collections: Show last image on hover

    This code change will show the last image on hover instead of the second image. This change is for Pipeline 4 and higher only.  How to: Always make a duplicate of your theme before adding any code. Th

  • Products: Darken the product image arrows

    If you'd like to darken the next and previous Product image arrows, there is a line of code you can add to make this change. Before: After: How to: Open your Theme Editor. Choose (1) Theme settings an

  • Zoom: Magnify product image on hover

    For a very basic magnify effect on your product pages, you can make this customization to provide zoom on hover. The regular click to zoom in to a modal window option will still work (setting needs to

  • Create a responsive size chart page using flexbox

    Example desktop: Example tablet: Example mobile: The concept uses individual divs for the content. Flexbox makes the div sections responsive. Some tables can be hard to read when using a mobile device

  • Change the Add to Cart button color and size

    The Add to Cart button color can be easily changed by using the Link color setting under Theme settings: The Link color will also change other link elements including size chart, vendor, select option

  • Blogs: Move article content below banner image

    Before: After: Code: /* -- code to move content below blog banner -- */ .blog__article--over-image { margin-top: 10px !important; } /* - end - */ Where do I add the code? Use this link to learn where

  • Zoom: Turn on product image zoom feature

    Here's how to enable Pipeline's product zoom feature. How to: Open product page settings in the Theme Editor The zoom option can be activated with this checkbox: Save your theme editor changes. 

  • Move meganav image to the left side

    When using a meganav, the image promo defaults to the right side of the navigation. You can use this modification to move it over to the left: Code: /* -- code to move meganav image to left side -- */

  • How to add a Size Chart to your product pages

    Pipeline has the ability to show a popup Shopify Page on all your product pages. This or product tabs can be used for displaying a size chart to your customers.  How to use: 1 Create a size chart page

  • Blogs: Hide blog title when using an image

    When you add a Featured Image banner for the main blog index page, the main title of the blog section is positioned over the image. If you'd like to remove this title, you can use this customization. 

  • Image with text: Show text-image order on mobile

    When using Image with text, the mobile display order is image then text (image-text) regardless of the position on desktop. To reverse that order and show text-image format, you can use this code snip

  • Hide both collection banner image and collection title

    Some shops use a collection image to provide an image on the homepage Collection list. There are a few ways to get around this association - See other article links at the bottom. If you'd like to rem

  • Featured collection: Show one image on mobile while showing two on desktop

    When the desktop setting is two items per row for the homepage's Featured collection section module, mobile will also show two per row. If you'd like to modify that to show one per row on mobile, here

  • Banner: Display the entire image on desktop and mobile

    If you're finding that your mobile banner image is cropping out the main subject or possibly if you have a long image that's not displaying the entire image; there is a setting combination that can he

  • Social: Add a custom share image for Pipeline 2.x

    This article is for older versions of Pipeline only - Pipeline 2.x This tutorial will help you override your theme settings in Pipeline to add a global setting for the social share photo. Always make

  • Products: Replace image thumbnails with slideshow dots or dashes

    If you'd like to change the product page to display dots in the product slider instead of thumbnail images, you ca use this custom modification. Difficulty: Intermediate. Requires you to modify the

  • Show featured image until variant selection is made - Pipeline 4

    This customization will display the first image for your product until a variant is selected. It also forces the customer to choose a variant. When you have images assigned to each variant, the theme

  • Products: Larger thumbnail images

    You can increase the size of your product thumbnail images with some custom code. Before: After: Code: /* --- code to enlarge product thumbnail images --- */ // Adjust thumb size on next line. Default

  • Move collection title and or description below collection banner image

    Note: If you're running Pipeline 4.3 or higher, this feature is already included in the theme, no code changes are required: Pipeline 4.3 New Features In this tutorial we will modify the collection te

  • Blogs: Add a description of your blog and image height

    This customization adds the ability to change the Featured image banner height and also adds the option to have a description of your blog.  Example: Description added below standard blog index title: